前端框架 jQuery 和 Vue 如何選擇？

• 2019 年 10 月 10 日
• 筆記

前端框架

不會前端開發的後端不是一個好的後端開發，平時寫點小項目可以用得上，先簡單了解一下前端這個概念。

前端： HTML（超文本標記語言），CSS（層疊樣式表）和JavaScript（腳本語言）。

HTML，通常說的H5，其實按標準來說，HTML4的後續版本不帶編號了，並保證向前的兼容性。

CSS的版本3，增加了translate()，能完成以前一定需要js才能做到的動畫，同時增加了flex彈性盒子（響應式設計，提供一種更加有效的方式來對一個容器中的子元素進行排列、對齊和分配空白空間，以往使用float）。

jQuery

jQuery是一個快速、簡潔的JavaScript框架，是繼Prototype之後又一個優秀的JavaScript程式碼庫（或JavaScript框架）。

jQuery設計的宗旨是「write Less，Do More」，即倡導寫更少的程式碼，做更多的事情。

敲黑板：簡單來說就是封裝了一部分的函數，簡化了原生js的寫法，在實際使用時，jQuery對DOM樹進行操控，即：首先有一個寫好的html頁面，再對其修改操作，如寫按鈕事件函數，點擊隱藏，切換，頁面跳轉等。

jQuery庫包含以下功能：

• HTML元素選取
• HTML元素操作
• CSS操作
• HTML事件函數
• JavaScript特效和動畫
• HTML DOM遍歷和修改
• AJAX
• Utilities

除此之外，jQuery還提供了大量的插件。它兼容各種主流瀏覽器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

這個曾經也是現在依然最流行的web前端js庫，可是現在無論是中國還是國外他的使用率正在漸漸被其他的js庫所代替，隨著瀏覽器廠商對HTML5規範統一遵循以及ECMA6在瀏覽器端的實現，jQuery的使用率將會越來越低。

敲黑板（思考）：為什麼說jQuery的使用率越來越低？

Vue

Vue (讀音 /vjuː/，類似於 view) 是一套用於構建用戶介面的漸進式框架。

與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用，通過儘可能簡單的 API 實現響應的數據綁定和組合的視圖組件。

Vue 的核心庫只關注視圖層，不僅易於上手，還便於與第三方庫或既有項目整合。

Vue是一個興起的前端js庫，是一個精簡的MVVM。從技術角度講，Vue.js 專註於 MVVM 模型的 ViewModel 層。

它通過雙向數據綁定把 View 層和 Model 層連接了起來，通過對數據的操作就可以完成對頁面視圖的渲染。

當然還有很多其他的MVVM框架如Angular，React都是大同小異，本質上都是基於MVVM的理念。然而Vue以他獨特的優勢簡單，快速，組合，緊湊，強大而迅速崛起。

敲黑板：為什麼說「通過對數據的操作就可以完成對頁面視圖的渲染」？

Vue.js是一種基於MVVM方式的框架，專註於MVVM模型的ViewModel層，通過雙向數據綁定的方式將Model層和View層連接起來。

而在Vue中實現雙向數據綁定的原理是：採用數據劫持結合發布者-訂閱者的方式，通過Object.defineProperty()來劫持各個屬性的setter，getter，在數據變動時，發布消息給訂閱者，觸發相應的監聽回調。

通俗的講，就是利用observe監聽Model層的數據變化；利用Compile來編譯解析模板指令，最終利用Watcher搭起Observer和Compile之間的通訊橋樑，達到數據變化 (model)-》視圖更新(view)；視圖變化(view)-》數據(model)變更的雙向綁定效果。

敲黑板：可以說操作DOM的事兒，就留給框架去做了。這比傳統jQuery開發效率高，程式碼可維護性高，可擴展性強、性能好。

jQuery操作思想

jQuery是使用選擇器（$）選取DOM對象，對其進行賦值、取值、事件綁定等操作，其實和原生的HTML的區別只在於可以更方便的選取和操作DOM對象，而數據和介面是在一起的。比如需要獲取label標籤的內容：$("lable").val();，它還是依賴DOM元素的值。

Vue操作思想

Vue基於一種MVVM模式，使用數據驅動的方式，通過Vue對象將數據和View完全分離開來了。對數據進行操作不再需要引用相應的DOM對象，可以說數據和View是分離的，他們通過Vue對象這個vm實現相互的綁定。

jQuery應用場景

jquery側重樣式操作，比如一些H5的動畫頁面；需要js來操作頁面樣式的頁面。

敲黑板：jQuery的編程思想是首先編寫HTML和CSS的頁面展示再操作DOM樹，而框架是首先考慮頁面的功能，再進行前端的展示，編程思想正好相反。

Vue應用場景

Vue側重數據綁定，比如複雜數據操作的後台頁面；表單填寫頁面。

敲黑板：二者也是可以結合起來一起使用的，vue側重數據綁定，jquery側重樣式操作，動畫效果等，則會更加高效率的完成業務需求。

Vue帶來了哪些改變？

我是一名後端開發，剛開始入門時接觸js然後jQuery，感覺它更像是一把剪刀，簡單而犀利，通常是配合一些框架來完成一些靜態頁面開發的工作。

因為jQuery的諸多局限性導致前端工程師的發展受到了很多的限制，只能做一些表面性的工作，並不能實現前後端分離開發。

而近期出現的Vue，它給前端帶來了無限的可能和改變。

改變一：真正意義上的前端工程師

之前開發都是前端做靜態頁面，把頁面給到後台程式設計師改成jsp、php、asp等等…一頓亂改，一頓塞變數，做完以後頁面樣式亂七八糟，最後你再調整css。說白了你會html，css就行了，基本沒什麼門檻，可以這麼說。

有了Vue和Node的前端工程化以後，前端工程師能做的事情越來越多，後台人員只需要拋過來一個Api，剩下的就可以都交給前端了。

改變二：服務端渲染VS客戶端渲染

傳統的jsp、php或是模板渲染也好，都是服務端渲染，就是客戶端一個請求，伺服器直接把整個頁面返回給你，簡單粗暴。（Spring Boot是通過模板引擎，由服務端完成的渲染工作）

但是vue開發是前後端分離開發，通過api進行交互，客戶端請求伺服器返回json數據，由客戶端進行渲染。

不僅減輕了伺服器的壓力速度更快而且渲染更加優雅，程式碼更容易維護。

改變三：渲染優雅，程式碼易維護

jQuery是通過DOM來控制數據，不僅笨重而且渲染數據特別麻煩，而 Vue是通過數據來控制狀態，通過控制數據來控制渲染，變數可以直接寫在標籤中，渲染更加優雅。

因為前端程式碼和後台程式碼都是分開的，所以項目更容易維護，開發效率更高。

改變四：項目工程化，結合npm直接安裝第三方庫

Vue讓前端項目更加工程化，同時也規範了前端工程師的程式碼，而node和npm的加入才是vue能蓬勃發展的重要原因。

Node為Vue提供了本地server和模組化開發的思路，npm更能安裝Vue項目需要的模組，配合Vue使用，比如Moment.js Element ui vuex等等，這些第三方庫讓Vue有了無限的可能。

敲黑板（補充下）：傳統開發jQuery是命令式編程，現代框架開發是函數式編程。現代框架開發，可以使用Webpack（當然使用jQuery也可以使用Webpack），可以使用人家提供的現成的腳手架，比方說create-react-app，vue-cli。極大提高了開發的效率，並且可以使用最新的ES6、ES7語法進行開發，在編碼體驗上，就提高了一個檔次。

總結

知其然，知其所以然，沒有最好的框架，只有最合適的框架！