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//安全的遍历VBscript
            if (Array.isArray(a)) {//转换成对象
                a = avalon.mix.apply({}, a)
            }
            if (typeof p !== 'object') {//若是一开始为空
                src.changeStyle = src[name] = a
            } else {
                var patch = {}
                var hasChange = false
                for (var i in a) {//diff差别点
                    if (a[i] !== p[i]) {
                        hasChange = true
                        patch[i] = a[i]
                    }
                }
                if (hasChange) {
                    src[name] = a
                    src.changeStyle = patch
                }
            }
            if (src.changeStyle) {
                update(src, this.update)
            }
        }
        delete copy[name]//释放内存
    },
    update: function (dom, vdom) {
        var change = vdom.changeStyle
        var 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了！