基于Ext JS框架MVC模式的复用技术研究

周 玉，闻金华，徐建良

(中国海洋大学 信息科学与工程学院，山东 青岛 266100)

0 引言

复用概念的首次提出是在1968年NATO软件工程会议上，在其后的发展过程中，有许多复用技术的研究成果和复用实践活动[1]。目前国内外对复用技术的研究很热门，但较多的研究是顶层设计和后端的软件复用技术。文献[1]中提出了软件构件技术在软件复用中的应用；文献[2]中提出构件通用型MVC模式的设计方法；文献[3]中提出组件级的建议，能更精确地提供可重用的代码；文献[4]中通过搜集开源代码软件开发的数量和质量研究代码重用。而对前端的复用技术的研究也仅限于通用组件化的研究，文献[5]中实现了一种声明式组件开发的前端库，使组件可以方便地迁移到其他项目中去。

后端复用技术已经趋于成熟，而随着系统业务逻辑和用户与系统交互量的增加，前端页面的复杂度和代码规模呈现数量级式增长，这样就造成了一个普遍的问题——效率问题，包括前端代码的加载次数、页面的渲染时间、浏览器加载时间等。据相关数据显示，前端代码整个运行加载的时间占整个系统的70%以上[6]。所以，前端代码的优化在提高整个系统的效率上会有事半功倍的效果。因此，前端应用的软件复用技术成为研究热点。针对前端复用技术的研究，仅仅有良好的顶层设计是远远不够的[6]，如何在系统中进行具体的融合和应用，是真正解决问题并产生实际意义的关键。

本文在成果管理系统重构的基础上，严格遵循重构设计原则，在满足系统已有功能的前提下，运用MVC设计模式、OOP思想，将系统现有的前端框架Ext JS 2.0升级，采用全新的 Ext JS 4.2 重新编码，将系统代码进行重构。

成果管理系统是对研究成果进行管理的系统。研究成果有3种，即论文、专利、奖励。对每一种成果进行添加、修改、查看、删除、查询和审核等操作。随着业务的扩展，又增加了对软件著作权、标准、品种和著作4种成果的管理。在目前的成果管理系统中，对每一种成果进行分别管理，开发过程彼此独立。不难发现，不同成果有很多相似信息，而且对每一种成果的操作是一样的。这样就造成了在不同的成果代码里有很多重复的代码，不仅占用了很多空间，而且导致代码读取速度慢，响应时间长。并且在面对增加4种新成果的用户需求时，会导致很多重复的工作，可维护性降低。

鉴于系统中的上述特点，充分利用Ext JS框架引入的MVC模式和OOP思想进行模型设计和编程。MVC模式提供了一个完善的代码组织和维护的方向，将系统分解为模型、视图、控制器三部分[7]，每一部分都相对独立，职责单一，在实现过程中可以专注于自身的核心逻辑。其基本思想就是“关注点分离”。面对多种成果相似度较高又分属不同组件的情况，将系统分解成一些相对独立的、具有高度复用性的模块组合[8], 既减少了冗余的代码,也具有了对将来产生的问题和需求的通用性。使用OOP思想来对实体进行抽象，利用继承和封装的方式进行编程，是提高软件生产效率和质量的现实可行的途径。因此，基于Ext JS框架MVC模式的复用技术是值得研究的。

1 模型的复用技术

1.1 构建抽象模型及继承层次

模型是应用程序提供信息存储的对象。因此，良好的模型设计在系统的数据传输中占有很重要的地位，在OOP里的继承概念是一种重用已有对象代码的方式[9]。在Ext JS应用程序中，使用OOP思想，模型初步设计的UML类图如图1所示，为每一个实体构建一个Model。从图1可以看出，模型重复字段的书写，导致代码规模大等问题。针对这个问题，提出了为成果和成果完成人分别构建一个包含共同字段的抽象模型，3个成果的特定模型继承成果抽象模型，论文和专利的成果完成人特定模型继承成果完成人抽象模型，而奖励完成人因为没有特殊字段，所以直接使用成果完成人抽象模型，从而实现复用技术在成果系统中的应用。改进后的UML类图如图2所示。

图1 初步设计的UML类图

图2 改进后的UML类图

1.2 初步设计和改进后的模型对比

通过构建抽象模型和继承层次，由图1改进到图2所示的模型，根据成果管理系统用Firfox浏览器的测试，初步设计和改进后的模型设计的文件大小和加载时间的对比如表1所示。

由于服务器响应时间和网络传输原因，测试的数据可能存在误差，表1的数据是多次测试数据的平均值，从表1可以看出，虽然改进后的模型多了两个抽象模型，但是其他模型的代码规模均减少，所以总体来看，文件大小和加载时间都有接近一半的缩小，提高了系统的执行效率，降低了代码规模，这对于精简和优化前台代码有重大意义。

表1 文件大小和加载时间的对比

在面对增加4种新成果的用户需求时，改进后的模型的优越性更加突出。只需要构建这4种成果的特定模型；成果完成人只有著作成果有编者角色的特殊字段，所以只需要构建一个著作完成人的特定模型。这样，既减少了重复的代码和工作量，也提高了系统的可重用性和可维护性。

在系统的列表界面，需要通过Window的形式展示独立的成果完成人的Grid。那么，此Grid的另一位开发人员可以直接引用这里创建的成果完成人的抽象模型和特定模型，有助于团队之间的协作。

2 封装通用面板

2.1 成果录入面板引用通用面板

视图层是影响用户交互体验的直接因素，面板复用是减少页面渲染时间的有效途径。所以，在成果系统中，以成果的录入面板为例，由初步设计一个面板对应一个View，改进到由图3所示的面板类图。封装了通用面板OwnerGrid、ProjectGrid、PlatformGrid和AbstractBasicInfo供3类成果录入面板复用。由于论文成果相对于其他成果多了一个收录情况，因此为论文成果创建了特定面板PaperAddForm，其他成果的录入面板通过AbstractAddForm创建，使AbstractAddForm被扩展成了能表示3种成果的录入面板，而3种成果的特定信息放在各自的BasicInfo面板中。

图3 成果录入面板引用通用面板类图

2.2 封装通用面板的优化体现

不同复用角度优化体现：

(1)从3种成果录入面板引用通用面板角度，减少了2次AbstractAddForm、2次OwnerGrid、ProjectGrid和PlatformGrid、2次AbstractBasicInfo的重复代码，同时在时间上减少了450 ms。

(2)从创建3种成果编辑面板角度，只需要创建一个包含3个Button的AbstractEditForm面板，引用封装好的通用面板即可，这样录入面板和编辑面板几乎可以同时完成。

(3)从面对增加4种新成果的用户需求角度，只需要创建4种成果特有信息面板，既减少了成倍的代码和工作量，又提高了系统的可扩展性。

(4)从系统中其他面板角度，有需要通过Window的形式展示独立的成果完成人的Grid、所属项目的Grid和所属平台的Grid。上述 Grid的另一位开发人员可以直接引用这里封装好的通用面板，体现了高内聚、松耦合的特性。

3 封装通用控制器

3.1 通用控制器的监听和通用方法实现

控制器在MVC框架中充当了粘合剂的角色，是一系列事件处理器函数的集合。所以，在时间的占用上起关键作用。因此，提高系统的响应速度，控制器占有举足轻重的地位。改进前的控制器设计是一个面板对应一个控制器，导致重复功能的监听和实现。改进后的通用控制器是对多个成果视图的统一控制。以添加界面的保存监听方法为例，通过继承方式构建的通用面板，其xtype为abstractaddform, 因此通用选择器的监听如图4所示。

图4 通用选择器的监听

通用控制器的通用方法，根据成果类型和组件关键字等，自动配置成所需面板的功能。以3种成果使用同一个保存成果方法为例，保存成果的通用方法的主要代码如图5所示，其中有两个重点，分别用文本框标出:(1)取得要保存的数据，这个getData方法也是一个通用方法，通过传递的3个关键字来判断取何种成果的数据；(2)把URL通过achievementType变量的形式扩展成3个成果通用的URL。

图5 保存成果的通用方法

这样只用了一个通用的监听和方法，就实现了3种成果的保存功能，为保存面板数据提供了通用功能。

3.2 升级通用控制器

为了尽可能地简化和复用方法，在一个控制器里实现有相似功能面板的通用功能[9]。采用组合机制(mixins)对通用控制器进行了升级。以添加、查看和编辑为例，升级的通用控制器如图6所示，不仅使3种成果的添加、编辑和查看视图统一控制，而且通过mixins方式将组合通用方法融入到3种通用控制器。

表3 升级的通用控制器文件大小和加载时间

图6 升级的通用控制器

3.3 升级的通用控制器和改进前的控制器比较

(1)从3种成果方面，再次升级的通用控制器，使3种成果的同种功能只需要一个通用控制器来实现。这就使得文件大小缩小为1/3，文件的缩小，必然会使加载时间变小。而改进前的控制器则会导致不同成果的控制器功能重复。

(2)从组合通用方法方面，每个通用控制器只需组件监听，调用mixins融入的组合通用方法即可，使得通用控制器的大小缩小。而改进前的控制器则会导致添加和编辑、编辑和查看之间功能的重复。

(3)后期加入4种新成果，控制器层不用写，为维护人员省略了最复杂的部分；更重要的是，增加新成果，改进前控制器的时间和大小会随之成倍地增加，而升级的通用控制器的时间和大小是不变的。

表2 改进前控制器文件大小和加载时间

4 结 论

本文研究了基于Ext JS框架MVC模式的复用技术，使代码得到精简和优化。构建抽象模型及其继承层次，减少了前端代码的加载时间，同时提高了系统的可重用性。封装了通用面板，减少了代码的冗余，明显缩短了页面渲染时间。又封装了通用控制器，实现了最通用的代码，通用控制器采用组合机制进行升级，解决了多个控制器监听重复功能的问题，使创建新的界面也变得更加容易。

这种基于MVC的复用技术适用于所有基于Ext JS的具有相似信息的前端界面。用成果系统进行测试，将30个具有共同信息的列表缩减为3个通用列表，整个成果系统的前端代码由8.11 MB缩减为4.36 MB，显示了此方法的切实可行和优越性。此方法使基于Ext JS框架MVC模式复用技术研究前进一小步，使软件生产效率和质量显著提高。

下一步主要工作是继续研究更多可复用的技术，构建基于Ext JS4.2的复用框架。

[1] 杨芙清,梅宏,李克勤.软件复用与软件构件技术[J].电子学报,1999,27(2):68-75， 51.

[2] 刘亮,霍剑青,郭玉刚,等.基于MVC的通用型模式的设计与实现[J].中国科学技术大学学报,2010,40(6): 635-639.

[3] OHTANI A,HIGO Y, Ishihare T,et al.On the level of code suggestion for reuse[C]// IEEE International Workshop on Software Clones IEEE.2015.

[4] HAEFLIGER S, KROGH G V, SPAETH S. Code reuse in open source software[J]. Management Science, 2008, 54(1): 180-193.

[5] 戴翔宇.Web前端工程组件化的分析与改造[D].长春:吉林大学,2016.

[6] 王悦.基于Extjs4的Web前端框架设计与应用[D].青岛:中国海洋大学,2015.

[7] VILLA C,GONZALEZ A.Learning Ext JS 4[EB/OL]. (2013-01-25)[2017-6-25]https://www.packtpub.com/web-development/learning-ext-js-4.

[8] CHEN L Y,QING G.Research on framework developing technology based on MVC[J].Advances in Information Sciences and Service Sciences, 2011,3(3): 25-31.

[9] GRONER L.精通Ext JS(1版)[M].卢俊祥,译.北京:人民邮电出版社,2014.