前端开发框架技术选型：Angular2 VS React VS jQuery

Angular和React是主流的2个前端开发框架，但是严格来说两者并非对等的概念。

Angular是一个基于MVC（或者MVVM）的框架，包含model（模型）/view（视图）/controller（控制器），

React只有view（视图）层。而Angular2使用TypeScript重建了整个框架，好处是可以利用TypeScript的增强语法。

相对而言Angular是一个重量级的开发框架，而React是一个界面库，React要加上Flux可以成为一个快速开发框架。

Angular通过双向绑定提供了更多的交互性，另外也提供了方便构建单页应用的服务和路由。

React的主要目标是给开发者提供表现层可复用的声明式界面插件，背后的事情留给开发者来完成。

而jQuery我们都很熟悉，是一个可扩展的开发库。

Angular架构

Angular的后台机制设计吸收了BackboneJS和Knockout等其他早期JS框架的很多概念，整体架构包含模块（Module）、模板（Template）、组件（Component）、元数据（Metadata）、双向绑定、指令（Directive）和依赖注入（Dependency Injection）。其中DI主要是用于在创建组件时由Injector自动注入所依赖的服务层逻辑，这是沿用Java里面的类似概念。

React架构（Flux）

Flux纸面意思表示“变化”，体现了该架构的意图，就是为了应对Web端数据变化越来越多的客观情况。

Flux本质上是表示上图这样一个单向数据流的实现，这在桌面和本地应用被实现过N种类似版本，只是现在搬迁到Web上来了。

1. 当用户和视图（View）交互发生变化时，触发一个动作（Action）；

2. 动作被分发器（Dispatcher）派发给该动作对应的回调函数来更新数据模型（Store）；

3. Store数据更新后会发送change事件来通知View；

4. 控制器视图（controller-views）侦听change事件并接收新数据做出相应的界面更新。

Angular和React功能比对表

无论使用Angular还是React，相比jQuery，都会在前端引入新的复杂度，

那么为什么还需要这些框架呢？如前所述，这源于客观上Web端有了越来越多的数据和交互，

一个大型的界面程序（如Facebook自己的应用）需要有一些最佳实践（如组件化）来规范化这些交互过程，

提高代码在团队之间的可复用性和可维护性。看下面个图，对于复杂应用，我们会有直观的认识：

当交互事件繁杂时，要避免一团糟，如果我们使用jQuery就需要自行实现一个中间管理（事件代理）对象并重构相应的业务代码，

而React已帮你很好的实现了。下面是分别使用jQuery和React实现的微博评论框界面组件代码，可以自己体会下：

http://wow.techbrood.com/fiddle/31660

http://wow.techbrood.com/fiddle/31659

最后，尽管本文说明了Angular和React的设计思路和好处，但是需要指明的是不要盲目使用这些框架。

我们认为对于小的网页应用，使用jQuery仍然要简洁直观（容易理解）得多，就是查找元素/侦听事件/操作DOM。

React把标记（HTML）和行为（JS）混合在一起的方式以及引入的状态变化中间过程，对于大型应用有助于组件化，

但对于小型应用，实际上比脚本和标记分离更难以维护。