Web界面编程状态变化和JS开发框架（React/Angular/Ember）

UI编程中的一个关键课题就是界面组件化（可复用）以及组件状态管理。

稍早一些的windows程序员可能接触过MFC，其界面编程中有一个DDX（DoDataExchange）的机制，用来绑定界面组件和数据成员。

通过这样的绑定，由框架来负责当数据发生变化时完成相应UI的更新，而无需开发者编写代码，这无疑简化了编程。

而在早期的Web开发中，数据都是通过后台程序提供，所以UI的更新一般都是通过页面刷新或者局部Ajax请求来完成的，并没有一个独立的状态管理概念，如果说有状态，那么状态也是由后台进行远端管理的，前端只是负责构建文档并渲染。

这样当然是简单的，但同时也是低效的。

为了应对组件化和状态变更管理这些UI编程的基本要求，业界先后发展了一些JS开发框架。

Backbone.js：事件通知

Backbone.js和ExtJS属于第一代JS组件化开发框架，提供可复用的界面组件，如按钮、表单、表格等。

这些框架的思想是提供了事件通知接口，但具体内容的处理留给开发者。

开发者需要去处理细节，并考虑性能方面的影响，这样就会比较麻烦些。

Ember.js：数据绑定（Data Binding）

Ember通过类似DDX的方式绑定了数据和界面组件。该框架像Backbone一样发送事件，但是不同的是，Ember框架同时处理事件的接收，并完成界面更新，这意味着有一个侦听器用于更新连接到用户界面的事件。当接收到一个事件时，该侦听器知道要做什么。

这个方式下，Ember完全掌控控件数据和视图，缺点是Ember必须始终注意到数据模型中发生的变化，数据模型必须继承Ember特定的API接口。

AngularJS：脏数据检查（Dirty Check）

和Ember一样，Angular也帮助处理数据更新的细节，但和Ember主动通知的设计思路不同，Angular采用了一种观察者模式，当应用程序状态发生改变时，Angular检查每个被观察的对象，如果发现有变化，则执行更新：

这样的好处是数据模型（Model）要轻量和灵活些，不需要遵循特定接口，缺点是model没有主动性，比较“傻瓜”，必须有人从外部来检查它的变化。每次点击、HTTP应答和超时处理都将触发一个digest程序，来执行这些watchers。

ECMAScript 7中的Object.observe特性将帮助简化watchers的动作。

React：虚拟DOM（Virtual Dom）

React在状态变更处理中，使用了一种貌似偷懒的方法，既不用通知，也不用观察，而是完全“重绘”，看起来好像和服务器重绘一样，但技巧就在于服务器重绘是绘制真实的DOM，而React引入了一个虚拟DOM的概念，这个虚拟DOM是一个轻量级的JS简单对象（PO），在这个对象上操作要远比真实DOM要快得多。第一次绘制时，建立虚拟DOM：

发生变化后，React创建一个新的虚拟DOM，比较和上次虚拟DOM的区别，然后把差异部分在真实DOM上更新。

所以React的性能取决于比较程序是否足够有效和智能，优点是消除了状态跟踪，缺点显然是占用了较多的内存。

还有一些方案如增量DOM，是内存和性能的折衷，这里不再赘述。