搜索
1.关于AvalonJs2.开始的例子3.扫描4.视图模型5.数据模型6.绑定属性与动态模板7.作用域绑定(ms-controller,ms-important)8.模板绑定(ms-include)9.数据填充(ms-text,ms-html)10.类名切换(ms-class,ms-hover,ms-active)11.事件绑定(ms-on，……)12.显示绑定(ms-visible)13.插入绑定(ms-if)14.双工绑定(ms-duplex，原来的ms-model)15.样式绑定(ms-css)16.数据绑定(ms-data)17.布尔属性绑定(ms-checked,ms-selected,ms-readonly,ms-disabled,ms-enabled)18.字符串属性绑定(ms-title,ms-src,ms-href……)19.万能属性绑定(ms-attr)20.万能绑定(ms-bind)21.循环绑定(ms-each)22.UI绑定(ms-ui)23.$watch24.过滤器25.AMD加载器关于AvalonJSavalon是一个迷你的MVVM框架，虽然从发布到现在，它臌胀了不少，但它现在还是比knockout小许多。avalon开发过程一直遵循三个原则：1，复杂即错误，2，数据结构优于算法，3，出奇制胜。这三大原则保证avalon具有良好的维护性，扩展性，与众不同。简单说一下其他三大MVVM的实现思路：1.knockout:最早冒出来的JSMVVM库，通过转换VM中所有要监听的东西为函数，然后执行它们，得到某一时刻中，一共有多少函数被执行，将它们放到栈中，最底的就是最先被执行的，它上面的就是此函数所依赖的函数，从而得到依赖关系。然后设计一个观察者模式，从上面的依赖检测中，将依赖函数作为被依赖者（最先执行的那个的）的订阅者，以后我们对被依赖者进行赋值时，就会通先订阅者更新自身，从而形成一个双向绑定链。并且，knockout会将视图中的绑定属性进行转换，分解出求值函数与视图刷新函数，视图刷新函数依赖于求值函数，而求值函数亦依赖于我们VM中的某些属性（这时，它们都转换为函数），在第一次扫描时，它们会加入对应属性的订阅者列队中，从而VM中的某个属性改变，就会自动刷新视图。评价：实现非常巧妙，是avalon0.1-0.3的重要学习对象，但将属性变成一个函数，让人用点不习惯，许多用法都有点笨笨的。虽然是一个轻盈的库，但扩展性不强，里面的实现异常复杂，导致能参与源码的人太少。2.emberjs:一个大而全的框架，包罗万象。一开始是使用Object.defineProperty+观察者实现，但IE8的问题，让它不得不启用上帝setter,上帝getter。没有自动收集依赖的机制，没有监控数组，计算属性需要自己指定依赖。VM可继承。VM与视图的双向绑定依赖于其强大无比上万行的Handlebars模板。听说是外国目前最好用的MV*框架。因为作者既是jQuery的核心成员，也是Rails的核心成员，虽然由于技术能力没实现自动收集依赖，但框架的其他方面做得非常易上手，人性化。评价：太大了，优缺点同python的Django框架。3.angular:google组织开发的框架，体现其算法至上的时候到了。里面一共有两个parser,一个是ngSanitize/sanitize.js下的HTMLparser,一个是ng/parse.js(它要配合compile.js使用)的JSparser。第一个parser负责绑定抽取，第二个负责从Ctrl函数，工厂函数，服务函数及$watch回调中分解出无数setter,getter，确认它们的依赖关系，放进观察者模式中。它的观察者无比强大，由于它的VM能继承，于是通过继承链实现四通发达的消息广播。它还实现了一个基于LRU的缓存系统，因为google最喜欢以空间换时间了，另一方面说明它要缓存的东西太多了，非常吃内存。公司内部用angular实现的grid，200行在PC中就拖不动了。它还用到许多时髦的东东，如HTML5historyAPI,迷你版QPromise。内部是极其复杂。不过最大的问题是，它是基于parser，静态编译，这意思着什么呢？不抗压缩！为此，它引进了IOC，官网上给出的简单例子其实在项目完全不可用，我们需要使用另一种更复杂的写法，方便编泽器从它们得到不被压缩的部分，让它在压缩情况也能正常运行。由于基于编译，许多行为都不是即时的，可预见的。用户写的那些控制器函数，都是为编译做准备。由于基于编译，它不得不要求我们对具有兼容问题的一些全局函数，方法进行屏蔽，用它的给出的服务替代它们，如window对应$window,document对应$document,location对应$location,setTimout对应$timeout……如果不遵循这规则，它可能运行不了，你需要手动使用$digest手动触发。不过，它与emberjs一样，走大而全的道路，连测试框架也有了，并且由于是MVVM，因此比起其他框架易写测试。评价：上手难度非常大，没有想象中的好用。有句话是这样说的，Backbone像是穿救生衣游泳，你要自己游到对岸去，Angular像是开快艇，但是没有救生衣。现在的avalon是我在完全消化了knockout发展起来的，准确来说，是0.4版，通过Object.defineProperties与VBScript实现了与普通对象看起来没什么两样的VM，VM里面充满了访问器属性，而访问器属性肯定对应一个setter,一个getter，我们就在setter,getter中走knockout的老路，实现自动收集依赖，然后放进一个简单的观察者模式中，从而实现双向绑定。将绑定属性分解为求值函数与视图刷新函数，早前，avalon也与knockout一样使用一个简单的parser，然后通过with实现，0.82一个新的parser上马，同样的迷你，但生成的求值函数，更方便依赖收集，并且没有with语句，性能更佳。angular也不是一无是处，我也从它那里抄来了{{}}插值表达式，过滤器机制，控制器绑定什么的。avalon在内部使用了许多巧妙的设计，因此能涵盖angular绝对大多数功能，但体积却非常少。此外，在性能上，现在除了chrome外，它都比knockout快，angular则是最慢的。在移动端上，avalon这个优势会被大大放大化的。关于avalon的几点：兼容IE6没有AJAX与动画模块，需要配合jQuery等库使用avalon会自动同步视图，因此不要在VM中进行DOM操作迷你MVVM框架在github的仓库，如果你要兼容IE6，那么下其中的avalon.js,如果你只打算兼容IE10与标准浏览器，那么下avalon.mobile.js。官网地址大家可以加入QQ群：79641290进行讨论，此群为技术群，禁水！开始的例子我们从一个完整的例子开始认识avalon：[html]viewplaincopyprint?1.!DOCTYPEhtml2.html3.head4.title/title5.metahttp-equiv=Content-Typecontent=text/html;charset=UTF-86.scriptsrc=avalon.js/script7./head8.body9.divms-controller=box10.divstyle=background:#a9ea00;ms-css-width=wms-css-height=hms-click=click/div11.p{{w}}x{{h}}/p12.pW:inputtype=textms-model=wdata-event=change//p13.pH:inputtype=textms-model=h//p14./div15.script16.avalon.define(box,function(vm){17.vm.w=100;18.vm.h=100;19.vm.click=function(){20.vm.w=parseFloat(vm.w)+10;21.vm.h=parseFloat(vm.h)+10;22.}23.})24./script25./body26./html27.28.上面的代码中，我们可以看到在JS中，没有任何一行操作DOM的代码，也没有选择器，非常干净。在HTML中，我们发现就是多了一些以ms-开始的绑定属性与{{}}插值表达式，有的是用于渲染样式，有的是用于绑定事件。在ms-model中，我们会发现它会反过来操作VM，VM的改变也会影响视图的其他部分。扫描不过上面的代码并不完整，它能工作，是因为框架默认会在DOMReady时扫描DOM树，将视图中的绑定属性与{{}}插值表达式抽取出来，转换为求值函数与视图刷新函数。我们可以通过下面方法自己扫描DOM树：[js]viewplaincopyprint?1.avalon.ready(function(){2.avalon.define(box,function(vm){3.vm.w=100;4.vm.h=100;5.vm.click=function(){6.vm.w=parseInt(vm.w)+10;7.vm.h=parseInt(vm.h)+10;8.}9.})10.avalon.scan()11.})scan有两个可选参数，第一个是扫描的起点元素，默认是HTML标签，第2个是VM对象。[js]viewplaincopyprint?1.//源码2.avalon.scan=function(elem,vmodel){3.elem=elem||root4.varvmodels=vmodel?[].concat(vmodel):[]5.scanTag(elem,vmodels)6.}7.视图模型我们是通过avalon.define函数返回一个视图对象VM，并且avalon.define(vmName,function(vm){})中的vm并不等于VM，工厂函数中的vm是用于转换为VM的。生成的VM比用户指定的属性还多了许多属性。默认的，除了函数外，其他东西都转换为监控属性，计算属性与监控数组。如果不想让它转换，可以让此属性以$开头，框架就不会转换它们。如果实在不放便改名，又不想被转换，比如是一个jQuery对象或一个DOM节点，如果转换，肯定拖死框架，我们可以放到vm.$skipArray=[propName1,propName2]中去，这样也忽略转换。另外，avalon不允许在VM定义之后，再追加新属性与方法，比如下面的方式是错误的：varvm=avalon.define(test,function(vm){vm.test1='点击测试按钮没反应绑定失败';});vm.one=function(){vm.test1='绑定成功';};//这里有两个错误，//1在命名上没有区分avalon.define的返回值与它回调中的参数，//2one方法的定义位置不对（这是考虑到兼容IE6-8，要求所有浏览器保持行为一致）数据模型当我们要用AJAX与后端交互时，如果直接把VM传上去太大了，这时我们需要把它对应的纯数组的JS对象。在VM中有个叫$model的属性，这是一个对象，就是数据模型M了。当我们更改VM时，框架就会自动同步M绑定属性与动态模板在开始之前，我们看一下静态模板是怎么工作的：我之前写了一个叫ejs的静态模板引擎：[html]viewplaincopyprint?1.scripttype=tmplid=table_tmpl2.&=title()&3.tableborder=14