網(wǎng)友解答: 我13年開始入坑前端，經(jīng)歷了原生，jquery，angular及到現(xiàn)在的vue，來談?wù)勥@一路的心路歷程吧。在13年時(shí)，我最開始使用原生去寫頁面交互，取元素，加事件，寫動(dòng)畫，還

我13年開始入坑前端，經(jīng)歷了原生，jquery，angular及到現(xiàn)在的vue，來談?wù)勥@一路的心路歷程吧。

在13年時(shí)，我最開始使用原生去寫頁面交互，取元素，加事件，寫動(dòng)畫，還有ie6、7的兼容性，現(xiàn)在的前端是無法明白當(dāng)時(shí)的苦。

但當(dāng)遇到了jquery，就像悟空遇到了金箍棒，突然讓你覺得，一切都是如此簡(jiǎn)單，突然讓你覺得你千斤的背上卸去了一半重量的輕松。不用你再去為了獲取一個(gè)元素寫幾行代碼，只為了兼容某些瀏覽器，不用你再去為了一個(gè)動(dòng)畫焦頭難額。它有強(qiáng)大無比的dom選擇器，讓你隨心所欲的操作界面上的任何元素，包括改變樣式，賦值，取值，乃至添加元素，讓你爽上天，即使在現(xiàn)在這個(gè)框架無比強(qiáng)大的年代，它依然非常好用，另外，jquery相關(guān)的各種各樣的插件會(huì)讓你在開發(fā)中事半功倍。

但是呢，時(shí)代在進(jìn)步，需求也在改變，隨著大型網(wǎng)站越來越多，尤其是移動(dòng)互聯(lián)網(wǎng)的出現(xiàn)，單頁面應(yīng)用也就不斷增多。所以，應(yīng)用的復(fù)雜程度，代碼的復(fù)雜程度都不斷增加，此時(shí)，jquery就會(huì)有很大的缺陷，具體在哪，我就拿我上一個(gè)公司的項(xiàng)目說下。

我們那項(xiàng)目是一個(gè)單頁面應(yīng)用的web版，是一個(gè)企業(yè)應(yīng)用，有差不多十幾個(gè)功能。在我去公司是，架構(gòu)已經(jīng)形成，使用的jquery+ejs。沒有使用任何其他框架，在開始功能很少的時(shí)候，沒有發(fā)覺有太大的問題，但是隨著需求增加，每個(gè)功能的代碼量也就開始增加，可能僅僅一個(gè)簡(jiǎn)單的功能，都需要將近兩千的代碼量，而且代碼主要用來干什么呢？用來獲取數(shù)據(jù)，提交數(shù)據(jù)，將數(shù)據(jù)寫入頁面，及數(shù)據(jù)變化后，需要?jiǎng)討B(tài)的生成html，然后在添加到頁面。而且這所有的代碼，復(fù)用性很低。到前兩年，問題就相當(dāng)突出，整個(gè)網(wǎng)站，代碼總量超過了10萬行，合并壓縮后js文件都差不多一兩兆，這還不是最主要的，最主要是當(dāng)需要改一個(gè)小小的需求時(shí)，你會(huì)發(fā)覺幾萬行代碼你都不想去看它，而且一個(gè)不注意就會(huì)導(dǎo)致意料不到的bug，此時(shí)，突然覺得，一切都難以控制。

隨后，我們?cè)谛碌墓δ芾锸褂昧水?dāng)時(shí)比較火的，社區(qū)環(huán)境較好的angular1，使用了雙向綁定，因?yàn)槲覀兪瞧髽I(yè)應(yīng)用系統(tǒng)，數(shù)據(jù)相關(guān)很多，所以減少了很多的取數(shù)據(jù)，寫數(shù)據(jù)的代碼，而且使用angular指令去組件化頁面，提高頁面復(fù)用性。使用service和filter去提高某些方法的復(fù)用性。這樣，也就減少了很大部分的代碼量，提高了很多的開發(fā)效率。

但是，由于我們本來是單頁面應(yīng)用，公司是創(chuàng)業(yè)公司，無法進(jìn)行重構(gòu)，所以在后面功能，每次都需要重新重構(gòu)一個(gè)angular項(xiàng)目，而且，angular的學(xué)習(xí)成本和項(xiàng)目復(fù)雜度很高，一個(gè)小功能都是一個(gè)新的anglar項(xiàng)目。

隨后，vue的出現(xiàn)，它輕量級(jí)，雙向綁定，較低的學(xué)習(xí)成本，組件化的開發(fā)模式這些都優(yōu)于angular1，因此，從此后項(xiàng)目，就開始使用vue及進(jìn)行其組件化管理。

對(duì)于使用什么框架，需要根據(jù)項(xiàng)目需求和公司技術(shù)人員，公司狀況而定。更重要的是，不管是使用什么框架，最終目的都是為了提高開發(fā)效率，開發(fā)質(zhì)量，提高項(xiàng)目的可維護(hù)性。

數(shù)據(jù)取值填值，采用雙向綁定的框架，vue,angular.avalon等，JQuery則負(fù)責(zé)除數(shù)據(jù)處理以外的事情。比如事件處理，動(dòng)畫，dom對(duì)象操作。兩者基本都是混合一起用。沒用說要拋棄那個(gè)一個(gè)。簡(jiǎn)單說，JQuery依然還是主流，但是把填值取值，這一塊操作抽離出來，通過框架，把數(shù)據(jù)模型與dom對(duì)象進(jìn)行綁定，實(shí)現(xiàn)視圖與數(shù)據(jù)，數(shù)據(jù)與業(yè)務(wù)分離。