[发明专利]一种基于移动框架的模块化构建方法

说明书

技术领域

本发明涉及在移动互联网环境下html5模块化构建技术，具体说是针对电力信息微应用html5前端的一种基于移动框架的模块化构建方法。

背景技术

前端模块化开发就是将网站的前端按照布局和功能分成若干个模块，每个模块完成特定的功能，然后将所有模块按一定组织方式形成一个整体，完成整个系统的功能。这样就极大地降低了程序员开发时彼此之间的干扰，更加有利于多人协同开发。而且，基于前端模块化开发技术的应用还具有提高网页浏览速度、高效组织与维护网络信息资源、减少代码冗余等优点。

为解决前端模块化开发技术发展过程中遇到的种种问题，出现了一些开发工具，如：CSS Sprites、UI Compressor等。为提高前端模块化开发效率，又出现了一些javascript组件库，如 JqueryUI、Yahoo UI Library、mootools等。这些工具和组件库只是在某个方面弥补了前端模块化开发的技术空并提高了工作效率，却并不能完全解决问题。而且，随着前端模块化开发技术的蓬勃发展，网站的大量需求又都转到前端处理，甚至将网页做成交互型应用程序，这个趋势使前端开发代码量急速增加并更进一步增加了前端模块化开发的难度。

前端模块化开发的基本思想与模块化的程序设计相似，即在Web上以模块为基本单位划分与组织信息，将网页的内容分开，形成若干个相对独立的模块。模块只是用来存放基本页面元素的容器，并把常用的页面元素也制成模块，便于这些页面元素的调用与管理。因此，前端模块化技术没有复杂的逻辑运算，而是主要关注 作为骨架的HTML与作为表现层的CSS以及实现行为的JavaScript三方面的拼装组合和代码复用上，以减少它们之间的循环依赖、降低耦合、提高设 计效率。这时就需要有一套有效的开发策略，所有的模块都在这个策略下进行设计，并以此划分工作任务。目前常见的开发策略有以下两种。

1、传统模块化开发策略

传统模块化开发首先将每个页面拆分成很多个基本模块，比如logo、导航、内容1、内容2、尾部导航、版权信息等等，然后将每个模块生成一个单独的文件。当页面要求加载时，使用载入CSS，使用Ajax技术分别载入。

这样做看上去简单易行，却存在很多问题。首先会出现大量模块，不但不便于管理，还会使请求数猛增。例如一个页面有四个模块，那就至少会产生4（个模 块）×2（个类型：CSS/JS）=8个请求，再加上一些函数库，请求就会更多。另外内容未经过压缩也会造成严重的性能问题，阻塞页面显示。其次，这种方式不适合团队开发。

2、页面级的模块化开发策略

页面级模块化开发，指根据不同页面的模块划分情况设定所需的JavaScript与CSS模块。例如页面A，设定header.js、 list.js、info.js、header.css、list.css和info.css六个模块，页面B设定info.css和info.js两个模块。所有页面和其所依赖的模块关系都由开发者写在页面级的设定文件中。当某个页面请求其所需模块时，通过一些工具，例如Mini工具，依据设定文件将所需模块合并及最小化，这样只需一个请求，就可以得到请求页面所需的所有模块，解决了传统模块化开发中请求数量过多和内容未压缩的问题。

虽然页面级的模块化开发策略有效地解决了请求数量及压缩问题，但仍存在很多问题。首先，不易维护。当需要移除一个页面时，该页面所依赖的模块也应全部移除，可是又不能百分之百确定别的页面不会用到将要移除的依赖模块，最终导致模块越积越多。其次，线上调试非常困难。因为发布的是混淆后的代码，几乎无法 实现调试。因此，还需要通过进一步调整开发策略来解决问题。

由此可见，现在的前端模块化开发已经发展成为一个系统工程，开发人员必须从多方面考虑，多角度分析，从细节做起，共同协作才能实现前端模块化开发的目 标。目前，国内只有腾讯、百度、新浪、豆瓣等少数几个网站设计了自己的前端模块化开发框架结构，拥有自己的开发策略，但这些公司对于前端模块化开发技术的运用也不是很娴熟。因此，对前端模块化开发策略的研究还是非常必要的。

发明内容

本发明的目的是提供一种基于移动框架的模块化构建方法，该方法根据网站前端模块化的不同开发思想，将每个页面分成多个功能进行分块化处理，这样既可快速的实现移动端的页面获取，也可在移动端调试的时候快速定位相关问题。通过定义多个模块来相互调用，既保证了各个模块之间不发生冲突，又提高了开发人员的编码效率。

本发明的目的通过以下技术方案实现：