avalon2學習教程15指令總結

avalon的指令在上一節已經全部介紹完畢，當然有的語焉不詳，如ms-js。本節主要總結我對這方面的思考與探索。

MVVM的成功很大一語分是來自于其指令，或叫綁定。讓操作視圖的功能交由形形式式的指令來代勞。VM，成了一個大管家。它只一個反射體。我們對它的操作，直接影響到視圖。因此俗稱“操作數據即操作視圖”！至于它是怎么影響視圖，avalon視其版本的不同，也有不同的解法。如果拋開avalon，縱觀世上所有MVVM框架，大抵有如下幾種方式

1. 函數wrapper:將原數據對象重新改造，所有屬性都變成一個函數，有參數時就是賦值，進行視圖同步與回調派發，沒有參數時就取值，進行依賴收集。如knockout.js。
2. 上帝getter,setter: 將原數據對象重新包裝，但對數據的操作必須經過統一的set,get方法。在set方法進行視圖同步與回調派發，沒有參數時進行依賴收集。如reactive.js。如果放松要求，react也是這種方式，它使用setState進行視圖同步。但它們依賴收集的過程。
3. 函數編譯及臟檢測：將VM放到一個函數體內，取toString重新編譯，內部是第一種方式。如angular.
4. Object.defineProperty屬性劫持：前三種的用戶體驗非常糟，于是有了這種方式，最初我是從emberjs中學來的。avalon,vue及其他后來的MVVM框架都是使用這種方式。在賦值時執行內部的setter方法，進行視圖同步與回調派發，在取值時執行內部的getter方法，進行依賴收集。
5. Object.observe對象監控： 這個API很短命，因此沒幾個MVVM框架用上它。由于無法進行依賴收集，需要別辟蹊徑！
6. Proxy對象監控：Object.observe對用戶的行為監控是很弱的，并且是異步的，不夠友好。于是有了這個新寵物。但這其實也不算新寵，firefox4就存在了。它能對數據賦值，取值，遍歷，刪除等各種行為都能監控到，了解Object.defineProperty 不能監控新屬性的難題。在avalon2 中，就有一分支使用它實現。avalon2一共使用了VBScript, Object.defineProperty, Proxy實現vm。并且它沒有進行依賴數據，而是將整個視圖編譯成一個大函數，每次數據變動，都重新執行這個函數，產生虛擬DOM，前后虛擬DOM進行diff，最后全量更新。這思路從react.js學來的。

上面說了，既然使用編譯整個視圖成模板函數這一手段，我們就盡量讓這函數輕量化。位于這視圖上的所有指設也要簡化，方便在對應位置上代入VM中的屬性。在avalon1及其他MVVM框架，都是使用動態依賴收集方式來推斷指令中的某個單詞是否為vm中的某個屬性，這性能耗損比較嚴重。在avalon2直接讓用戶在屬性名前加上 @ 符號，人工優化這步驟了。此外，指令屬性值的設計原則也很明確，就是方便轉換一個函數，返回對象或對象數組（如ms-attr,ms-css,ms-widget,ms-effect,ms-class,ms-hover,ms-active,ms-for）,少量的返回布爾或字符串等直接可用于JS 語句的字面量。除了ms-for與過濾器，沒有其他特殊語法。

除了ms-duplex,ms-on，原則上不再出來ms-xxx-yyy這樣的指令。ms-后面只跟一個單詞就夠了，不用再加-及其他單詞。

各種指令的優先級如下：
ms-for, ms-widget, ms-effect, ms-if…………其他指令（按指令名的charCodeAt排序）…………ms-duplex!

ms-duplex是最后，因此再不用擔心它與其他指令沖突的問題。

指令的更新時機有兩個，一個是位于此標簽之間的所有孩子執行之前，一個是位于此標簽之間的所有孩子執行之后。亦即change, afterChagne列隊。有興趣的話，可以閱覽這里的源碼。

想自定義指令，可以使用avalon.directive方法，第一個為指令名，第二個是定義體，里面至少有parse, diff, update三個方法。自己參看css指令，編寫指令吧。

//css指令var update = require('./_update')avalon.directive('css', {parse: function(cur, pre, binding) {cur[binding.name] = avalon.parseExpr(binding)},diff: function (copy, src, name) {var a = copy[name]var p = src[name]if (Object(a) === a) {a = a.$model || a//安全的遍歷VBscriptif (Array.isArray(a)) {//轉換成對象a = avalon.mix.apply({}, a)}if (typeof p !== 'object') {//如果一開始為空src.changeStyle = src[name] = a} else {var patch = {}var hasChange = falsefor (var i in a) {//diff差異點if (a[i] !== p[i]) {hasChange = truepatch[i] = a[i]}}if (hasChange) {src[name] = asrc.changeStyle = patch}}if (src.changeStyle) {update(src, this.update)}}delete copy[name]//釋放內存},update: function (dom, vdom) {var change = vdom.changeStylevar wrap = avalon(dom)for (var name in change) {wrap.css(name, change[name])}delete vdom.changeStyle}
})

里面的parse(cur, pre, binding)方法是用于創建虛擬DOM， cur是通過vm.$render方法生成的新虛擬節點，pre是之前的虛擬節點，binding是當前指令抽象生成的綁定對象。

里面的diff(copy, src, name)方法是用來比較前后兩個虛擬DOM。copy是新虛擬節點，src是之前的虛擬DOM，name為指令的名字。當你用各種方式比較出這兩個虛擬DOM有差異，那你就可以使用require('./_update')這個方法執行更新，更新方式為指令的update方法。

2.1.0后，刷新機制有點改動，兩個節點比較出差異后立即更新真實DOM， 不像過去那樣全部比較再全量更新。

里面的update(dom,vnode,parent)方法是用來更新真實元素的。

最后你可以在avalon.directives對象中指到所有指令的定義。你也可以在vm.$element.vtree中看到你生成的虛擬DOM樹。

既然avalon的指令已經全部介紹完了，因此大家現在可以直接使用avalon2了！