我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對象進行綁定，實現視圖與數據，數據與業務分離。

推薦閱讀：
相關文章