经过几天的讨论,基本上确定了avalon的几个重要元素的关系。
M,即model,一个普通的JS对象,可能是后台传过来的,也可能是直接从VM中拿到,即VM.$json。有关的这个$json的名字还在商讨,详见这里
V,即View,HTML页面,通过绑定属性或插值表达式,呈现数据,处理隐藏,绑定事件或动画等各种交互效果。V只与VM打交道。
VM,即ViewModel,我们通过avalon.define("xxx", function(vm){vm.firstName = "正美"}),这里的vm是一个临时的对象,用于定义,真正的VM是avalon.define方法的返回值。它上面的$json属性就是M,可以见VM处于一切的核心。我们对VM的每一个操作,都会向上同步到V,向下同步到M。并且出于节能低碳起见(减少对象的创建),我们在生成M时,会重复利用VM中的一些属性,比如vm的某个属性是一个对象,那么这个对象会直接搬到$json中。若它是一个数组,它里面每个元素为对象,这些数组或对象都会直接$json中去,当然有时会修复一下(比如计算属性会转换一个简单的数据类型)
下面是一个够为直观的例子:
var b = {name: "xxx", eee: "ooo"} var array = [{name: "xxx"}, {title: "yyy"}] var a = avalon.define("xxx", function(vm) { vm.firstName = "司徒"; vm.lastName = "正美"; vm.nick = b; vm.array = array; }); console.log(a.nick.$json === b);//true console.log(a.array.$json == array);//true console.log(a.array.$json[0] === array[0]);//true console.log(a.array[0].$json === array[0]);//true console.log(JSON.stringify(a.$json));//{"firstName":"司徒","lastName":"正美","nick":{"name":"xxx","eee":"ooo"},"array":[{"name":"xxx"},{"title":"yyy"}]}