avalon 相似於angular

avalon是一個簡單易用迷你的MVVM框架,它最先發佈於2012.09.15,爲解決同一業務邏輯存在各類視圖呈現而開發出來的。 事實上,這問題其實也能夠簡單地利用通常的前端模板加jQuery 事件委託 搞定,但隨着業務的膨脹, 代碼就充滿了各類選擇器與事件回調,難以維護。所以完全的將業務與邏輯分離,就只能求助於架構。 最初想到的是MVC,嘗試過backbone,但代碼不降反升,很偶爾的機會,碰上微軟的WPF, 優雅的MVVM架構立馬吸引住我,我以爲這就是我一直尋找的解決之道。html

avalon將全部前端代碼完全分紅兩部分,視圖的處理經過綁定實現(angular有個更炫酷的名詞叫指令), 業務邏輯則集中在一個個叫VM的對象中處理。咱們只要操做VM的數據,它就天然而然地神奇地同步到視圖。 顯然全部神祕都有其內幕,C#是經過一種叫訪問器屬性的語句實現,那麼JS也有對應的東西。 感謝上帝,IE8最先引入這東西(Object.defineProperty),惋惜有BUG,但帶動了其餘瀏覽器實現它,IE9+便能安全使用它。 對於老式IE,我找了很久,實在沒有辦法,使用VBScript實現了。前端

Object.defineProperty或VBS的做用是將對象的某一個屬性,轉換一個setter與getter, 咱們只要劫持這兩個方法,經過Pub/Sub模式就能偷偷操做視圖。爲了記念WPF的指引,我將此項目以WPF最初的開發代號avalon來命名。 它真的能讓前端人員脫離DOM的苦海,來到數據的樂園中!git

優點

絕對的優點就是下降了耦合, 讓開發者從複雜的各類事件中掙脫出來。 舉一個簡單地例子, 同一個狀態可能跟若干個事件的發生順序與發生時的附加參數都有關係, 不用 MVC (包括 MVVM) 的狀況下, 邏輯可能很是複雜並且脆弱。 而且一般須要在不一樣的地方維護相關度很是高的一些邏輯, 稍有疏忽就會釀成 bug 不能自拔。使用這類框架能從根本上下降應用開發的邏輯難度, 而且讓應用更穩健。github

除此以外, 也免去了一些重複的體力勞動, 一個 {{value}} 就代替了一行 $(selector).text(value)。 一些個經常使用的 directive 也能快速實現一些本來可能須要較多代碼才能實現的功能chrome

  • 使用簡單,做者是吃透了knockout, angular,rivets API設計出來,沒有太多複雜的概念, 指令數量控制得當,基本能覆蓋全部jQuery操做, 確保中小型公司的菜鳥前端與剛轉行過來的後端也能迅速上手。
  • 兼容性很是好, 支持IE6+,firefox3.5+, opera11+, safari5+, chrome4, 最近也將國產的山寨瀏覽器(360, QQ, 搜狗,獵豹, 邀遊等)加入兼容列隊 (相比其餘MVVM框架,KnockoutJS(IE6), AngularJS1.3(IE9), EmberJS(IE8), WinJS(IE9))
  • 向前兼容很是好,不會出現angular那種跳崖式升級
  • 注重性能,因爲avalon一直在那些上千的大表格里打滾,經歷長期的優化, 它能支撐14000以上綁定(相對而言,angular一個頁面只能放2000個綁定)。另,在IE10等能良好支持HTML5的瀏覽器, 還提供了avalon.modern.js這個高性能的版本。
  • 沒有任何依賴,不到5000行,壓縮後不到50KB
  • 完善的單元測試,因爲測試代碼很是龐大,放在獨立的倉庫中—— avalon.test
  • 擁有一個包含2個Grid,1個樹,1 個驗證插件等總數近50個UI組件庫 OniUI, 由去哪兒網前端架構組在全力開發與維護
  • 存在一個活躍的小社區,因爲國內已有很多公司在用,咱們都集中一個QQ羣裏互相交流幫助 QQ:228372837,79641290(註明來學avalon)
  • 支持管道符風格的過濾函數,方便格式化輸出
  • 讓DOM操做的代碼近乎絕跡,所以實現一個功能,大體把比jQuery所寫的還要少50%
  • 使用相似CSS的重疊覆蓋機制,讓各個ViewModel分區交替地渲染頁面
  • 節點移除時,智能卸載對應的視圖刷新函數,節約內存
  • 操做數據即操做DOM,對ViewModel的操做都會同步到View與Model去
  • 自帶AMD模塊加載器,免得與其餘加載器進行整合

avalon的前綴是ms,意即mass, 彌撒,紀念我以前的框架mass Framework。後端

相關文章
相關標籤/搜索