knockout, emberjs, angular, avalon比较

快速理解AngularJS的语法模式

原文链接：http://blog.miniasp.com/post/2013/04/24/Front-end-Engineering-Fineart-An-Introduction-to-AngularJS.aspx

avalon是一个迷你的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使用)的JS　parser。第一个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手动触发。

评价：乍一看入门非常容易，其实相反。条条框框太多，适合那些一直与JAVA搏斗的人士。对于那些接受过jQuery洗礼的人来说，用着用着会造反的……