基于MVCS模式的组件化手机Web前端的研究与应用

张文胜，陈 宏

（西安欧亚学院 陕西 西安 710065）

目前，随着HTML 5与CSS 3的不断发展，移动设备用Web网站或Web应用程序开发的需求在不断扩大，“基于HTML 5、CSS 3和JavaScript开发的Web网站或Web应用程序才是未来的趋势”这种观点越来越被IT届人士广泛接受，越来越多的IT届人士开始积极寻求一个能够利用HTML 5与CSS 3进行Web网站与Web应用程序开发的框架[1]。

MVC模式（Model-View-Controller）是软件工程中的一种软件架构模式，把软件系统分为3个基本部分：模型（Model）、视图（View）和控制器（Controller）。 MVC 模式的目的是实现一种动态的程序设计，使后续对程序的修改和扩展简化，并且使程序某一部分的重复利用成为可能。除此之外，此模式通过对复杂度的简化，使程序结构更加直观。软件系统通过对自身基本部分分离的同时也赋予了各个基本部分应有的功能。专业人员可以通过自身的专长分组：（控制器Controller）—负责转发请求，对请求进行处理。（视图View）—界面设计人员进行图形界面设计。（模型Model）—程序员编写程序应有的功能（实现算法等）、数据库专家进行数据管理和数据库设计（可以实现具体的功能）。

近五六年以来，各种尺寸的智能手机和平板电脑层出不穷，越来越多的人使用移动设备来访问互联网，这就给前端代码的跨平台性、复用性、易维护性带来了更高的要求。如果有跨平台的复用性好且易维护的框架的话，可以大大提高开发效率。因此前端开发人员也在不停地探索，MVC模型在Web后台开发中应用广泛，实现了展示模块和数据逻辑处理模块的分离。因此很多公司开始借鉴MVC在后端的运用，建立前端MVC架构，代表的框架有ExtJS、BackBone等[2]。

然而，手机移动前端开发越注重用户体验，也越给开发引入了可观的复杂度，让移动前端的开发变得更加困难，增加了发生过失（bugs）的可能性，也加大了软件测试的复杂度，这些复杂化都将延长软件开发过程，开发者不得不付出额外的开发代价去组织和管理自己的架构。

基于MVCS模式的手机移动前端的设计方法提出了解决上述问题的方法，使得前端重构成为可能，采用MVCS的软件设计模式，可以保证代码干净、便于测试、容易维护。

除此之外，此模式还支持组件化编程，组件化的基础是面向对象，在面向对象编程的基础上将一个或多个小部件封装到一起，成为一个模块，让其成为一个新的组件（适合我们需求的组件），每一个模块都应当具备单独运行的能力。组件化编程是面向对象的技术的一种近一步的发展延伸，类的概念仍然是组件技术中一个基础的概念，但是组件技术更核心的概念是接口。

本文以图书信息系统为例，给出了基于MVC模式的组件化的手机前端的原理及其实现步骤，并使之标准化，让开发者更加专注于核心JS代码的开发，减少花费在编写界面、组织代码等重复性的工作上的时间。同时，将MVCS模型与MVC模型进行对比，验证MVCS的有效性。

1 组件化移动前端设计思想

手机Web前端应用是移动互联网应用的最佳形式，但是随着系统版本的不断升级，设备的差异不断增大，移动客户端应用开发同样面临着与Web前端开发一样的兼容性开发效率和维护成本问题。组件化的Web前端设计架构基于Sencha Touch （ExtJS 整合 JQTouch、Raphaël库） 框架， 采用Model-View-Controller-Store（缩写为 MVCS）模式，脚本文件按目录命名约定分类存放，通过“组件化”的方式来配置和管理所需要的软件功能，不仅使代码的组织更加容易和清晰，而且减少代码的编写量，维护更为便捷[3]。

1.1 MVCS模式

MVCS模式的目的是实现一种动态的程序设计，使后续对程序的修改和扩展简化，并且使程序某一部分的重复利用成为可能。除此之外，此模式通过对复杂度的简化，使程序结构更加直观。软件系统通过对自身基本部分分离的同时也赋予了各个基本部分应有的功能。

MVCS模式与传统Web应用的MVC有所不同，传统Web应用中，用户浏览器客户端做低层次的交互，域逻辑主要集中在服务器端，因此，传统Web应用的控制层、视图层和模型层都分布在服务器端。也称为服务器端MVC模式。

而作为手机前端的MVCS模式借鉴了经典的服务器端MVC模式，但存在一些变化，定义如下：

1）模型（Model）是一个域和其数据类型的集合。模型知道如何通过数据包的方式保留它们，并且能够通过关联被其它模型链接。一般与Stores一同使用来给grids或其它组件提供数据。

2）视图（View）文件夹中定义了所有的 widget，每一个widget对应一个类文件。View的代码属于静态代码，可以使用工具自动生成。

3）控制器（Controller）文件夹中的控制器按管理范围的不同划分为不同的类文件，其中每一个控制逻辑都包括初始化、组件事件监听以及引用等。

4）数据存储（Store）就是对通过网络加载数据的过程的一个抽象，Store依赖于Model，通过关联的Model对象来获知如何将取回的数据对象化，以方便View展现，所以View是依赖Store对象的；Store类似于服务器的（DAO）用在服务器端使用的 DAO（Data Access Object）模式[4]。

1.2 MVCS管理依赖项（Dependencies）

应用程序用来定义依赖项的地方主要有两个，application本身和应用程序内部类。当创建一个MVC应用程序时，Ext.application会提供一个直观的方式来设置应用程序会用到的数据模型、视图、控制器、数据存储器和配置文件等，如图1所示。这5个配置项是用来加载应用程序常用文件（数据模型、视图、控制器、存储器、配置文件）的快捷方式[5]。

图1 管理MVCS依赖项Fig.1 Managing dependencies with MVCS

由此可见，运用MVCS模型后，HTML里不再直接写 JS代码，JS按逻辑、职责分门别类存于不同的目录，对应到不同的文件中。各个模块之间需要尽量解耦，使得相互之间尽可能减少依赖，把界面（View）和数据存储模型（Store）进行绑定，使得一方变化的时候另一方也会自动变化。

2 MVCS模式的组件化手机前端的的实现

2.1 图书信息管理的元数据描述模型

首先，设计一个WidgetA，这是一个tab panel用于在Viewport A中显示图书基本信息记录，ModelA定义记录的数据类型。StoreA负责检索从服务器获取的基本图书数据。

那么，当用户从WidgetA点击一条记录，一个窗口将打开，显示的信息的数据类型来自ModelA。当然，这Store将负责从服务器检索相应数据。打开WidgetB，home窗口开启。

同时，ControllerA捕获来自WidgetA的Click事件和加载WidgetA所需数据信息，最终显示对应的图书列表。描述模型如图2所示。

图2 元数据描述模型Fig.2 Metadata description model

2.2 构建应用程序的结构

在应用架构创建的应用时，定义统一的约定，尤其是统一的目录结构。这个结构要求所有类文件都放到app目录下，在该目录下，可根据命名空间划建立 models、views、controllers和stores等4个子目录。严格遵守控制器、数据模型、数据存储、视图这4个文件夹的命名约定，把对视觉界面、交互逻辑和数据的处理清晰地分开，这可以确保可以使用SDK Tools beta对应用进行优化[6]。目录结构如图3所示。

图3 应用程序目录结构Fig.3 The directory structure of the application

2.3 MVCS各个模块的实现

View模块需要构建一个tab Panel组件，将整个界面布局设置为使用Panel面板，并且设置了fullscreen属性为true，应用启动后，首先显示的是Ext.Container，TabPanel的TabBar泊位在应用视图窗口的底部，在点击时，就会切换到对应的容器界面。

Model模块分为BookData和Sectionlist，分别定义书籍信息的基本数据类型和图书列表数据类型。每个模型定义分别包含id、img、name和 items及 products等字段，针对定义字段编写校验规则，如name字段的length，products字段的 format等。

Store模块同样也分为BookDataStore，为数据列表组件提供显示数据。获得数据后还需要通过数据解析器将这些数据进行解析，从而成为客户端认可的符合一定格式的数据。

Proxy（代理）是应用架构从Store，Model加载和保存数据的方法。可供选择的有AJAX、JSON－P和HTML5 localStorage以及其它的代理。这里使用AJAX代理，告诉程序从‘data/book.json’这个url去加载数据。

Controller的目的是监听事件并作出合适的响应动作通常这些事件来是View上面的用户操作。Controller模块Book Controller捕获来自table Panel的Click事件和加载Boo kListing所需数据信息，最终显示对应的图书列表和图片。

Data模块放置资源文件，是应用程序通过 AJAX方式与服务器端交换的数据，返回的数据格式是轻量级的文本数据交换格式json。

每个ExtJS的应用都必须从创建一个Ext.app.Application实例开始，app.js创建一个Application实例并完成初始化。

MVCS模型增加Store（数据存储）的目的就可以使Proxy（数据代理）在Model（模型）与数据之间搭建桥梁，数据代理将在它们之间建立关系，然后通过数据代理进行相关的GRUD（Create， Read， Update， Delete）操作。

Store数据集是一个客户端数据模型对象Model的缓存，它可以为模型组件提供数据输入 （例如：GridPanel、ComboBox、DataView等），Store通过数据代理加载数据，也可以手工调用loadData等方法加载数据，解析后的数据对象缓存在Store数据集中，并通过存取函数进行访问。

此外，此模式还支持访问历史（应用将获得完整的后退按钮功能，其中的任意部分都可以被链接到）、深度链接（深度链接可以打开应用程序中的任意屏幕）、设备配置文件（共享通用代码的同时，轻松为手机、平板电脑还有其他设备定制应用程序用户界面）等。

3 运行结果及分析

本文以图书信息管理系统为例进行分析说明。使用MVCS模型实现了图书信息手机Web前端展示，如图4～图7所示。

TabBar上的两个导航按钮，分别进行主页面和查询页面的切换，如图4和图5所示。

图4 应用程序主页Fig.4 The home page of the application

图5 出版社目录结构Fig.5 The directory structure of publishing house

在应用中，使用动态生成的列表罗列图书的基本信息，可出版社和地区的不同进行自动罗列，处理事件被正确地绑定到每行出版社和地区的单击事件上，然后通过相应单击事件，显示相关书籍的名称和封面图片。如图6和图7所示。

MVCS模式以标准的方式展示数据，降低了开发难度，使整个手机前端代码的规划更规范，前端实时数据的图表和图形的展示更容易扩展和维护，更适合多人协作编写复杂界面。

图6 出版社图书列表Fig.6 Book list of the publishing house

图7 地区图书列表Fig.7 The area agency list of books

本系统使用跨平台的开发框架PhoneGap/Cordova来部署手机应用，这是一个专业的移动应用开发框架，也是一个全面的Web App开发的框架，提供了以Web形式来访问终端设备的API的功能。这对于采用Web App进行开发就可以避免了原生开发的某些功能。Cordova只是个原生外壳，App的内核是一个完整的Web App，需要调用的原生功能将以原生插件的形式实现，以暴露JS接口的方式调用。

4 结束语

本文在MVC的基础上，通过组件化扩展形成MVCS，并通过实际应用给出了实现方法。

MVCS与MVC模型相比，把以前的业务模型拆分成数据模型Model和数据存储模型Store，从数据库的角度讲，Store类封装了一个客户端的记录对象的缓存，为UI组件提供了数据的入口。这是 Proxy、Reader/Writer更细颗粒的职责分工下以及引入Model后必然带来的结果。这样的优点就是Store作为数据访问层就可避免在UI组件里找数据了，通过Ajax技术，把浏览器当作表现层，服务器端当作数据访问层。那么，服务器只通过XML格式或JSON格式提供必要数据就行了，全部的表现可在客户端通过MVCS架构实现，这样就避免了服务器端代码和客户端代码混搭在一起的问题，从而实现了客户端与服务器端的脱钩。

为了便于在不同的移动设备上部署，profile是配置各个平台的一个启动配置文件，如果应用程序需要在不同的平台及不同的设备上运行，则可能需要在此配置每个设备平台的专属配置文件，例如在Android、iPhone或者iPad等平台及设备上。

随着手机Web前端的发展，工程化的特点日趋明显，MVCS在手机Web前端技术的规范化和可维护、可扩展上做了一些探索，在未来的工作中，会进一步对MVCS模式进行优化和完善，提高模块的可复用性、整个系统的容错性和灵活性。

[1]陆凌牛.Sencha Touch权威指南[M].北京：机械工业出版社，2012.

[2]于春娜，王晨升，杨光，等.Web前端MVC框架的意义研究[J].产业与科技论坛，2014，13（1）:52-53.YU Chun-na，WANG Chen-sheng，YANG Guang，et al.Significance of Web in front of MVC framework[J].Estate and Science Tribune，2014，13（1）:52-53.

[3]Sencha Inc.Sencha:The Authority in HTML5 Performance[EB/OL].[2014-01-01].?http://www.sencha.com/products/touch.

[4]张文胜，陈宏.企业级组态式Web前端设计方法研究与应用[J].电子设计工程，2014，22（17）:162-164.ZHANG Wen-sheng，CHEN Hong.The research and application of configuration software in the web front-end design method[J].Electronic Design Engineering，2014，22（17）:162-164.

[5]Sencha Inc.Touch 2.0.2 Sencha Docs[EB/OL].[2014-01-01].http://docs.sencha.com/touch/2.0.2/#!/guide/mvc_depen dencies.

[6]Loiane Groner.Sencha Architect App Development[M].Packt Publishing Limited，2013.