前端展望：取avalon，棄angular

打給比方，若是說angularJS是劍，那麼avalon就是匕首。匕首比劍更易學，更快，更適合快速做戰...

咱們仍是直接來實際的吧：

 

目前項目開發中有如下幾個通用需求：

• 有前端路由系統，用來劃分邏輯模塊。
• 有異步模塊載入，如requireJS或者seaJS。
• 數據與視圖自動綁定，而且性能出衆。
• 框架學習曲線不要太陡，而且讓個人代碼越少越好。

路由

AngularJS不能無縫與第三方路由整合，只能用它本身的模塊，如」ui-status「。緣由是AngularJS的數據模型是包裹在它的「controller」做用域裏面的。固然你能夠把這些數據模型拋到全局做用域裏，但即使如此，你對這些數據模型操做之後仍是要手動調用「scope.$digest()」才能影響到視圖。

avalon暫時須要藉助第三方路由模塊，能夠無縫整合。例如，一般路由模塊接受一個對象做爲參數，這個對象中的鍵名是路由的路徑，值是一個回調函數，當url符合這個路徑時就自動執行回調。在這個回調裏，咱們能夠直接操做avalon的數據模型，而且數據模型的改變會當即影響到視圖，如：

 

 

異步載入

AngularJS中自己沒有異步模塊加載系統，做者在公開場合對這個問題的回答是：「不認爲如今有多少前端應用真正大到異步加載，絕大部分時候經過壓縮、緩存就足夠了」。可是也有一些模塊來讓AngularJS支持異步加載或者與第三方異步模塊整合。具體能夠在github上搜「requireJS angularJS」。

avalon自帶AMD模塊加載器。

 

數據與視圖綁定及性能

Talk is cheap，咱們直接來看內部實現吧。

AngularJS的機制：AngularJS提供了一個機制讓你聲明頁面上的dom事件和對應的須要出發的數據模型的方法，例如你在一個元素上寫上一個「ng-click='changeMyName()'」的屬性，當你點擊它時，AngularJS就會自動執行「changeMyName」的方法。除了執行這個方法，AngularJS還會觸發一個叫作「$digest」的函數。這個函數會直接檢測「全部的數據模型」是否改動，有改動就去更新相應的視圖元素。你能夠去github上把AngularJS克隆下來，翻到「src/ng/」目錄下的「$digest」函數看看。我縮略掉了幾個細節的地方，一下讓你們先看全貌（注意註釋部分）：

 

avalon的機制：將數據模型中的屬性用get 和set 方法重寫。在set方法中去更新全部和當前數據模型有關的視圖元素，這就是爲何avalon一更新數據就能立刻反映到視圖上、而且性能更出衆的緣由。直接翻到avalon源碼的「modelFactory」函數，在這個函數中avalon收集和當前模型有關的視圖元素、其餘相關聯的數據，最後註冊到屬性中。其中更詳細的原理能夠直接參考做者 司徒正美 的github  https://github.com/RubyLouvre/avalon

 

學習曲線與代碼量

AngularJS的學習曲線明顯偏陡，其中的directive等概念雖然功能強大，但對新手來講要掌握的東西太多。avalon則相對平滑。avalon在人代碼形式上幾乎沒有任何要求，所以代碼量也比AngularJS更少。

 

除了以上幾個方面，在選擇的時候還有一些要考慮的狀況，例如：AngularJS有完整的測試、打包，代碼拆分得很是有調理。avalon由於自己簡單，且版本號還未到1，所以還有很多問題，其中包括部分代碼不能用。但總的來講，仍是推薦使用avalon，緣由很簡單：若是你可以很好的理解並AngularJS了，那你的水平足夠把avalon玩得更順手、更爲所欲爲了，像劍聖手中的匕首，已足以於千軍萬馬中取上將首級。