基于移动平台的微应用开发框架技术的研究与应用*

蔡 璟，丁宗银

（江苏电力信息技术有限公司，江苏 南京 210024）

0 引 言

随着移动互联网的迅猛发展，互联网开启了“Web2.0”时代。随着信息化的推进，公众能从多渠道获取信息，以低成本传播，并高效地与之互动。信息化程度的提升降低了社会的不透明度，提高了公众的自我意识。如何充分利用移动互联网技术提高企业管理水平和客户服务质量，成为电网企业信息化建设工作的一项重要课题。

在国网公司的科学领导下，结合移动信息化发展趋势与国内外领先实践，江苏电力信息技术有限公司于2014年承建了国网移动平台的建设。经过2年时间的不断完善，已完成企业级移动信息化规划与顶层设计，重点解决国网各业务部门独立推进移动化带来的缺少战略指引、重复建设、各业务间难以有效集成、标准规范不统一、安全保障与控制力度不足和技术路线多样等问题。目前，移动平台为业务应用提供了大量基础开发组件，包括终端设备访问组件、数据存取组件和网络通信组件等，为移动业务应用提供了统一跨平台开发接口，方便了移动应用的开发。

随着外部环境和内部业务的变化，国网公司提出支撑移动业务应用“短、平、快”的构建要求。项目组针对此要求提出移动应用开发框架的建设，以快捷高效地构建移动应用，提升移动应用的安全性和稳定性。目前，常规的移动开发技术如基于标准的前端HTML5框架，不能够实现动态加载。不仅导致了页面的错综复杂，还消耗了终端设备过多的流量和电量，不利于用户体验。另外，这些框架编程不灵活且耦合性高，尤其涉及到展现处理、文件配置和库的读取等方面时，缺少模块化开发方式。在终端适配方面，由于移动端尺寸多，不同终端需要单独匹配，而不同分辨率需要适配等带来了各种问题。没有统一的标准和框架来制定，使得开发的代码量不断增多且效率低下。同样，移动端缺少公共组件封装（验证插件、弹窗插件、图形插件、下拉刷新上拉加载插件、滑动插件、省市区选择插件、时间插件等），导致开发周期长，可维护性低。

通过构建基于移动应用平台的开发框架，以模块化方式构建移动应用，并提供丰富的表单、图表等移动端常用界面，以便业务应用开发，提高移动应用开发效率，缩短建设周期，降低建设成本。同时，结合移动互联网环境下的特定限制，如网络环境稳定性差、个人移动流量有限等，构建动态加载技术，增强移动应用的可用性和稳定性，通过延迟加载技术提升人机界面的交互顺畅度，提升用户体验。

1 国内外研究水平综述

1.1 国内外研究情况

随着移动技术如火如荼的开展，各大互联网企业都在从不同角度考虑如何降低移动应用的开发成本，打造生态链。通过版本的快速迭代，挖掘用户需求，体现商业价值，并通过构建开发框架提升效率。就国内而言，2015年移动应用开发框架和开发工具发展迅猛，各种开发工具和开发框架层出不穷。快速响应用户需求，降低开发成本，已经成为各大公司的发展方向之一。随着移动应用开发对降低开发成本、降低开发难度的需求日益提升，参照国内外移动开发的经验，应用开发框架化成为解决问题的关键。

1.2 Bootstrap移动应用开发框架

Bootstrap是由Twitter公司发起建设的开源产品。它主要是基于HTML、CSS和JavaScript语言进行开发，在jQuery基础上进行相关改进，形成一套具有独立风格的、用于快速开发Web应用程序和网站的前端开源框架。目前，Twitter官网已全面使用bootstrap框架进行开发。除此之外，如Ghost、Ghost中文网和Laravel等一些优秀的网站，也都使用bootstrap框架进行开发与搭建。该框架的优点是可以快速适配PC端、移动端的界面展示，具有兼容性高、响应式布局和栅格式设计等特点。该框架的不足是无法满足移动应用开发动态加载的需求，而且没有完善的公用组件库供开发调用。

1.3 Amaze UI移动应用开发框架

Amaze UI是由北京美通云动公司开发的国内首款开源跨屏、轻量级和高性能的前端框架。该框架以移动优先为理念，从小屏逐步扩展到大屏，能够适配大部分设备屏幕。结合CSS3技术，实现了动画交互，使得展现效果更加平滑、高效，Web应用加载速度更快。同时，该框架包含丰富的CSS、Js和Web组件，可以快速构建出体验出色的跨屏界面。相比国外前端框架，Amaze UI可以根据用户自行设置代理调整字体和排版，实现更好、更舒适的体验效果。Amazeui官网已经全面采用该框架进行设计。此外，如国内的天狗论坛、我最靠谱和无聊等网站，都采用了Amazeui框架进行开发与设计。该框架的不足也是不具备动态加载技术，且没有模块快构建技术。

1.4 jQueryMobile移动应用开发框架

jQueryMobile是Alexander Schmitz领导的团队开发的开源项目。它主要是在流行的jQuery和用户界面基础上进行构建，为移动应用开发人员提供了一个可在不同移动平台实现界面风格统一的开发框架。jQuery具有良好的兼容性，支持高端设备和低端设备，可为不支持javascript的设备提供最好的体验。该框架还提供一个主题系统，允许开发人员自定义界面样式。jQueryMobile框架目前已经得到了国内外众多网站开发商的认可，如photowise、touch-gallery和coldfusionjedi等知名网站，都使用了JqueryMobile框架进行开发。但是，该框架的不足在于它无法实现不同设备的分辨率和尺寸适配问题，而且不具备动态加载技术。

2 存在的问题

国网公司关于移动应用的构建要求快速，运行时要节省移动端资源，并要能够快速适配不同终端屏幕大小。而目前Bootstrap、amazeui和jQueryMobile等移动应用框架仅解决某一个具体移动应用场景，如Bootstrap仅解决终端屏幕适配，但解决不了构建快速需求。因此，一套经过整合的移动应用开发框架，是移动应用开发人员实现移动应用快速开发并支持应用灵活适配、轻量化运行的前提。

2.1 Web框架的动态加载技术

针对移动互联网环境下的移动端内存、流量、电池资源有限，通过使用动态加载技术，将程序文件打散成多个小文件，以延迟加载技术实现按需加载，以提升用户体验，降低移动端的资源使用率。在业务和样式上，前端开发人员只需要在代码块头部引用需要的插件库和样式代码即可。在逻辑上，开发人员只需调用后端提供的接口进行读取与显示。对于不同项目在不同服务器上有不同的部署要求，这样动态加载成为了一个难点。所以，在模块的引用上，需做到路径的统一与规则的一致。

2.2 模块化构建技术

在前端人员开发移动应用项目的基础上，通过使用模块化构建技术，将每个页面分成多个功能进行分块化处理。这样既可快速实现移动端的页面获取，也可在移动端调试时快速定位相关问题。通过定义多个模块相互调用，既保证了各个模块之间不发生冲突，又提高了开发人员的编码效率。针对多个模块化的调用、区分较复杂，在建立不同模块化的同时，必须严格规定模块名称及其信息。另外，开发人员在创建模块时如何对模块的类型进行分类，成为开发时的难点。

2.3 多分辨率、多尺寸移动终端界面适配技术

针对移动端的各个终端设备，在基于bootstrap框架的基础上，通过媒体查询功能设置统一的样式，通过视窗属性内容、设置等比例窗口，实现了不同手机型号的不同分辨率、不同尺寸终端无法适配的问题，进一步减少了代码的冗余和再次开发。在各种手机型号与尺寸呈现多元化的时代，前端无法做到所有手机的分辨率一致，只能满足部分手机的适配，这将是本框架需要研究解决的难题[1]。

2.4 移动端公用组件的封装

基于bootstrap框架下的一些组件封装的有限性，可通过对时间插件、弹窗插件、图形插件、下拉刷新上拉加载插件、滑动插件、省市区选择插件和提示信息插件等一些插件进行封装，按需调用，按需加载，以做到不同页面引用不同的插件，实现组件的调用，大幅减少前端开发人员的时间，同时提高用户体验。

3 框架设计

3.1 Web框架的动态加载技术

动态加载技术是按照依赖关系的递归执行文档创建脚本库的过程，具体通过获取模块代码方法中的内容去创建其中的脚本以实现动态加载。通过回调函数分段加载，按照依赖就近原则递归执行脚本，从上到下依次加载文件，通过动态加载的文件获取回调函数进行逻辑判断实现分段加载。如此既减少了网络请求，也提升了用户体验。

3.2 模块化构建技术

模块化是按照预先配置、适时加载、主模块调用子模块、子模块再调用依赖模块进行构建的一种技术。业务逻辑的模块化开发，前端开发人员可以定义多个模块来相互调用，而各个模块之间不发生冲突行为。所有用到的插件都必须放在模型层下面，配置别名时直接书写对应的路径即可。其他页面引用时可直接获取，必须严格按照格式来书写，且定义的别名不能重复。

3.3 多分辨率、多尺寸移动终端界面适配技术

研究多分辨率、多尺寸移动终端界面适配技术，将移动端浏览器进行等比设置，按照各个手机尺寸进行等比例加载。在框架开发的代码中，仅需设置宽度和视口设置内容等必须属性，即可适配移动端各个设备、各个型号的手机，做到一套代码多次利用，一套框架适用整个前端。框架设计采用通用样式，用于控制不同的展现形式；可通过修改配置文件里面默认的加载顺序控制展现效果。同时，对弹出效果、用户等待效果和数据加载效果等，做统一展现形式的设计[2]。

Sea.js追求简单、自然的代码书写和组织方式，具有以下核心特性：

（1）简单友好的模块定义规范：Sea.js遵循CMD规范，可以像Node.js一般书写模块代码。

（2）自然直观的代码组织方式：依赖的自动加载、配置的简洁清晰，可以让我们更多地享受编码的乐趣。

（3）Sea.js还提供常用插件，非常有助于开发调试和性能优化，并具有丰富的可扩展接口。

3.4 移动端公用组件的封装

通过扩展原生库的方法合并自定义对象，方便前端人员快速调用。研究时间插件、弹窗插件、图形插件、下拉刷新上拉加载插件、滑动插件、省市区选择插件等插件的封装接口、调用形式和应用规范，确保在各种业务场景下能够直接按需加载进行动态调用，即可方便调用与快速生成。

4 移动应用开发框架功能架构

基于移动平台的应用开发框架功能架构主要包括模型层、控制层、视图层和配置层，如图1所示。

图1 基于移动平台的应用开发框架功能架构

4.1 模型层

模型层主要研究移动端公用组件的封装，使开发人员可以无障碍地调用封装好的插件。基于这些插件，最终实现了代码的简单化、调用的快速化、实现的简洁化和使用的标准化等统一功能编码。移动业务应用可以直接复用，根据业务需求快速组合形成应用界面，缩减应用开发周期。基于模块化定义，将公用的组件以插件的形式放在配置层，按照模块的按需加载进行动态调用，包括时间插件、弹窗插件、图形插件、下拉刷新上拉加载插件、滑动插件和省市区选择插件等。这些插件方便前端人员快速调用，且只需要写极少部分代码就可实现效果，做到了急速开发、效率优先，快速完成一个项目的大部分需求。

主要插件包括如下几种。

时间插件。时间选择作为手机端经常用到的插件之一，方便用户实现时间选择。时间插件基于触摸设备的日期和时间选择器，做到了用户的友好体验。作为一款滑动选择插件，用户可以自定义主题样式。

弹窗插件。弹窗插件用于将应用操作以窗口方式向用户弹出，提醒或警告用户操作。弹窗插件通过自定义对话、确认对话和模态框等类型，以较少的代码量实现快速调用，并支持跨平台，实现与主流移动浏览器统一的用户界面进行显示。

图形插件。图形插件为用户提供丰富的交互图表可视化效果，可实现折线图、柱状图、散点图、饼图、K线图、用于统计的盒形图、用于地理数据可视化的地图、热力图、线图、用于关系数据可视化的关系图、多维数据可视化的平行坐标等，还有用于商业智能的漏斗图、仪表盘，且支持图与图之间的混搭。图形插件支持直角坐标系、极坐标系和地理坐标系，同时提供更细粒度的按需打包能力。它可将图形应用代码按需打包使用，降低了网络交互流量。

4.2 控制层

控制层包括Web动态加载框架和模块化构建容器。

Web动态加载框架，如图2所示。动态加载技术是通过调用框架Js库提供的Use方法进行检查。如果缓存中存在需要获取的模块，则加载该模块，然后通过绑定事件完成回调函数模块的动态加载；如果缓存中没有需要的模块，那么先创建模块，然后通过加载该模块得到模块中的方法和属性。加载模块后检查该模块是否包含子模块。如有子模块，则获取，然后通过绑定事件由里向外传递触发自身事件；如果没有子模块，则直接触发自身事件，然后完成回调函数模块的动态加载。Web动态加载框架通过使用配置文件来实现依赖的自动加载、配置的简洁清晰，可提高可维护性、模块化编程、动态加载、前端性能优化、推崇就近和职责单一原则。以此为基础的开发框架可以做到灵活可配置，降低了开发人员的技术门槛。

图2 动态加载技术流程

模块化构建容器。基于移动平台业务框架的模块进行分类，主要分为流程引擎模块、业务模块和页面模块。前端开发人员基于这几类模块，可自行定义子模块，并相互调用。各个模块的定义只需模块名称不同即可，然后在不同的文件夹、目录、方法中调用。各个模块之间不会发生冲突行为，降低了耦合性，增强了团队的开发效率，同时提升了用户体验。

流程引擎模块。该模块主要是移动业务应用向服务端发送请求时，通过控制器对当前的数据进行存储。当程序开始运行时，该模块能够自动去执行和加载程序，按照步骤和顺序进行加载操作，使当前所需信息返回至当前页面，如图3所示。流程管理器将对当前用户所请求的业务进行分类，且不同业务类型的请求有着不同的分类，业务请求执行的代码也不同。当代码被全部加载执行后，整个页面的请求才会被自动终止。前端开发人员可以灵活设置或定义不同的执行模块，也就相当于给一个模块或者方法定义一个别名。前端开发人员不需要关心每一个流程，只需要知道当前的配置和定义即可。

业务模块。当前模块是实现与服务端交互的定义，不同的模块实现的业务功能不同，结构如图4所示。每个业务包含多个自定义模块和实例，每个模块可以自定义多个方法，相当于当前自定义模块的方法一、方法二之类。各个模块中，模块业务主要实现当前的组件调用、逻辑处理和数据库访问等功能。当各个组件被调用时，当前所需要的功能模块会被展现在页面，而逻辑处理的方法被业务功能所执行到下一步时，才会与服务端进行交互。这里需要访问数据库信息，及时返回给前端开发人员，然后解析输出至页面并显示。基于前端的开发人员主要是定义其中的方法，并处理当前的业务逻辑，最后使用异步请求获取数据来实现页面间的信息展示的一个业务流程。

图3 流程引擎模块结构

图4 业务模块结构

页面模块。作为显示层，页面模块是最重要的框架模块，如图5所示。它主要是从服务端获取数据，然后进行解析，最后在页面展示的一个过程。图5展示了当成功调用服务端的一个方法后，服务端会返回一个实例，这时页面模块通过解析引擎从模块中取出数据，然后将数据进行实例化，并通过页面模块进行解析展示。

图5 页面模板模块结构

4.3 视图层

视图层作为人机交互的重要载体，通过多分辨率、多尺寸移动终端界面适配技术，基于Bootstrap框架，无缝纳入平台的应用开发框架中，同时使用框架中设置的默认字体。由于Bootstrap在终端适配方面已经有所积累且较为成熟，本框架考虑在Bootstrap基础上进行深度定制。具体内容包括如下方面。

栅格系统，是基于Bootstrap提供的一套响应式、屏幕自适应并以栅格系统布局的一套框架。栅格系统是通过一系列行和列组合来布局页面，在创建好的布局中放入网页内容。行必须包含在容器中，以便为其赋予合适的排列和内补。内容必须放在列内，且只有列可以作为行的直接子元素。使用栅格系统可以使前端开发更简单、更快速且更容易上手，便于开发与维护。

响应式布局。在基于Bootstrap框架开发中，通过移动端自适应不同设备的方式来展示当前的页面，动态调整各个设备页面的整体布局与各个元素的样式，使不同尺寸的设备展示的内容整体一致。这样既减少了代码冗余，也节约了开发时间和成本。

可扩展的插件技术。由于Bootstrap本身支持可二次扩展，可通过扩展实现图标展示。而分辨率显示不依赖字体，因此可以扩展一套图标字体在移动设备浏览器上，通过为视口设置属性的内容禁用其缩放功能。禁用缩放功能后，用户只能滚动屏幕，更贴近原生应用的展示效果。

灵活可配置的展现技术。使用此框架中，样式表中设置了默认字体、样式，用于控制不同的展现形式，可通过修改配置文件中默认的加载顺序控制展现效果，同时对弹出、用户等待、数据加载、获取参数等设计，实现统一的展现形式。

4.4 配置层

配置层与模块化构建容器紧密相连，通过对配置文件的详细设计，有效配置框架的公共组件和业务开发组件，提升效率。

5 移动应用开发框架技术架构

移动应用框架技术架构主要包括模型层、视图层和控制层。每层通过不同的表现达到代码的分离和运用。

不同的编程语言，都存在MVC的框架。其中，M（Model）指业务模型，V（View）指用户界面，C（Control）则指控制器。前端使用MVC将各部分代码进行分离，从而使程序开发过程清晰明了。前端开发人员可以用不同的形式展示当前的框架，如统计数据可使用折线图、饼图等形式来展示。视图层随着控制层的改变而改变。“模型-视图-控制器”模式是一个有用的工具箱。基于移动应用开发框架的开发设计过程也遵循MVC设计理念，具体设计过程如下[3]。

图6 移动应用开发框架技术架构

Model层，模型层也称对象属性层，在前端框架中包含了所有的插件库和一些公用的js组件。所以，模型层至关重要，在开发过程中必须被引用在所开发的项目内。应用所用到的js库、样式库以及前端经常使用的时间插件、弹窗插件、图形插件、下拉刷新上拉加载插件、滑动插件、省市区选择插件和提示信息插件等，都放在模型层。

View层，顾名思义就是视图层，即显示相关的静态页面，或者从js库中加载的动态数据。视图层必须严格按照标准形式操作相关代码，不可在视图层出现逻辑相关代码，必须全部是html标签组成的页面。视图层即展示给用户且用户可操作的界面，在整个框架中扮演着重要角色。

Control层，也称为控制层，也就是所有处理业务逻辑的代码必须写在控制层。控制层前端开发人员可以定义自己的模块来获取数据，也可定义不同的模块供其他开发人员调用。控制层根据用户的操作去执行模块的方法。当方法调用服务请求时获取数据，此时控制层解析数据并展示给视图层。因此，每个页面的超链接或者表单的点击事件触发时，控制层本身不会处理任何数据。仅当接收请求并调用模块方法时，才调用服务以展示数据，最后在视图层展现。

6 结 语

本文基于移动平台介绍了移动应用开发框架现状，详细阐述了当前移动应用开发遇到的问题，详细介绍了国网外网移动交互平台移动应用开发所采取的开发框架，提出了包括web框架动态加载、模块化构建、移动终端界面适配以及移动端公用组件等技术的一整套基于移动平台的应用开发框架关键技术。基于移动平台的应用开发框架关键技术的应用，显著降低了移动应用开发难度，缩短了移动应用开发周期，降低了移动应用开发成本，提高了移动应用的可维护性和可拓展性，优化了移动应用开发流程，对基于移动平台的应用开发具有极大的提高与促进作用。需要说明的是，相关技术完全遵循国网公司技术规范，具备在公司乃至网省范围内应用推广的条件[4]。

参考文献：

[1] 王宏斌.企业移动办公的安全接入研究及实现[D].郑州：郑州大学,2011：7-8.WANG Hong-bin.Enterprise Mobile Security Access of Research and Realizing[D].Zhengzhou：Zhengzhou University,2011：7-8.

[2] 吴晨刚,董恒竞,唐勇.基于移动终端的企业信息安全架构设计与实现[J].理论研究,2013(05)：83-84.WU Chen-gang,DONG Heng-jing,TANG Yong.The Design and Implementation of Enterprise Information Security Architecture based on Mobile Terminal [J].Netinfo Security,2013(05)：83-84.

[3] 刘金,甘睿.分析移动办公的网络安全技术方案[J].网络安全技术与应用,2014(04)：122,124.LIU Jin,GAN Rui.The Analysis of Network Security Solution of Mobile Office[J].Network Security Technology& Application,2014(04)：122-124.

[4] 茹惠素.基于HTTPS协议的统一登录系统设计与实现[J].浙江工业大学学报,2008,36(05)：528-529.RU Hui-su.Design and Implementation on Unified Sign System Based on HTTPS[J].Journal of Zhejiang University of Technology,2008(05)：528-529.