大前端时代的来临

​ 1999年，XMLHttpRequest技术出现，谷歌使用其开发了Gmail和谷歌地图之后，XMLHttpRequest获得了巨大的关注。2006年，XMLHttpRequest被W3C正式纳入标准，同时有了新的名字——Ajax。

​ Ajax的出现不仅解决了早期前端的众多问题，同时将我们从Web网页时代带到了Web应用时代，也就是常说的Web 2.0时代，同时提出了前后端分离的概念。

​ Web网页时代与Web应用时代的区别是十分巨大的：

• 在Web网页时代，网页都是服务端渲染的，服务器先渲染出HTML页面，之后糅合JS和CSS文件，再发送给浏览器，浏览器解析这个类似文档的内容，展示给用户。如此便把所有压力都放在服务器，客户端只负责解析服务器返回的文档。

• 但是在Web应用时代，客户端可以自己对数据进行处理，并且做出相应的渲染。不仅分摊了服务器的压力，同时由于数据量的减少，页面的反馈速度也提升了，缺点就是对机能提出了一定的要求，但随着计算机性能的不断提高，这点要求变得微不足道。

  前后端分离

  ​ 在Web 2.0时代，网页在某种程度上被当作一个App，浏览器就是运行这个App的容器，在这个App里，前端会对数据进行很多操作，只要不对数据进行永久化修改，就无须请求服务，这使网页独立成为一个整体。

  ​ Web应用相比传统的应用有着太多的好处——无须针对系统来开发不用的版本，无须安装，无须审核，无须升级等。其中最大的好处就是降低了软件的开发成本。

  ​ 前后端分离使得前端工程师可以更加专注地开发前端功能，同时避免了前后端共同开发的一些分歧。

  ​ 在前后端分离的架构中，后端只负责按照约定的数据格式为前端提供可调用的API服务即可。前后端之间通过HTTP请求进行交互，前端获取数据后进行组装和渲染，最终展示在浏览器上。

  ​ 前后端分离的代码库也进行了一定的操作，代码组织方式如图1.1所示。

​ 在前后端没有分离的时代，前端工程师进行开发的时候，必须把整个项目都导入开发工具中，页面中可能夹杂了些许后端代码，使项目的修改变得十分复杂，一不小心就可能造成不可预料的后果。

​

MVC、MVP、MVVM傻傻分不清楚

MVC

​ MVC框架是MVC、MVP、MVVM这3个框架中历史最悠久的。

​ 20世纪70年代，施乐公司发明了Smalltalk语言，用来编写图形界面的应用程序，脱离了DOS系统，让系统可视化，不用一直看着黑白的界面。在Smalltalk发展到80版本的时候，MVC框架被一位工程师提出来，MVC框架的出现在很大程度上降低了应用程序的管理难度，之后被广泛应用于构架桌面和服务器应用程序。

MVP

​ MVP框架比MVC框架大概晚出现20年，1990年，MVP由IBM的子公司提出。

​

​ 在MVC框架中，View层可以通过访问Model层来更新，但在MVP框架中，View层不能再直接访问Model层，必须通过Presenter层提供的接口，然后Presenter层再去访问Model层。这看起来有点多此一举，但用处着实不小。首先是因为Model层和View层都必须通过Presenter层来传递信息，所以完全分离了View层和Model层，也就是说，View层与Model层一点关系也没有，双方是不知道彼此存在的，在它们眼里，只有Presenter层。其次，因为View层与Model层没有关系，所以View层可以抽离出来做成组件，在复用性上比MVC模型好很多。MVP框架流程如图1.6所示。

​ MVP中View层与Model层确实互不干涉，View层也自由了很多。但还是有问题，因为View层和Model层都需经过Presenter层，致使Presenter层比较复杂，维护起来会有一定的问题。而且因为没有绑定数据，所有数据都需要Presenter层进行“手动同步”，代码量比较大，虽然比MVC模型好很多，但也是有比较多的冗余部分。为了让View层和Model的数据始终保持一致，避免同步，MVVM框架出现了。

MVVM

​ 2005年微软正式宣布MVVM的存在。VM是ViewModel层，ViewModel层把Model层和View层的数据同步自动化了，解决了MVP框架中数据同步比较麻烦的问题，不仅减轻了ViewModel层的压力，同时使得数据处理更加方便——只需告诉View层展示的数据是Model层中的哪一部分即可，MVVM框架如图1.7所示。

​ 你可能感觉MVVM的框架图与MVP的框架图相似，确实如此，两者都是从View层开始触发用户的操作，之后经过第三层，最后到达Model层。但是关键问题是这第三层的内容，ViewModel层双向绑定了View层和Model层，因此，随着View层的数据变化，系统会自动修改Model层的数据，反之同理。而Presenter层是采用手动写方法来调用或者修改View层和Model层，两者孰优孰劣不言而喻。MVVM框架流程图如图1.8所示。

​ 从图1.9可以看出，View层和Model层之间数据的传递也经过了ViewModel层，ViewModel层并没有对其进行“手动绑定”，不仅使速度有了一定的提高，代码量也减少很多，相比于MVC和MVP,MVVM有了长足的进步

​ 至于双向数据绑定，可以这样理解：双向数据绑定是一个模板引擎，它会根据数据的变化实时渲染。这种说法可能不是很恰当，但是很好理解。

​ 如上图所示，View层和Model层之间的修改都会同步到对方。MVVM模型中数据绑定方法一般有以下3种。

• 数据劫持发布

• 订阅模式

• 脏值检查

  Vue.js使用的是数据劫持和发布-订阅模式两种方法。首先来了解3个概念。

• Observer：数据监听器

• Compiler：指定解析器

• Watcher：订阅者

  Observer用于监听数据变化，如果数据发生改变，不论是在View层还是Model层，Oberver都会知道，然后告诉Watcher。Compiler的作用是对数据进行解析，之后绑定指定的事件，在这里主要用于更新视图。Vue.js数据绑定的流程：首先将需要绑定的数据用数据劫持方法找出来，之后用Observer监听这堆数据，如果数据发生变化，Observer就会告诉Watcher，然后Watcher会决定让哪个Compiler去做出相应的操作，这样就完成了数据的双向绑定。