轻量级前端MVVM框架avalon - 执行流程1

基本上确定了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中去,当然有时会修复一下(比如计算属性会转换一个简单的数据类型)

运作流程:

在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的每一个操作,都会向上同步到V,向下同步到M。

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对象

所以我们大胆猜测下

* 在这一大堆扫描绑定方法中应该会哪些实现(这些方法才是最终的执行体)

待续...

上一篇:轻量级前端MVVM框架avalon - 初步接触


下一篇:MMU内存管理单元相关知识点总结