>这篇文章将从 AngularJS ReactJS Polymer 这几个流行的框架入手，分析前端框架在这几年发展中的关键技术点，作为2015前端技术选型的参考。摘要:

- 初体验
- 技术特点
- 组件化
- 应用架构

### 总结

**1. 初体验**
拿TODO来作为引子好了.
         
Angular 的实现
React的实现(非flux架构)
Polymer的实现
三者共同对比
在Angular中有controller和component的概念是分离的，而react和polymer中只有component的概念。
实际上三者在最简单的使用场景下差异并不大，Angular和polymer模板和代码分离的方式更贴近于传统的前端做法，而React写法更像后端渲染。关于学习和使用成本的谁高谁低得问题没有什么好争论的，在MVVM已经流行了这么久的情况下，三者入门门槛都差不多，但要用好都需要深入其中的运行机制才行。

**2. 技术特点**

实际上所谓的MVVM框架的关键技术就一个：数据与视图的绑定。在Angular/polymer/knockout/vue/avalon 中，这项技术的实现又可以拆分成两个关键点：模板分析和数据监测。
模板分析的主要目的是对 {{title}} 这样的标记进行收集。收集完成之后生成一个视图更新函数，在函数内部保存着这个标记所在的Dom片段和相关的数据名称，函数被调用时会去重新取数据名称对应的数据(或者由外部将相应的数据作为参数传入)，然后更新dom片段。这样就实现了视图的更新。一般框架会在启动时就将模板分析完，生成相应的视图更新函数。当数据更新的时候，就调用这些更新函数来更新视图，那么问题来了，如何检测数据的改动?
knockout/angular/avalon代表了三种方案:

- 使用自定义的数据对象及其指定的get和set函数。例如你只能使用 user.set("name","john")来给user对象的name属性赋值，因为这样它才能在set函数中知道修改了什么属性，并且只调用相应的视图更新函数。这种方式不太爽的地方在于改变了原有的JS对象使用的方式。
- 使用 Object.defineProperty 的get和set函数来检测对象属性的改动，本质上和上种没有什么区别。但是它有一个缺陷，就是无法检测新增的或删除的属性。有的框架是通过Object.observe来补充这种方案的，不过Object.observe 目前也只有chrome支持。这种方法改良了上面的开发体验，你可以像使用原生JS对象一样来操作你的数据。但是在实现上较为复杂。
- dirty check。这是angular正在使用的机制，它并不能像前两种一样一旦数据发生变化立即触发更新回调。而是必须在调用了angular提供的一些方法，或者触发了页面上使用了ng-click等的元素上的事件后才会触发。这些触发时机是angular内部就已经实现了的，所以你几乎感觉不到。这种方法被称为"dirty"的原因是，它保存了所有属性上一次的值，检测是通过遍历对象的所有属性，对比它和上一次值是否一样来实现的。如果是深层对象的话，它会层层遍历。这种检测方式结合了上面两种的优势,但是对性能造成了负担。

至此，两个关键技术点都已讲清楚，用一张图来回顾一下
而在React中则相对简单，React用的是类似于重绘的机制，当触发了 setState 之后，就完全重新渲染(并非立即触发，中间有类似于缓存的性能提升机制)。这看起来比起前面的方案简单粗暴，但是却因为virtual dom的实现化腐朽为神奇了。virtual dom指的是React内部用来模拟真实dom的一种数据对象。当重新渲染时，实际上是先生成这样virtual dom，然后将其和上一次的virtual dom进行对比，找出差异，最后由react在真实的dom上更新有差异的部分就够了。因为virtual dom始终在内存中，真实的dom操作非常少，而前面的几种框架在更新视图时常常会有大量的dom操作，因此react在性能上大大领先前一种类型的框架。同时也因为virtual dom仍然是标准的 js对象，所以使得"服务端渲染"也成为可能。值得注意的是，虽然React本身并不会像前面的框架一样深入的去检测数据的哪一部分发生了变化，但是可以通过官方提供的addon 和immutable.js来进一步提高这一块的性能。
（web前端学习交流群：328058344 禁止闲聊，非喜勿进！）

**3. 组件化**

在组件化的方向上 react 和其他几种框架几乎已经分道扬镳了。从 angular2.0的设计和新出的 aurelia 等框架中可以看到大家都在尝试往 webcomponent 靠近。polymer号称下个版本代码将大幅减少，那无非是因为浏览器将实现标准了。靠近 webcomponent 的好处在于任何一个框架都将不再封闭，以 custom element作为接口层，能实现生态圈的融合。虽然 react 也有封装成 custom element的方案，但是 react 并没有很好的调用其他框架生成的 custom element 的方案。"像使用原生dom元素一样使用custom element"的组件使用方式意味着尊重原生的dom使用方式，包括dom的事件等等。这和rea