2019-06-27（avalon 2 解读）

划重点：

1. vm,使用avalon.define方法生成,必须带$id属性
2. 指令,以ms-开头的属性及双花括号的插值表达式
3. 圈定作用域,使用ms-controller告诉框架,只处理这个范围内的标签
4. 引导符,使用@或##来告诉框架这些变量是来自vm的
5. avalon2.1.15后还可以使用:xxxx短指令.

虚拟DOM：

1. avalon会在DOMReady对.ms-controller节点进行outerHTML操作
2. 将这个字符串进行parser,转换为最早的虚拟DOM
3. 含有属性,dynamic用于节点对齐算法，skipAttrs与skipContent用于diff算法
4. 虚拟DOM树转换为一个$render方法
5. 执行$render方法,生成新的虚拟DOM与最早的虚拟DOM比较文件的差异diff,一边diff一边更新真实DOM

• **之后VM的属性发生变动，直接执行$render，diff，更新DOM

VM：view model

• vm是一种利用Proxy或 Object.defineProperties或VBScript创建的特殊对象。
• vm是一种重量型的对象
• 访问器属性get set
• vm里面以$带头的属性或放到$skipArray,转换为访问器属性
  如果vm中没有定义name，那么它就不会转换为访问器属性，修改name属性，就不会刷新视图
• 改变info,或者title监控属性的值还会触发对应的$watch监听回调

var vm = avalon.define({
    $id: "myId",
    info: "this is vm info",
    title:"this is tit"
})

chrome console vm Iproxy对象

私有属性：$id, $events, $watch, $fire, $model, ...等列出来的是比较稳定的

属性	作用
$id	vm的名字
$watch	添加监听函数
$fire	触发监听函数
$events	储存监听函数
$model	返回一个纯净的JS对象
$element	ms-controller, ms-important对应元素节点
$computed	定义计算属性

• VM中的数据更新，只能通过 = 赋值方式实现
• 添加新属性时，如果vm.placehoder里面没有定义aaa的属性，就不可以 vm.placehoder.aaa =1赋值添加，可以vm.placehoder = {aaa:1}这样

优化性能，对象结构扁平，套嵌层次不能太深，数组不能太长

计算属性：函数形式，对象形式

`函数形式的只读计算属性`

var vm = avalon.define({
        $id: "myId",
        firstName: '木',
        lastName: '土',
        $computed: {
            `//fullName依赖于firstName与lastName`
            fullName: function(){
                return this.firstName+' '+this.lastName
            },
        }
    })

----Html结构-----

<div class="ms-controller" ms-controller="myId">
    <h3>用户昵称：{{fullName}}</h3>
    <input type="text" id="inputName">
    <button ms-click='changeName'>改变昵称</button>
</div>

`对象形式的可读写计算属性`

var vm = avalon.define({
        $id: "myId",
        firstName: '木',
        lastName: '土',
        $computed: {
            fullName: {
                get: function(){
                    return this.firstName+' '+this.lastName
                },
                set: function(val){
                    var arr = val.split(' ')
                    this.firstName = arr[0]
                    this.lastName = arr[1]
                }
            }
        },
        changeName:function(){
            var inputValue = document.getElementById("inputName").value;
            vm.fullName = inputValue;
        }
    })

数组方法：pop shift unshift push splice sort revert新增remove removeAt removeAll clear及ensure pushArray set

方法	功能
pop()	从数组的 尾部 删除1个元素(删且只删除1个)，并返回 被删除的元素；空数组是继续删除，不报错，但返回undefined；
shift()	头部 删除
push()	向数组的 尾部 添加若干元素，并返回 新数组
unshift()	头部 添加
splice(i,n,data1,data2,...)	删除i下标位置n个元素，添加data1，data2...，返回新数组；只有i参数，下标开始全删除，只有i,n参数，不添加,可实现替换元素的操作
sort()	数组排序，默认首字母首数字 升序，传入函数function(a,b){return a-b;}升序；b-a降序;
reverse	颠倒数组中元素的顺序
remove(el)	传入的元素，通过全等于比较进行移除
removeAt(index)	传入下标数字，会移除对应位置的元素
removeAll(array)	传入空，全部清除；传入数组，清除数组相应元素
clear()	清空数组
ensure(el)	数组不存在el时，才添加el
pushArray(array)	传入数组，添加到当前数组的末端
set(index, el)	用于更新index位置中的el
toJSON()	用于取得数组的$model

$watch：

因官网提到了mixin,故学习了下mixin设计模式，掺合对象，后面文章会提到...

学习指令：

image.png