首頁 web前端 js教程 vue,angular,avalon這三種MVVM框架優缺點_其它

vue,angular,avalon這三種MVVM框架優缺點_其它

May 16, 2016 pm 03:03 PM
angular vue

本文的主要內容是參考官方文件說明總結而來:

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出來後又需要從頭開始,不過又說回來, /article/79637.htm這篇文章很好說明了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模組載入器,省得與其他加載器進行整合。

缺點

1,對陣列的過濾沒有angular那麼方面,avalon的過濾器只能用於ms-text, ms-html

2,沒有英文文檔,宣傳受到限制

3,OniUI的皮膚不夠好看,許多人說要配合boostrap,但社區還沒有人主動站出來做這事

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

vue中怎麼用bootstrap vue中怎麼用bootstrap Apr 07, 2025 pm 11:33 PM

在 Vue.js 中使用 Bootstrap 分為五個步驟:安裝 Bootstrap。在 main.js 中導入 Bootstrap。直接在模板中使用 Bootstrap 組件。可選:自定義樣式。可選:使用插件。

vue怎麼給按鈕添加函數 vue怎麼給按鈕添加函數 Apr 08, 2025 am 08:51 AM

可以通過以下步驟為 Vue 按鈕添加函數:將 HTML 模板中的按鈕綁定到一個方法。在 Vue 實例中定義該方法並編寫函數邏輯。

vue.js怎麼引用js文件 vue.js怎麼引用js文件 Apr 07, 2025 pm 11:27 PM

在 Vue.js 中引用 JS 文件的方法有三種:直接使用 <script> 標籤指定路徑;利用 mounted() 生命週期鉤子動態導入;通過 Vuex 狀態管理庫進行導入。

vue中的watch怎麼用 vue中的watch怎麼用 Apr 07, 2025 pm 11:36 PM

Vue.js 中的 watch 選項允許開發者監聽特定數據的變化。當數據發生變化時,watch 會觸發一個回調函數,用於執行更新視圖或其他任務。其配置選項包括 immediate,用於指定是否立即執行回調,以及 deep,用於指定是否遞歸監聽對像或數組的更改。

vue多頁面開發是啥意思 vue多頁面開發是啥意思 Apr 07, 2025 pm 11:57 PM

Vue 多頁面開發是一種使用 Vue.js 框架構建應用程序的方法,其中應用程序被劃分為獨立的頁面:代碼維護性:將應用程序拆分為多個頁面可以使代碼更易於管理和維護。模塊化:每個頁面都可以作為獨立的模塊,便於重用和替換。路由簡單:頁面之間的導航可以通過簡單的路由配置來管理。 SEO 優化:每個頁面都有自己的 URL,這有助於搜索引擎優化。

vue返回上一頁的方法 vue返回上一頁的方法 Apr 07, 2025 pm 11:30 PM

Vue.js 返回上一頁有四種方法:$router.go(-1)$router.back()使用 <router-link to="/"> 組件window.history.back(),方法選擇取決於場景。

vue遍歷怎麼用 vue遍歷怎麼用 Apr 07, 2025 pm 11:48 PM

Vue.js 遍歷數組和對像有三種常見方法:v-for 指令用於遍歷每個元素並渲染模板;v-bind 指令可與 v-for 一起使用,為每個元素動態設置屬性值;.map 方法可將數組元素轉換為新數組。

vue怎麼a標籤跳轉 vue怎麼a標籤跳轉 Apr 08, 2025 am 09:24 AM

實現 Vue 中 a 標籤跳轉的方法包括:HTML 模板中使用 a 標籤指定 href 屬性。使用 Vue 路由的 router-link 組件。使用 JavaScript 的 this.$router.push() 方法。可通過 query 參數傳遞參數,並在 router 選項中配置路由以進行動態跳轉。

See all articles