轻量级前端MVVM框架avalon - 执行流程1
基本上确定了avalon的几个重要元素的关系：
-
Ｍ，即model，一个普通的ＪＳ对象，可能是后台传过来的，也可能是直接从ＶＭ中拿到，即ＶＭ.$json。有关的这个$json的名字还在商讨
-
V，即View，HTML页面，通过绑定属性或插值表达式，呈现数据，处理隐藏，绑定事件或动画等各种交互效果。Ｖ只与ＶＭ打交道。
-
ＶＭ，即ViewModel，我们通过avalon.define("xxx", function(vm){vm.firstName = "正美"})，这里的vm是一个临时的对象，用于定义，真正的ＶＭ是avalon.define方法的返回值。它上面的$json属性就是Ｍ，可以见ＶＭ处于一切的核心。我们对ＶＭ的每一个操作，都会向上同步到Ｖ，向下同步到Ｍ。并且出于节能低碳起见（减少对象的创建），我们在生成Ｍ时，会重复利用ＶＭ中的一些属性，比如vm的某个属性是一个对象，那么这个对象会直接搬到$json中。若它是一个数组，它里面每个元素为对象，这些数组或对象都会直接$json中去，当然有时会修复一下（比如计算属性会转换一个简单的数据类型）
运作流程：
在MVVM模式中,ViewModel是贯穿整个框架的梁柱
我们现在分析下整个代码如何运作的一个流程：本文不讨论具体实现,只讨论流程
首先自然是HTML结构
<fieldset ms-controller="simple">
<legend>例子</legend>
<p>First name: <input ms-model="firstName" /></p>
<p>Last name: <input ms-model="lastName" /></p>
<p>Hello, <input ms-model="fullName"></p>
<div>{{firstName +" | "+ lastName }}</div>
</fieldset>
观察后得出结论：
@ 与常规结构不同
@ 定义了很多自定义标签 如何:ms-model ,ms-controller
@ 插值表达式 {{}}
.........等等,具体请看api手册
那么接下来开发着定义JS
avalon.ready(function() {
avalon.define("simple", function(vm) {
vm.firstName = "司徒"
vm.lastName = "正美"
vm.fullName = {//一个包含set或get的对象会被当成PropertyDescriptor，
set: function(val) {//set, get里面的this不能改成vm
var array = (val || "").split(" ");
this.firstName = array[0] || "";
this.lastName = array[1] || "";
},
get: function() {
return this.firstName + " " + this.lastName;
}
},
vm.nick = {
name: "暗黑之民"
}
})
})
大概理解下代码的意思：
avalon.ready(function() { //这是domReady，相当于jQuery的 $(function(){})
var model = avalon.define( "aaa", [], function(vm) { //创建一个名字为aaa的ViewModel vm.firstName = "司徒" //创建一个监控属性 vm.lastName = "正美" //创建一个监控属性 vm.fullName = { //一个包含set或get的对象 用于创建一个依赖监控属性 avalon.scan(); //开始扫描DOM树，处理绑定
第二步就能看出来这个就是定义的一个模型了,vm->ViewModel 视图模型
整个运作都是围绕着vm展开的,mvvm模式中ＶＭ处于一切的核心,我们对ＶＭ的每一个操作，都会向上同步到Ｖ，向下同步到Ｍ。
VM的创建不仅仅只是我们看到的定义了几个属性,几个方法,其实框架内部帮我们做了很多事:
VM模型的创建：
1.框架内部创建模型对象VM
2.VM吸收开发定义的处理方法
3.把开发定义的方法给经内部的转换，它的属性与方法会换胎换骨
4.返回这个被改造过的模型对象,挂到全局保存起来
所以这个里面涉及闭包与作用域链的问题了,以后再慢慢分析
那么这个VM创建好了,我们接下来干嘛呢?
大家有没有发现在HTML结构中与VM代码中,有没有共同点？
1.HTML中定义的自定义标签与VM中的属性方法名是不是一样？
2.根据API的定义,HTML对应的每一个标签的都会对应着某一种JS的处理方式
3.现在HTML结构与JS代码都是独立的东东,所以我们想个办法让他们关联起来
如何关联?
答案：扫描绑定
avalon.scan();
简而言之呢就是扫描属性节点，文本节点,找到对应的事件处理器,执行事件绑定等一堆东东
属性节点
<input ms-model="firstName" />
发现有ms-开头的名字就会解析成对应的一个处理方法
比如ms-model
//将模型中的字段与input, textarea的value值关联在一起 var modelBinding = bindingHandlers.model = function(data, scopes) { var element = data.element; var tagName = element.tagName; //是否有对应元素的标签名的处理方法 if (typeof modelBinding[tagName] === "function") { var array = getValueFunction(data.value.trim(), scopes); if (array) { modelBinding[tagName](element, array[0], array[1]); } }
当然还会传递一些需要运行的参数
特别指出来传递的实参scopes就是ViewModel对象
所以我们大胆猜测下
* 在这一大堆扫描绑定方法中应该会哪些实现(这些方法才是最终的执行体)
待续...
