3.2　前端框架的演变

前端从最初的网页制作开始，演变到现在框架和体系的逐步完善，每一次进步都是一个质的飞跃。通过梳理前端发展时间线，深入分析前端的从无到有、从有到优的过程，帮助读者理解技术发展背后的脉络。

3.2.1　最初的时代

在互联网发展的早期，前后端开发是一体的，前端属于后端的一部分。主要的流程是后端接受浏览器请求，然后生成静态页面，再返回给浏览器解析。

为了提升效率，逐渐形成了以后端为主的MVC时代。MVC中的模型Model负责提供和保存数据（与数据库交互），视图View负责展示界面和数据，控制器Controller负责数据处理和实现业务逻辑。使用这样的架构，前后端职能划分较为清晰，前端属于MVC中的V，负责编写页面模板；后端负责数据和业务逻辑，读取页面模板，并使用处理后的数据填充模板中的变量，最后生成静态页面。

但这样的模式依然存在一些问题，前端隶属于后端，开发环境依赖后端，因其无法独立，从而导致效率不高。当时的应用多以页面展示为主，前端需要处理的工作较少，主要编写HTML和CSS及少量JS文件，使得维护路由和处理业务逻辑等大量的工作堆积在后端。

3.2.2　前端的革命

AJAX的诞生彻底改变了这一切，在无须重新加载整个网页的情况下，前端可以通过AJAX获取后端数据，然后利用DOM操作更新网页，以此达到动态加载的效果。

从此前端被独立出来，实现了真正意义上的前后端分离。后端专注于提供数据处理，最后将数据打包成接口；前端负责开发界面和交互，通过获取到的接口数据实现页面的更新。

前端的工作内容开始慢慢增多，如处理各种业务逻辑、发送AJAX请求、处理返回的数据、操作DOM等，但浏览器提供的底层API相对复杂，还存在一定的兼容问题，促使前端的类库得以发展。

3.2.3　类库的繁荣

类库解决了常用代码的复用，并通过封装降低了编程的复杂度，将一些常用的和复杂的功能模块封装成函数，并提供更加简单的调用接口。它相当于许多功能的集合，用与不用取决于自身，使用它并不会影响代码的结构。

其中最著名的类库是jQuery，它极大地简化了JavaScript的编程过程。它的主要功能涵盖HTML元素的选取和操作，JS特效和动画，CSS的操作、事件和AJAX的封装，以及其他常用功能等。它还预留了扩展方法，方便将自定义的功能插件集合到其中。其他类似的类库还有ExtJS、YUI、移动端的Zepto，以及各种针对Canvas的类库等。

从本质上来看，类库相当于一个封装好的中间层，通过简单友好的接口，间接地操作那些复杂的浏览器底层API接口，并在类库内部解决兼容等问题，使开发更加便捷高效。但是，类库的使用依托于开发者的技术文档，所以在一定程度上增加了开发的学习成本。

类库虽然可以很方便地实现各种功能，但这种开发模式缺乏规范。随着业务量的增多，前端也需要处理数据、实现业务逻辑、生成视图等。借鉴后端框架的经验，前端的各种MVC框架也随之而来。

3.2.4　框架的兴起

前端的MVC与后端类似，数据模型Model负责与后端接口沟通，包括AJAX请求和数据的处理。视图View包括原始的结构样式和一部分控制页面的JS，负责将Model中的数据渲染到页面。控制器Controller作为数据和视图的黏合剂，负责接受视图的请求并转发给合适的模型，获取数据的变更并同步更新到视图。

这样的模型在理论上是可行的，但在实际开发中，前端框架大都在此基础上进行了一些改进。目前主要的3个前端框架（Angular、React、Vue）普遍采用的都是MVVM模式。它们将“数据模型和视图进行双向绑定”的思想作为核心，View和Model之间没有任何联系，仅通过ViewModel进行交互，而且Model和ViewModel之间的交互是双向的，因此视图中数据的变化会同时修改数据源，而数据源中数据的变化也会立即反映到View上。

小程序框架采用了类似于MVVM的开发模式，作为一个响应式的数据绑定系统，在逻辑结构上将小程序分为视图层和逻辑层。这两层始终保持同步，只要在逻辑层上修改了数据，视图层就会进行相应的更新，这与传统的网页开发的数据展示方式有很大不同。

在传统的前端模式中，需要先构建页面，然后通过监听页面的事件获取数据，再通过DOM操作实现视图的更新。而在MVVM的开发模式中，一切视图的变化都是通过改变数据进行的，下面来看一个简单的例子。

＜！——视图层3-2.axml——＞

＜text class="title"＞Hello{{name}}！＜/text＞

＜view class="box"＞

＜button onTap="changeName"＞Click me！＜/button＞

＜/view＞

//逻辑层　3-2.js

Page（{//注册一个页面

data：{name：'taobao'}，//设置初始数据

changeName（）{this.setData（{name：'alipay'}）}//重设数据改变视图

}）；

在上面的代码中，框架自动将逻辑层data数据中的name与视图层中的name进行了绑定，所以页面一打开就会显示“Hello taobao！”。当用户触发按钮时，视图层会发送changeName的事件给逻辑层，逻辑层找到该事件并执行，setData操作将data属性进行数据重置（date中的name改为alipay）。因为在框架中数据与视图已经被绑定了，所以改变数据后视图会自动更新，页面内容将变为“Hello alipay！”。

更多的数据绑定方式和事件绑定方法，在后面的章节中会进行详细的介绍。