angular是找大而面的道路,因此體積非常龐大,1.6-1.7萬行;avalon旨在提供一種遠離DOM操作的前端開發體驗,0.6.3只有2420行,min只有29kb。 avalon從angular抄來了不少好東西,如{{}}插值表達式,ms-model(通過事件實現雙向同步),ms-controller(為了VierModel指定作用域范圍),但都做了增強,{{aaa|html}添加html過濾器就能輸出innerHTML,ms-duplex可以通過data-observe來開關雙向同步,ms-controller擁有孿生兄弟ms-important。
avalon的$watch與ms-bind方法提供比angular強大得多回調功能。
avalon擁有像knockout, emberjs那樣的計算屬性, angular沒有。
avalon與angular都擁有監控數組,但avalon的監控數組像knockout那樣擁有大量好用的方法,能自動同步頁面,angular的則相當弱。
avalon與angular都擁有定義UI的功能(將一個元素變成一個UI組件),angular是使用自定義標簽,avalon是使用ms-ui屬性,但自定義標簽在舊式IE並不好使,並且可能隨着瀏覽器的升級,瀏覽器會添加一個與你一模一樣的新標簽。avalon則安全多了,並且擁有12UI組件可做參考,實現起來非常簡單。
avalon是采取邊掃描邊轉換綁定的策略,用戶打開頁面后立即能看到效果,angular是要全部掃描后才轉換綁定,因此用戶可能看到一些奇異的模板。
avalon是通過define方法來定義ViewModel,並有scan方法指定作用的元素與ViewModel。angular要求用戶將xxxxCtrl函數暴露到全局作用域下,框架自己去取去組裝。
avalon在ViewModel有個$model,就是ViewModel對應的純數據的Model(ViewModel每次被操作,都會自動同步View與Model的),我們可以直接將它放到AJAX中使用。angular沒有獨立的Model,需要自己轉換。
avalon是使用Object.defineProperty與VBS實現ViewModel,angular則是將整個xxxxCtrl函數進行編譯,轉換一大堆getter, setter從而實現雙向綁定,因此angular的體積是相當龐大的。
avalon的綁定值可是ViewModel的屬性或數組或表達式, angular則允許用戶在視圖定義新變量,新對象,這是個不好的特征,會讓頁面非常難維護。
avalon的綁定已經強大到讓用戶完全脫離DOM寫業務,頂多是取一下表單元素的checked, disabled等狀態值,angular還是傳統的思路,只是在1.0后添加數據綁定機制。