當前位置:商標查詢大全網 - 網遊競技 - vue,angular,avalon這三種MVVM框架之間有什麽優缺點

vue,angular,avalon這三種MVVM框架之間有什麽優缺點

作者:Tw93

來源:知乎

著作權歸作者所有,轉載請聯系作者獲得授權。

Vue.js

Vue.js @尤雨溪 老師寫的壹個用於創建 web 交互界面的庫,是壹個精簡的 MVVM。從技術角度講,Vue.js 專註於 MVVM 模型的 ViewModel 層。它通過雙向數據綁定把 View 層和 Model 層連接了起來。實際的 DOM 封裝和輸出格式都被抽象為了Directives 和 Filters。Vue.js和其他庫相比是壹個小而美的庫,作者的主要目的是通過壹個盡量簡單的 API 產生可反映的數據綁定和可組合的視圖組件,感覺作者的思路非常清晰。

優點:

簡單:官方文檔很清晰,比 Angular 簡單易學。

快速:異步批處理方式更新 DOM。

組合:用解耦的、可復用的組件組合妳的應用程序。

緊湊:~18kb min+gzip,且無依賴。

強大:表達式 & 無需聲明依賴的可推導屬性 (computed properties)。

對模塊友好:可以通過 NPM、Bower 或 Duo 安裝,不強迫妳所有的代碼都遵循 Angular 的各種規定,使用場景更加靈活。

缺點:

新生兒:Vue.js是壹個新的項目,2014年3月20日發布的0.10.0 Release Candidate版本,目前github上面最新的是0.11.4版本,沒有angular那麽成熟。

影響度不是很大:google了壹下,有關於Vue.js多樣性或者說豐富性少於其他壹些有名的庫。

不支持IE8:哈哈不過AngularJS 1.3也拋棄了對IE8的支持,但是 @司徒正美 老師的avalon是支持IE6+的,應該下了很多努力去優化。這壹點對於那些需要支持IE8的項目就不好了,不過這也是web前端開發的壹個趨勢,像IE低版本就應該退出歷史舞臺了,通過改變我們的前端思維,而不是順應那些使用老版本而不去升級的人。 @玉伯老師就說過壹句話,我覺得說的非常好“這年頭,支持 IE6、7 早就不再是特性,而是恥辱。努力推動支付寶全面不支持 IE6、7,期待更多兄弟加盟”。

AngularJS

AngularJS最近很火,追隨者也很多。 Superheroic JavaScript MVW Framework

官方說得很樸素:“完全使用JavaScript編寫的客戶端技術。同其他歷史悠久的Web技術(HTML、CSS和JavaScript)配合使用,使Web應用開發比以往更簡單、更快捷“。當妳學習它的時候,我相信妳會被它的很多新特效所吸引。

優點:

動態視圖:以前從來沒有想過js可以如此擴展HTML的屬性,但是AngularJs做到了,它替我們靜態的HTML加了很多擴展性功能,有壹種讓HTML由死變活的感覺。

完善:是壹個比較完善的前端MVW框架,包含模板,數據雙向綁定,路由,模塊化,服務,依賴註入等所有功能,模板功能強大豐富,並且是聲明式的,自帶了豐富的 Angular 指令。

Google維護:AngularJS有Google來維護,無疑有了壹個強大的後臺,對於推廣和維護明顯比Vue.js和avalon有優勢,社區也非常活潑,能夠很好促進它的發展。

AngularJS & Ionic:Ionic: Advanced HTML5 Hybrid Mobile App Framework,這倆就是壹個好基友,Ionic通過用AngularJS為了創建壹個框架,最適合開發的豐富和強大的應用程序。上次於知乎答了壹個相關問題做webapp開發,性能和效率最好的框架和打包app平臺分別是哪個? - 湯威的回答,詳細可以見這裏。

缺點:

大而全:學習起來有難度,對於我來講學習曲線很曲折,比較難理解壹些。

推翻重寫:前段時候逛社區發現AngularJS2.0會把之前的推翻重寫,兩個框架的改變很大,基本是兩個框架了,等於是說等到2.0出來後又需要從頭開始,不過又說回來, @徐飛老師的[翻譯]有關Angular 2.0的壹切 · Issue #8 · xufei/blog · GitHub這篇文章很好說明了AngularJS2.0的變化。

不支持IE8以下,貌似2.0變得只支持移動端了,等到出來後再看吧。

Avalon.js

Avalon.js是 @司徒正美 老師所寫的個簡單易用迷妳的MVVM框架,它最早發布於2012.09.15,為解決同壹業務邏輯存在各種視圖呈現而開發出來的。常常可以看到老師推廣他的Avalon.js,出了很多教程,無疑對國內學習Avalon.js的人提供了巨大方便。

優點

使用簡單,在HTML中添加綁定,在JS中用avalon.define定義ViewModel,再調用avalon.scan方法,它就能動了!

兼容到 IE6 (其他MVVM框架,KnockoutJS(IE6), AngularJS(IE9), EmberJS(IE8), WinJS(IE9) ),另有avalon.mobile,它可以更高效地運行於IE10等新版本瀏覽器中

沒有任何依賴,不到5000行,壓縮後不到50KiB

支持管道符風格的過濾函數,方便格式化輸出

局部刷新的顆粒度已細化到壹個文本節點,特性節點

要操作的節點,在第壹次掃描就與視圖刷新函數相綁定,並緩存起來,因此沒有選擇器出場的余地。

讓DOM操作的代碼近乎絕跡

使用類似CSS的重疊覆蓋機制,讓各個ViewModel分區交替地渲染頁面

節點移除時,智能卸載對應的視圖刷新函數,節約內存

操作數據即操作DOM,對ViewModel的操作都會同步到View與Model去

自帶AMD模塊加載器,省得與其他加載器進行整合。

缺點

缺點可以看這裏相比Angular,Avalon有什麽缺點呢? - 司徒正美的回答

終於答完了,還有壹些我沒有找到的還有錯誤的希望大家指出。