◆严 伟 郭 丹

（北京大学软件与微电子学院 北京 100000）

基于MVC设计模式的前端设计

◆严 伟 郭 丹

（北京大学软件与微电子学院 北京 100000）

随着互联网进入Web2．0时代，网络应用层出不穷，网站的前端也发生着深刻的变革，各种互动流媒体加入进来，网页承载的信息量越来越大。与此同时，更强大的网页交互形式增强了Web应用的用户体验，同时，Web前端技术在近年来伴随着在应用程序的开发也得到了越来越多的使用。Web应用的普遍使用使得用户对网站的期望值越来越高，这直接导致网站前端建设工作量扩大，前端脚本越来越多，随着代码量得扩大，组织与维护变得更加困难，而且，前端脚本较之后端代码得重用性更低，扩展性并不良好。因此，亟待建立合理的前端开发框架。

MVC设计模式；Web前端技术；用户体验

0 引言

Web开发已越来越受到用户的关注，各大公司不只要做好服务器端的开发，而且要最大限度地利用浏览器和客户端资源，做好客户端和服务器间的平衡。此外，Web页面动态交互的需求也在逐渐地增多，带来的后果是处理数据的代码与用于显示的代码重叠交叉，怎样处理好前端代码，使Web应用前端代码结构化，易于理解和维护，成为当前亟待解决的重要课题。如今，网络成为人们获取信息的主要来源，信息成量级增长，网络规模迅速扩张。各种社交平台如微信、微博以及移动端设备的普及，互联网逐渐成为最广泛的传输媒介。但是与互联网的蓬勃发展比较，国内的互联网网络传输质量却被远远落在后边，这使得互联网的数据通信显得捉襟见肋。与此同时，Web站点的用户量急剧增长，在服务器条件同等下，用户的个人体验与Web站点的性能优化程度成正相关。国内更加重视后台和客户端优化，而Web前端优化往往被忽略。但是我们要重视Web前端优化给站点带来的益处。较之后台与客户端优化，Web前端优化消耗资环较少，却可以大幅提高网站的易用性，从而降低了服务器与网络通信的压力。

1 模块化设计思想

随着计算机网络技术的迅猛发展，程序设计思想几经变革，最开始为功能分解法，按照功能进行接口定义，之后是结构化程序设计方法，其中心思想为模块化，即实现对数据与方法的封装。架构设计的难度与软件的规模正相关，因此就要求构建更加高效灵活的开发架构。模块化有利于程序员设计实现，减少BUG。此外，模块化还能降低出错率，提高代码复用性，延长生命周期。

前端设计中，模块化的地位越来越高，它在前端代码的开发与维护，以及代码未来的优化中都显得不可或缺。

2 目前前端开发存在的问题

传统的前端设计里，程序员几乎不会去约定规范，代码既不规范也无法统一，只是对交互效果的简单实现。随着前端交互量的大幅提与用户体验的要求，再按照传统的开发方式去编写的代码，终将会被淘汰。Javascript与传统强类型语言不同，其类型检查并不严格。全局变量的定义很随意，不同程序员的代码整合到一起，很难运行成功，常出现以下问题：

（1）代码复用性很低，相似功能之间代码不能复用，而是重复编写一次，代码冗余严重，网络带宽压力很大，同时，众多的ajax请求严重影响用户的用户体验。

（2）不具规范性，随着站点的发展壮大，程序员之间有着各自不同的代码编写风格，当代码进行拼接整合时，各种问题随之而来。常常造成代码污染，更严重会影响到整个系统的运行。

（3）不具可扩充性。在代码编写过程中，由于程序员的编写风格不同，而且往往不会考虑后续的扩充情况，只是实现现有的功能与交互需求。

（4）代码难以维护管理。传统的前端设计中，往往不具模块化的特点，这导致了代码冗余混乱严重，不利于后期的维护与管理。

基于以上原因，构建能够适应现有需求的前端框架成为业界研究的热点。

3 基于MVC 设计模式的前端设计方案

该前端设计将前端各构件分为Module-View-Controller三层：Module（模型层）负责与数据相关的部分，功能是将数据从服务器端获得，并对数据进行逻辑运算操作，与此同时，因为客户端存在的存储机制，它负责把没有更改过并且需要多次使用的数据存储到本地缓存中。Controller（控制器层）负责整体的调度工作。View（视图层）负责图形界面等显示操作。

本架构将一个Web Appliaction按照不同的功能行为划分为N个互为独立的子功能模块，采用异步加载的方式完成模块之间的通信机制。在Web Appliaction中，如果要实现全部的功能，就需要不同的子模块之间互相配合，每个模块都采用MVC设计模式，由模块间关系可知，在构建架构的过程里，抽象只是针对不同层次之间进行的，并且要尽量做到避免去表达应用的需求，要尽量在最核心构件的的封装上对问题进行思考，要找到其中的共性并进行抽象设计。

本前端设计中，与数据相关的内容由模型层控制。控制器负责整体调度，视图接收交互逻辑处理的结果并显示在客户端。视图层和模型之间不存在直接交互，这正符合展现与数据分离的思想。模型层可以被重复使用，进而减小前端代码的编写数量。

动态获取服务器端的数据由Module层完成，并且根据响应，对数据进行相应的增、删、改、查等逻辑运算。数据存储在模型，因此不必在意控制器与视图，它只是对数据的存储和相应的逻辑操作。任何和这个模型无关的事件处理操作、视图模板都不在其内部存在，实现模型和应用程序其他部分的完全解耦。

View层的功能是展示操作，控制器传给视图层需要的命令，根据控制器的控制命令，View层控制页面的DOM或者XHTML元素生成，利用从控制器传递过来的数据，去渲染前端样式。视图是应用程序和用户的接口，是用户直接可见的部分。这些HTML片段，受到控制器的操作，负责事件响应和数值插入操作。视图是客户端显示的内容相对于服务器端的数据结构上改变最大的部分，这很轻易就破坏了MVC的抽象概念，很容易将逻辑等内容在视图上展现出来。基于MVC的前端架构，仅需要将HTML片段插入服务器端的数据中就可以构建新的显示页面。由于视图层没有数据存取的权限，客户端需要加载模型层，模型层利用Ajax把数据传到客户端。HTML不再由服务器端进行渲染，客户端代理了全部的渲染工作。这就表明，视图的渲染不依赖于服务器端生成。

Controller层位于模型层和视图层之间，负责整体调度工作，它监听事件和视图上的输入，并对其进行相应的处理工作，同时对用户事件进行响应视图。

4 测试结果