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是一种重量型的对象
- 访问器属性
getset- 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
