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
avalon的前綴是ms,意即mass, 彌撒,紀念我以前的框架mass Framework。後端