轻量级前端MVVM框架avalon - 执行流程1基本上确定了avalon的几个重要元素的关系：运作流程：观察后得出结论：

Ｍ，即model，一个普通的ＪＳ对象，可能是后台传过来的，也可能是直接从ＶＭ中拿到，即ＶＭ.json。有关的这个json。有关的这个json的名字还在商讨

V，即View，HTML页面，通过绑定属性或插值表达式，呈现数据，处理隐藏，绑定事件或动画等各种交互效果。Ｖ只与ＶＭ打交道。

ＶＭ，即ViewModel，我们通过avalon.define("xxx", function(vm){vm.firstName = "正美"})，这里的vm是一个临时的对象，用于定义，真正的ＶＭ是avalon.define方法的返回值。它上面的json属性就是Ｍ，可以见ＶＭ处于一切的核心。我们对ＶＭ的每一个操作，都会向上同步到Ｖ，向下同步到Ｍ。并且出于节能低碳起见（减少对象的创建），我们在生成Ｍ时，会重复利用ＶＭ中的一些属性，比如vm的某个属性是一个对象，那么这个对象会直接搬到json属性就是Ｍ，可以见ＶＭ处于一切的核心。我们对ＶＭ的每一个操作，都会向上同步到Ｖ，向下同步到Ｍ。并且出于节能低碳起见（减少对象的创建），我们在生成Ｍ时，会重复利用ＶＭ中的一些属性，比如vm的某个属性是一个对象，那么这个对象会直接搬到json中。若它是一个数组，它里面每个元素为对象，这些数组或对象都会直接$json中去，当然有时会修复一下（比如计算属性会转换一个简单的数据类型）

<a></a>

在MVVM模式中,ViewModel是贯穿整个框架的梁柱

我们现在分析下整个代码如何运作的一个流程：本文不讨论具体实现,只讨论流程

首先自然是HTML结构

@ 与常规结构不同

@ 定义了很多自定义标签  如何:ms-model ,ms-controller 

@ 插值表达式 {{}}

.........等等,具体请看api手册

那么接下来开发着定义JS

大概理解下代码的意思：

第二步就能看出来这个就是定义的一个模型了,vm-&gt;ViewModel 视图模型

整个运作都是围绕着vm展开的,mvvm模式中ＶＭ处于一切的核心,我们对ＶＭ的每一个操作，都会向上同步到Ｖ，向下同步到Ｍ。

VM的创建不仅仅只是我们看到的定义了几个属性,几个方法,其实框架内部帮我们做了很多事:

VM模型的创建：

1.框架内部创建模型对象VM

2.VM吸收开发定义的处理方法

3.把开发定义的方法给经内部的转换，它的属性与方法会换胎换骨

4.返回这个被改造过的模型对象,挂到全局保存起来

所以这个里面涉及闭包与作用域链的问题了,以后再慢慢分析

那么这个VM创建好了,我们接下来干嘛呢? 

大家有没有发现在HTML结构中与VM代码中,有没有共同点？

1.HTML中定义的自定义标签与VM中的属性方法名是不是一样？

2.根据API的定义,HTML对应的每一个标签的都会对应着某一种JS的处理方式

3.现在HTML结构与JS代码都是独立的东东,所以我们想个办法让他们关联起来

如何关联?

答案：扫描绑定

简而言之呢就是扫描属性节点，文本节点,找到对应的事件处理器,执行事件绑定等一堆东东

属性节点

&lt;input ms-model="firstName" /&gt;

发现有ms-开头的名字就会解析成对应的一个处理方法

比如ms-model

//将模型中的字段与input, textarea的value值关联在一起 var modelBinding = bindingHandlers.model = function(data, scopes) { var element = data.element; var tagName = element.tagName; //是否有对应元素的标签名的处理方法 if (typeofmodelBinding[tagName] === "function") { var array = getValueFunction(data.value.trim(), scopes); if (array) { modelBinding[tagName](element, array[0], array[1]); } }

当然还会传递一些需要运行的参数

特别指出来传递的实参scopes就是ViewModel对象

本文转自艾伦 Aaron博客园博客，原文链接：http://www.cnblogs.com/aaronjs/p/3141695.html，如需转载请自行联系原作者