Avalon2框架解析-优快云博客

本文链接：https://blog.youkuaiyun.com/dujun_csdn/article/details/96048308

2019-06-27（avalon 2 解读）

划重点：

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

虚拟DOM：

avalon会在DOMReady对.ms-controller节点进行outerHTML操作
将这个字符串进行parser,转换为最早的虚拟DOM
含有属性,dynamic用于节点对齐算法，skipAttrs与skipContent用于diff算法
虚拟DOM树转换为一个$render方法
执行$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`