Web前端开发技术的演化与MVVM设计模式研究

李嘉　赵凯强　李长云

摘要：随着Web应用的不断深化，前端开发模式是提高开发质量和开发效率的关键要素。基于Web系统组成，以计算机技术发展与Web应用需求为主线，系统梳理了前端开的演化过程：“后端开发为主→前端开发为主→前后端分离开发模式”，重点分析了当前主流MVVM设计模式的优势，为Web开发者提供参考和借鉴。

关键词：Web；开发模式；MVVM设计模式

中图分类号：TP311 文献标识码：A 文章编号：1009-3044（2018）02-0221-02

随着互联网的普及应用，Web（World Wide Web，也就是WWW，中文名字为“万维网”）已经成为人们必备的共享网络数据信息的最便捷工具。Web是在1989年由TimBL在瑞士日内瓦的欧洲粒子物理研究所（CERN）开发出来的，它解决了文档信息的电子化链接问题，使得全球的人们都可以通过互联网方便、快捷地存取可共享的信息。但是，伴随着Web应用的不断深化，人们的需求越来越高，已经不满足于静态文档的获取，需要更加主动的数据操控能力，同时，开发效率也是决定Web应用成功与否的重要标志。因此，从Web的应用需求出发，探索Web开发技术发展的路径，让程序员深刻理解MVVM设计模式的优势，对于缩短Web的开发周期和提高程序员的开发水平具有现实意义。

1 Web系统的构成

数万个Web站点透过超级连接（Hyper link）实现了全球资源的互相连接，每个站点都设计了自己的主页（Home Page）。从技术角度上说，环球信息网是Internet上支持WWW协议和超文本传输协议HTTP（Hyper Text Transport Protocol）的客户机与服务器的集合，他们共享的超媒体文件包括了文字、图形、声音、动画、资料库、以及各式各样的软件。因此Web系统包含三个主要的要素：客户机、服务器、传输协议。

1.1 客户机

客户机是运行在信息需求方主机上的应用进程，它主动向服务器发出请求，等待接收服务。它除了向Web服务器发出请求外，还可以向诸如Gopher、FTP、news、mail等多种服务器发出请求。目前Web客户机被统一设计为浏览器，浏览器是多种观察器的集成应用，它可以解释执行从服务器上下载下来的特定类型的文件。通常客户机的任务包括：1）通过超级链接触发一个服务请求；2）将该服务请求发送给指定的服务器；3）将从服务器上下载下来的网页解释呈现。

1.2 服务器

服务器是运行在信息提供方主机上的应用进程，服务器被动等待客户机请求，提供信息應用服务。一个Web服务器的主要任务如下：1）接受请求；2）检查请求的合法性，包括安全性屏蔽；3）针对请求获取并制作网页，其包括Java脚本和程序、CGI脚本和程序、HTML文本；4）把信息处理结果以网页形式发送给提出请求的客户机。

1.3 协议

协议是客户机与服务器之间实现互操作性或传递文档的各种方法的定义。HTTP（HyperText Transfer Protocol）协议是为了传递超文本标记语言HTML（Hyper text Markup Language）而诞生的，它使用统一资源定位器URL（Uniform Resource Locator）来确定文档在环球信息网上的“地址”。HTTP协议的特点是：单向访问、无连接和无状态（连接本身不带有上下文信息）。

2 Web前端开发技术与开发模式的演化

Web开发技术的演化是由用户需求和计算机技术的发展双重动力作用的结果。Web开发技术最早由TimBerners-Lee 创建的一种新的语言HTML来传输和呈现超文本文档开始， 之后人们又希望网页能够生动起来，于是JAVA编程语言应用在Web中，使得主页具有动态效果。为了提高开发效率和效果，前端开发技术经历了“后端开发为主→前端开发为主→前后端分离”的开发模式变迁路径。

2.1 后端开发为主的模式

早期网页开发由后端主导，起初制约web开发偏重后端的因素很简单，一方面，因为前端浏览器性能弱、标准化低；另一方面，客户端应用需求也较低，前端只是简单操作一下DOM元素。最初web仅仅是一个信息管理系统，其核心对象之一就是文档（document），而不是叫做app或者canvas，或者world，文档的链接并不需要持续的交互，只需要一次性能够下载文档即可。因此，网页的开发只需要用HTML将文档内容按照标题、段落等标签组织起来就可满足需求，因为HTML的标签可以控制文档的样式。

2.2 前端开发的诞生

随着Web的应用，早期的document进化成了Web Page， 前端需要更好的排版，于是CSS诞生了，它实现了web结构与样式的分离；同时，为了使客户端能获得简单的数据校验能力和dom的操作能力，js诞生了，赋予了web页面处理自身行为的能力。

在技术上，1999年W3C发布了第四代HTML标准，同年微软推出用于异步数据传输的ActiveX，随即各大浏览器厂商模仿实现了XMLHttpRequest对象。这标记着Ajax的萌芽，但是Ajax这个词在六年真正问世的，谷歌使用Ajax技术打造了Gmail和谷歌地图之后，Ajax获得了业内巨大关注，2006年，XMLHttpRequest被W3C正式纳入标准。Ajax是Web网页迈向web应用的一个里程碑技术， document的内容可以被替换了，前后端的交互摆脱了document à http request à new document的单一模式。标识着Web2.0时代的到来。

2.3 前后端分离的开发模式

因为前端计算能力的大幅度提升，前端能力的大量过剩，使得越来越多的业务逻辑向前端迁移，后端将不再接触任何HTML和模板，只负责数据的提供，剩下业务逻辑的事交由前端完成。后端将一部分计算压力迁移给了前端，越来越与业务逻辑无关，后台被抽离出来，抽象成了云服务。后端就变成了一个数据库和权限系统，也就促成了后端云服务化。endprint

2008年，谷歌V8引擎问世，一举改变了浏览器计算力不足的困境，现代浏览器开始崛起，终结了微软的垄断时代。浏览器性能的大幅度提升，使得前端计算能力一下子变得过剩了，这也意味着前端应该承担起更多业务工作了。标准组织也在2009年发布了第五代javaScript[1]；2014年，发布第五代HTML标准，前端的装备得到了前所未有的提升，web前端开发进入了令人目不暇接的新时代。除此之外，2009年Angular.js誕生，随后被谷歌收购。2010年，backbone.js诞生。2011年，React和Ember诞生。2014年，Vue.js诞生……

前端开始承担越来越多的业务压力，开发的复杂度也在逐步上升，如果依然保持原有的单纯对dom操作的开发模式，将使得前端开发效率低下，代码难以维护。所以前端需要变得模式化、模块化、工程化。“数据绑定”、“深入响应式”、“虚拟dom”等前端新概念开始提出。于是各种前端构建工具开始诞生，各种前端框架雨后春笋般问世，前端开发工具一时间从“石器时代”开始向“工业时代”迈步。

在如今，前端主流框架主要由Angular，React.js、Vue.js三足鼎立。React.js专注view层，而新版Angular和Vue.js都分别用不同的方式采用了MVVM的模式来实现其的核心逻辑。对于web前端来说，MVVM设计模式契合如今前端开发的需求，MVVM模式也将引导前端开发趋势。

3 MVVM设计模式特征

MVVM（模型-视图-视图模型）起源于MVC和MVP的架构模式，ViewModel大致上就是MVP的Presenter和MVC的Controller，但是不同的是View与ViewModel之间不存在MVP的界面接口，而是采取的直接交互，利用数据“双向绑定”的形式让数据更新不需要开发人员手动去调用触发，而是自动的双向同步，减少了对DOM的频繁操作。MVVM的设计模式更清晰地将用户界面（UI）开发从应用程序的业务逻辑与行为中分离。利用声明式数据绑定来实现View层工作从其他层分离。

3.1 MVVM设计模式推出的前提

随着前端应用的复杂程度逐渐上升，这时前端开发开始暴露出了三个痛点：首先，开发者在代码中大量调用相同的DOM API，操作冗余繁琐，代码维护性低；其次，大量的DOM操作使得页面渲染性能降低，加载速度变慢，用户体验降低；最后，当 Model 频繁发生变化，开发者需要主动更新到View ；当用户的操作导致 Model 发生变化，开发者同样需要将变化的数据同步到Model 中，这样的工作不仅繁琐，而且很难维护复杂多变的数据状态

3.2 MVVM的组成

MVVM由Model、View、ViewModel三部分组成，Model层代表数据模型，View层代表UI组件，ViewModel则是一个同步Model和View的对象。

1） MODel。和其余的MV*家族的成员一样，MVVM中的Model（模型）管理着应用程序的数据，可以在Model中定义数据修改和操作的业务逻辑，Model不涉及用户界面，也不涉及表示层。它们不会影响数据在浏览器里的显示方式。

2） View。与MVC一样，View为与用户交互的应用程序的一部分，负责将数据模型转化成交互式UI展现给用户，描绘ViewModel的状态。MVVM的主动View包括数据绑定、事件和行为，需要对ViewModel有了解。虽然这些行为会被映射到属性里，但是View层仍只负责处理ViewModel的事件。View并不负责处理状态，仅仅只是时刻让状态保持与ViewModel同步。

3） ViewModel。ViewModel（视图模型）是MVVM模式的核心部分，可以把ViewModel看做为一个专门的Controller，充当View与Model之间的数据转换器。它将Model的信息转变成View信息，还将命令从View传递到Model上。

在MVVM架构下，View和Model并没有直接的联系，而是通过ViewModel来交互。View与ViewModel的交互是双向的，因此view的变化会同步到Model上去，而Model的数据变化也会立即反应到View上去。

ViewModel通过双向的数据绑定连接View层与Model层，View与Model之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM， 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。

4） MVVM的优势

实现双向数据绑定是MVVM的最重要优势。在前端开发的时候，获取数据后，会将数据渲染到视图上。然后在每次数据发生改变的时候，将重新进行渲染，从而更新视图，使得视图与数据保持一致。而另一方面，页面也会通过用户的交互，产生状态、数据的变化，这时需要将视图对数据的更改同步到数据中去。在不同的前端框架中，实现双向数据绑定的技术有所不同，典型的做法如下：

5） Angular采用了一种“脏值检查”的方式，当数据发生变化之后，对所有的数据和视图的绑定关系进行一次检测，检测是否有数值发生了变化，有变化的进行处理，但是可能引发其他数据的改变，所以可能会导致这个过程触发多次循环，一直到数据不再有变化的时候，将变更好了的数据发送到视图，更新视图的展现。

6） Vue.js则采用了ES5提供的Object.defineProperty（）方法，监控对数据的操作，从而可以自动触发数据同步。由于是在不同数据上触发同步的，可以精确的把变更发送给绑定的相应视图，而不需要循环所有的数据监测。

由于双向数据绑定，开发者只需要在View层的视图模板上声明数据绑定、事件绑定后，在ViewModel中进行业务逻辑的数据处理。开发者只需要关注业务的逻辑，完成数据抽象、聚焦于数据的处理之中。因为数据驱动，一切变得简单。

4 结束语

前端MVVM已成趋势，是大型web应用开发效率提升的大利器，是前端迈向模块化、工程化的一个重要的设计思想。回顾Web的发展历史，就是对web编程的抽象层次不断提高的一个过程，更高的抽象层次降低了编程的复杂性，提高开发效率，编写易迭代、易维护的代码。每次技术发展到一定阶段，新的技术需求产生，出现某些局限性的时候，就会有更优秀的技术来突破这些局限性。其实这是计算机技术发展的一个普遍规律，需要所有的开发者一同面对这一次次严峻的技术考验，迎接这一次次的新技术浪潮。

参考文献：

[1] Addy Osmani. javaScript设计模式[M]. 徐涛， 译. 北京： 人民邮电出版社， 2013.endprint