木的土纪,第3日

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用于节点对齐算法,skipAttrsskipContent用于diff算法
  4. 虚拟DOM树转换为一个$render方法
  5. 执行$render方法,生成新的虚拟DOM最早的虚拟DOM比较文件的差异diff,一边diff一边更新真实DOM
  • **之后VM的属性发生变动,直接执行$renderdiff更新DOM
VM:view model
  • vm是一种利用ProxyObject.definePropertiesVBScript创建的特殊对象。
  • 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"
})
18468891-8f80507391293f54.png
chrome console vm Iproxy对象
私有属性:$id, $events, $watch, $fire, $model, ...等列出来的是比较稳定的
属性作用
$idvm的名字
$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 clearensure 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设计模式,掺合对象,后面文章会提到...

学习指令:
18468891-e7bb132d02e9d877.png
image.png
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值