前端技术开发模式的演变

　　古人云：“欲知大道,必先知史”。要想了解React是什么，还是需要从历史发展说起。我把它分为四个历史时期：JSP--->后端MVC--->SPA+AJAX--->前端MV。

　　1.JSP
　　作为Java开发人员，对JSP都非常熟悉。简单地说就是可使用JSP标签在HTML网页中插入Java代码。这种开发模式较适合业务简单地小型项目。如果业务逐渐复杂或者项目工期紧，往往会将业务逻辑代码写在JSP页面中。到后期维护成本会比较高。而且前后端开发耦合性太强。

　　2.后端MVC+Velocity(Freemaker)

　　JSP无法适用业务复杂的项目。所以MVC模式出现了。著名的框架Sturts2和SpringMVC都是这种模式的具体实现。如图：

　　在这种模式下，通常view层都会借助Velocity(Freemaker)等模板，使得在模板里写不了java代码。这样代码维护性得到了好转，前后端分工也更明确了。现在我们的项目中依然使用着这种模式。但是使用的过程中有些地方还是需要改进的：比如前端开发非常依赖后端环境。工作中遇到过这种情况，前段开发前需要后端先为他们准备idea,jdk,tomcat的环境，开发过程中也会出现后端的代码更新导致环境无法启动的问题，这时前端还需要解决这样的问题，才能继续进行开发。

　　3.SPA+AJAX

　　AJAX是在2005年开始被大众接受。当AJAX遇到了SPA就迎来了一个新的时代。SPA(Single Page Application)单页面应用。这里很有必要理解SPA。与单页模式对应的多页模式，我们比较熟悉，也一直在用。

　　多页应用模式由多个完整页面构成。页面之间的跳转从一个页面跳转到另一个页面。整页刷新。缺点就是页面切换加载慢，不流畅，特别是在移动设备上。

　　单页应用模式由一个外壳页面和多个页面片段组成。页面片段之间的跳转是把一个页面片段删除或者隐藏，加载另一个页面片段并显示出来。这是片段之间的模拟跳转，并没有离开外壳页面。局部刷新。SPA已经是Web应用开发的潮流，特别是移动应用开发。

　　通过这两张图的对比，应该可以对单页和多页有一个大概的了解了。那接着回来说为什么它能解决2中的问题。在多页应用中页面跳转的路由任务还是在服务端（Controller）中控制的。访问某一个地址跳转到某一个页面。而单页应用页面跳转的路由任务完全可以在客户端完成.在单页应用中与后台通信的部分就只是数据了。AJAX实现这部分数据传递的工作。所以说SPA和AJAX开启了一个新的模式，前后端只要定义好接口，就可以完全解耦了。如图：

　　那这种开发模式的问题是什么呢？
　　很像回归到JSP的那个阶段。只不过将复杂度都挪到了客户端。前端代码的维护性问题又来了。

　　4.前端MV*

　　为了解决前端代码的复杂度，同样前端的代码要解耦。这时我们听过的一些前端框架就来了。 比如：BackboneJS、EmberJS、AngularJS等。前两种属于早期的框架。先来看这样一张图：

　　众多的前端框架基本思路都是进行分层。有些框架的具体结构还是在MVC上有所演变。比如：AngularJS和Vue为MVVM模式。AngularJS比Vue的学习成本高很多。

　　我们主要讨论React.它是Facebook开源的前端框架。“Facebook认为MVC无法满足他们的扩展需求，由于他们非常巨大的代码库和庞大的组织，使得MVC很快变得非常复复杂，每当需要添加一项新的功能或特性时，系统的复杂度就成级数增长，致使代码变得脆弱和不可预测，结果导致他们的MVC正在土崩瓦解。认为MVC不适合大规模应用，当系统中有很多的模型和相应的视图时，其复杂度就会迅速扩大，非常难以理解和调试，特别是模型和视图间可能存在的双向数据流动”。基于这种情况，Facebook提出了Flux和React。

　　严格上说，React不是MVC框架。React的主要原理是Virtual DOM.由于 React 的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来 Web 开发的主流工具。

　　推荐一篇很棒的Virtual DOM文章。大家看过会有一个基本的理解。http://teropa.info/blog/2015/03/02/change-and-its-detection-in-javascript-frameworks.html