我13年開始入坑前端，經歷了原生，jquery，angular及到現在的vue，來談談這一路的心路歷程吧。

在13年時，我最開始使用原生去寫頁面互動，取元素，加事件，寫動畫，還有ie6、7的相容性，現在的前端是無法明白當時的苦。

但當遇到了jquery，就像悟空遇到了金箍棒，突然讓你覺得，一切都是如此簡單，突然讓你覺得你千斤的背上卸去了一半重量的輕鬆。不用你再去為了獲取一個元素寫幾行程式碼，只為了相容某些瀏覽器，不用你再去為了一個動畫焦頭難額。它有強大無比的dom選擇器，讓你隨心所欲的操作介面上的任何元素，包括改變樣式，賦值，取值，乃至新增元素，讓你爽上天，即使在現在這個框架無比強大的年代，它依然非常好用，另外，jquery相關的各種各樣的外掛會讓你在開發中事半功倍。

但是呢，時代在進步，需求也在改變，隨著大型網站越來越多，尤其是移動網際網路的出現，單頁面應用也就不斷增多。所以，應用的複雜程度，程式碼的複雜程度都不斷增加，此時，jquery就會有很大的缺陷，具體在哪，我就拿我上一個公司的專案說下。

我們那專案是一個單頁面應用的web版，是一個企業應用，有差不多十幾個功能。在我去公司是，架構已經形成，使用的jquery+ejs。沒有使用任何其他框架，在開始功能很少的時候，沒有發覺有太大的問題，但是隨著需求增加，每個功能的程式碼量也就開始增加，可能僅僅一個簡單的功能，都需要將近兩千的程式碼量，而且程式碼主要用來幹什麼呢？用來獲取資料，提交資料，將資料寫入頁面，及資料變化後，需要動態的生成html，然後在新增到頁面。而且這所有的程式碼，複用性很低。到前兩年，問題就相當突出，整個網站，程式碼總量超過了10萬行，合併壓縮後js檔案都差不多一兩兆，這還不是最主要的，最主要是當需要改一個小小的需求時，你會發覺幾萬行程式碼你都不想去看它，而且一個不注意就會導致意料不到的bug，此時，突然覺得，一切都難以控制。

隨後，我們在新的功能裡使用了當時比較火的，社群環境較好的angular1，使用了雙向繫結，因為我們是企業應用系統，資料相關很多，所以減少了很多的取資料，寫資料的程式碼，而且使用angular指令去元件化頁面，提高頁面複用性。使用service和filter去提高某些方法的複用性。這樣，也就減少了很大部分的程式碼量，提高了很多的開發效率。

但是，由於我們本來是單頁面應用，公司是創業公司，無法進行重構，所以在後面功能，每次都需要重新重構一個angular專案，而且，angular的學習成本和專案複雜度很高，一個小功能都是一個新的anglar專案。

隨後，vue的出現，它輕量級，雙向繫結，較低的學習成本，元件化的開發模式這些都優於angular1，因此，從此後專案，就開始使用vue及進行其元件化管理。

對於使用什麼框架，需要根據專案需求和公司技術人員，公司狀況而定。更重要的是，不管是使用什麼框架，最終目的都是為了提高開發效率，開發質量，提高專案的可維護性。

資料取值填值，採用雙向繫結的框架，vue,angular.avalon等，JQuery則負責除資料處理以外的事情。比如事件處理，動畫，dom物件操作。兩者基本都是混合一起用。沒用說要拋棄那個一個。簡單說，JQuery依然還是主流，但是把填值取值，這一塊操作抽離出來，透過框架，把資料模型與dom物件進行繫結，實現檢視與資料，資料與業務分離。