迷你MVVM框架 avalonjs 學習教程1九、avalon歷史回顧

avalon最先發佈於2012.09.15,當時還只是mass Framework的一個模塊,當時爲了解決視圖與JS代碼的分耦，參考knockout開發出來。 它的依賴收集機制，視圖掃描，綁定的命名data-*都與knockout差很少。它總共900行。

當時的理論體如今我在註釋的這一段話：

JS UI Component 最終仍是經過 HTML 來描述界面，當 js object 的數據發生變化或者執行某個動做時， 須要通知到對應的html，使其發生相應變化。因而js object 須要獲得他在頁面上對應的html的句柄， 一般作法，是在建立html的時候將createElement返回的句柄保存在js object 內部的某個變量中，或者賦值給html eLement一個惟一的ID，js object 根據這個ID來找到對應的HTML Element。一樣， 當htm elementl的事件（例如onclick）要通知到相對應的 js object 或者回調js object的某個方法或屬性時，也須要獲得該js object的一個引用。個人意思是創建一種統一的規則，js object和他相對應的 html 能經過這種規則互相訪問到對方。 創建這個關聯之後，實現js object和 對應 html 的數據邦定和數據同步等問題就簡單多了。

此後幾個月還繼續開發mass Framework的其餘模塊，尚未徹底壓注於MVVM。

2012.12.11發佈0.2版，已經對knockout大多數源碼進行消化，所以代碼量降到730行。但功能仍是殘缺，不能綁定事件。

avalon也創建對應的概念來指導本身的發展：

位於VM中的原子監控者，依賴監控者，監控數組與綁定監控者。原子監控者對應ko的監控屬性，它是由M中字段抽象而成，是一個函數。依賴監控者對應ko的依賴監控屬性。在VM中，有些字段是創建在M的兩個或多個字段的基礎上。好比fullName 對應爲 firstName+」 」+lastName，但在M中是找不到它的跟影，但它在視圖中卻又是一個獨立的個體，有專門的文本域給它。綁定監控者是我首創的，它是根據視圖中的數據綁定轉化而爲，在ko中這些依然稱之爲依賴監控屬性。但這一類監控函數分明是真正用於連結DOM樹與VM的。它經過框架提供的默認綁定器將本身中數據渲染到DOM中。它的結構比通常的依賴監控屬性複雜多了。

依賴監控屬性，knouckoutjs稱之爲Dependent Observables，在另外一個著名的emberjs框架中，它叫作computed。在綁定監控者這類東西顯然不須要返回值，它通常將比它低一級的原子監控者，依賴監控者看成事件回調來監控用戶行爲就好了。當用戶改變了文本域的值，就至關於對這個原子監控者進行寫入，從而引起整條依賴的更新。綁定監控者是與DOM樹某個節點或某一些節點交道，當底層涌上來的變更要求它也刷新時，它就調用框架自帶的綁定器進行幹活。所以你看到綁定器都有一個叫update的函數，就是幹這事。

位於視圖中的聲明式綁定，我使用bind，但也能夠配置你喜歡的屬性名。我我的喜歡稱之爲數據綁定，其實它還兼容流程控制，事件綁定的活兒。

位於視圖中的動態模板，就是那些被聲明式綁定圈起來的區域。動態模板與流程綁定最密切，它的實現好壞，牽及到最小化刷新的實現與內存的佔有率。這個v2有實現比knouckout要高明多了

avalon在數據綁定上作了許多友好的改進，雖然與knouckoutjs同樣支持表達式，是沒有花括號的JSON。但它要求用戶不用寫雙引號，這辛苦活由框架去實現了。

avalon的自帶綁定器有text綁定,html綁定,value綁定,class綁定,style綁定,attr綁定,display綁定,checked綁定,with綁定,if綁定,unless綁定,foreach綁定

兩天後發佈0.3版，這是avalon第一次脫胎換骨，再也不使用knockout將監控屬性轉換爲函數的wrapper方式，改爲Object.defineProperty構建它的雙向綁定鏈,而且參考rivetsjs對綁定屬性從新設計，不過綁定屬性的前綴仍是使用data-*

avalon在用戶體驗上第一次走上世界前列。不過當時avalon還不叫avalon，但我仍是很滿意，以後幾個星期我寫一個系列的教程（還有著名的todos例子）來介紹它。這期間還抽空看了bootstrap源碼，也寫了一個系列的相關博文，被網友們視爲bs高手了。但mass Framework的升級工做還在進行，這佔了我大量的時間。把本身作的事所有記錄在博客就有這個好處，完成掌握本身的成長線路。我也不明白本身爲何如此糾結了mass Framework，它在各方面已經沒有翻身的可能了。人付出越多，就不易放棄吧。這是賭徒心態。個人確在這上面耗了太多時間與精力，幸虧它與avalon在許多技術之上有傳承之處。像那些一下子跳到JS，一下子跳到java，一下子跳到oc，這是多麼慘的自殺行爲啊。

2013.3.15起，我發表一篇叫《第一個vbscript程序》 的博文，開始着手解決avalon在舊式IE的兼容問題，切入點就是VBScript的set, get, let語句。

• VBScript循環語句
• VBScript的Me關鍵字
• VBScript構造函數與Default關鍵字
• 斷定VBscript方法是否存在
• VBScript的字符串方法
• Eval、Execute、ExecuteGlobal

2013.04.25發佈0.4，這是它第2次脫胎換骨，徹底從mass Framework中獨立出來，綁定屬性改成咱們熟悉的ms，而且擁有avalon.define、avalon.scan這兩個方法。VBScript技術已經學以至用，Object.defineProperty終於在舊式IE實現兼容，這是其餘MVVM不可想象的。

2013.05.1發佈0.5，VM中添加 $id, $events, $watch, $unwatch, $skipArray, $xxx等屬性與方法,能夠說avalon的VM設計在這一版上定稿， 視圖上添加ms-controller，ms-important, ms-skip等綁定，而且在內部整合一個迷你的jQuery對象，加強其DOM處理能力。

2013.05.07開始，編程重心轉向avalon， 進入了小版本發佈時代，0.6x起添加mouseleave, mouseenter的跨瀏覽器支持；添加ms-css綁定，添加addClass, removeClass, toggleClass方法； 並着手開發它的UI庫，當時它的類名與結構都是用jquery UI搬過來的。那個時候攢到第一批國內用戶了。

2013.05.25發佈0.7，添加ms-template綁定（也就是往後的ms-incluce綁定） ms-attr綁定及全新的掃描機制。avalon與knockout在實現上愈來愈遠，而且對其大東家mass Framework也在 0.7.2中正式分道揚鑣。從博客園評論的分享來看， avalon的使用用戶達到幾十人了。0.7.3中去掉從knockout抄過來的ms-options綁定，VM裏廢棄$scope, $json, 重命名爲更直觀的$vmodel與$model。avalon源碼也在這個版本里走無分號的風格。

2013.06.22發佈0.8，因爲換了新公司，接觸到angular，嘗試整合angular與requirejs，深深感到自帶加載器的用處，因而將我發展了20多個版本號的並行加載器放進avalon裏了。此外，avalon.mobile.js也要這個版本出現。0.81處理管道符與||運算符相混淆的BUG。 0.82裏實現新parser。0.83能夠配置插值表達式的界定符，ms-template更名爲ms-include。 0.84規定ms-incude的值不能爲空。 0.85改進ms-each。 以上就是0.8x上的一些重大改進，固然期間還確定修改N多BUG，但這裏介紹的都是對後面版本有重大影響的改進。 因爲第一次有公司由我親手操控來使用avalon，所以avalon在此期間的升級是至關頻繁的。

2013.07.20發佈0.9，引進ms-with。0.91fix BUG。 0.92添加ms-class的新風格支持。 0.93添加ms-duplex-radio綁定。 0.94引入綁定屬性間的優先級，規則哪個比哪一個先執行。 0.95改進ms-with 深層綁定的實現。 0.96性能優化與 fix BUG。 以上就是0.8x上的一些重大改進，固然期間還確定修改N多BUG，但這裏介紹的都是對後面版本有重大影響的改進。 0.97性 王之三柱臣所有就位!

• mmRouter: https://github.com/RubyLouvre/mmRouter
• mmAnimate: https://github.com/RubyLouvre/mmAnimate
• mmRequest: https://github.com/RubyLouvre/mmRequest

0.98修正大量BUG，添加ms-widget綁定，廢棄ms-ui綁定。一些avalon用戶作的東西能夠放出來讓你們了。 0.99爲正式發佈作衝刺，也修了大量BUG，移棄ms-bind綁定。 貫徹在0.9x中的夢魘是 ms-each、ms-with與ms-if這三個版本的升級與優化。ms-if的實現甚至在期間出現回滾。

2013.01.13發佈1.0，這是一個重要的版本，所以在當時的博文也大肆宣揚一番 （GITHUB上的貢獻人數達到8人，issues二百多個主題，各類組件也不斷完善）。但它很短命，就像中華民國的臨時大總統那樣，只是一個標識—— 它過早地引進了一些不肯定的實現方案。

2014.01.26發佈1.1，直接沒有1.0.x了。 許多東西都回到0.9x，並將期間發現的新解決方案加進去。它也有一些全新的東西， 如ms-if-loop綁定，data-with-sorted回調，data-duplex-changed回調。如今你們用到的API，基本上在這個版本上穩定下來。加之，用戶量的龐大， 也讓我不敢輕易改它的API。

2014.02.19發佈1.2，直接沒有1.1.x了。精力是優化，優化，優化！ 如input.value被框架重寫了，方便與第三方組件共存。循環綁定內部漸漸改進大家如今看到的模樣。尤爲在 1.2.4裏， 各類代理VM已經使用池技術進行建立與回收（createWithProxy， createEachProxy）； 1.2.5升級ms-widget； 1.2.6除了修BUG外，開始開發新一代UI庫Oni。

總結這幾個版本，0.8x, 0.9x都比較長命，那是我有工做有空閒開發avalon。1.0、1.一、1.2x比較短命， 所以我丟了飯碗，固然1.2x期間我又很快找到工做。

2014.05.26發佈1.3，這預計也是個長命的版本，主要是性能改進與BUG fix。 全職開發框架的感受真好。但公司要兼容IE6，各類奇葩的BUG層出不窮，從各類業務線彙總在我這裏，所以avalon.mobile的升級其實一直拖滯。 這期間，我開發了avalon.observe.js，發掘了全新的靜態收集依賴的技術，這原本是要應用於1.4x裏的，但如今也沒這時間了。三柱臣的升級也逼在眉睫。 avalon如今已經有20個貢獻者了，但相對於外國的項目來講，這個數目也是微乎其微，但願能有更多人加入這個國產項目。我能夠打票說， avalon是世界最好的MVVM框架，設計優良精巧，3000行的代碼能實現其餘MVVM框架用1W多行才能實現的效果。尤爲是avalon對IE6上的兼容， 及已經對Object.observe的實戰上，這也是其餘MVVM框架所難企及的。