移動端開發框架哪個好？jQuery/Vue/AngularJS有哪些區別和優缺點？
阿新 • • 發佈：2019-02-13
JS框架，我認為大體上可以分為兩種。一種是類似jQuery/ d3那樣的，通過修改html的DOM結構來渲染UI的庫。
還有一種則是類似於AngularJS/ReactJS 那樣的，採用MVC分層的，通過Model來渲染View UI框架。
效能比較
jQuery基本都是瀏覽器原生操作，實計上h5的很多api都借鑑了jQuery，比如說在相容IE6~IE7的蠻荒時代，HTML是沒有按元素類選擇器查詢元素這類介面的，只有 document.getElementById 這一個常用的按ID取元素方法。var wrapper = document.getElementById('wrapper')
jQuery 實現了一系列的按類/ID/元素名查詢元素的引擎。
//按ID名
var $wrapper = $('#wrapper')
//按類名
var $wrapper = $('.article-title')不過隨著瀏覽器的發展，瀏覽器本身也已經支援類選擇器了：
//查詢單個元素
var wrapper = document.querySelector('#wrapper')
//查詢多個元素
var articleTitles = document.querySelectorAll('.article-title')所以後來的jQuery版本就開始直接使用這些介面，所以基本上元素選擇和更新都是使用瀏覽器原生的介面，這些操作幾乎都沒有效能損耗。所以說jQuery 操作DOM的效能還是比較好的。
開發效率比較
jQuery更新HTML雖然效能比較好，但是效率比較低，而且也不太符合目前瀏覽器的分層的前後端分離實踐。因此出來後來的Backbone/ Angular 這樣將JSON Data資料渲染成Html View的MVC/MVVM框架。極大地提高了開發效率。注意這裡也有些區別，jQuery類似於庫，而Angular類似於框架，這也意味著使用Angular要嚴格按照框架規定來寫。但Vue雖然也是MVC渲染，但更像一個庫，所以明顯要比Angular上手要容易，比如說下面的這個，直接繫結即可：
<div id="app">
{{ message }}
</div>
|
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
}) |
總結：jQuery從後臺返回的資料要渲染到前端上需要通過手動更新DOM，但是手動改DOM一般比MVC渲染的效能好。但開發效率和程式碼規範不如NG/ReactJS。
目前總體來說基於jQuery的前端元件庫最多，而Angular/React的還比較少。
下面列舉幾個比較知名的前端UI庫:
Bootstrap
這個基本上就不用說明了，一個前端CSS框架，基於jQuery，但是很多複雜的控制元件沒有，像 datagrid/ dialog/ tree/ charts之類的，不過基於bootstrap的元件庫也比較多，可以自己去找找。
Foundation
Semantic UI
Kendo UI
kendoui.com 傳統的各種datagrid/charts/dialog庫，分開源和商業兩種版本，使用比較複雜的控制元件要購買商業版。
Materialize
jQuery Mobile
Sencha Touch
以前叫Ext，注意它不是基於jQuery的，是基於另外一種元素選擇器構建起來的前端元件庫。
另外還有一些 Amazeui/ jQuery EasyUI/ materialize/ weex 之類的，有興趣也可以研究一下。
原文連結 http://ourjs.com/detail/5a33cebd3506837194998bb0