一种基于移动框架的模块化构建方法技术

本发明专利技术公开了一种基于移动框架的模块化构建方法，分别定义自身页面模块的依赖关系，当用户请求某个页面时，页面的Controller指定需要载入的页面，不需指定该页面要依赖哪些模块，这些需要载入的模块会由加载的Loader自行计算得到；然后，Loader会与服务器端交互，将所需模块分组、合并与压缩，再并行下载到请求下载的浏览器上。本发明专利技术将每个页面分成多个功能进行分块化处理，这样既可快速的实现移动端的页面获取，也可在移动端调试的时候快速定位相关问题；保证了各个模块之间不发生冲突，提高了开发人员的编码效率。

A modular construction method based on mobile framework

The invention discloses a method for constructing modular mobile framework based on defined dependence of their own page module, when a user requests a page, the page Controller specifies the need to load the page, the page will not specify which modules need to rely on, these modules will be loaded by loading Loader to calculate by then, Loader; will interact with the server, the required modules grouping, combined with compression, and then parallel download to download request on the browser. In the invention, each page is divided into a plurality of function block processing, which can realize mobile terminal page, also can quickly locate relevant problems when debugging in the mobile terminal; the conflict does not occur between each module, improves the encoding efficiency of developers.

【技术实现步骤摘要】
一种基于移动框架的模块化构建方法
本专利技术涉及在移动互联网环境下html5模块化构建技术，具体说是针对电力信息微应用html5前端的一种基于移动框架的模块化构建方法。
技术介绍
前端模块化开发就是将网站的前端按照布局和功能分成若干个模块，每个模块完成特定的功能，然后将所有模块按一定组织方式形成一个整体，完成整个系统的功能。这样就极大地降低了程序员开发时彼此之间的干扰，更加有利于多人协同开发。而且，基于前端模块化开发技术的应用还具有提高网页浏览速度、高效组织与维护网络信息资源、减少代码冗余等优点。为解决前端模块化开发技术发展过程中遇到的种种问题，出现了一些开发工具，如：CSSSprites、UICompressor等。为提高前端模块化开发效率，又出现了一些javascript组件库，如JqueryUI、YahooUILibrary、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工具，依据设定文件将所需模块合并及最小化，这样只需一个请求，就可以得到请求页面所需的所有模块，解决了传统模块化开发中请求数量过多和内容未压缩的问题。虽然页面级的模块化开发策略有效地解决了请求数量及压缩问题，但仍存在很多问题。首先，不易维护。当需要移除一个页面时，该页面所依赖的模块也应全部移除，可是又不能百分之百确定别的页面不会用到将要移除的依赖模块，最终导致模块越积越多。其次，线上调试非常困难。因为发布的是混淆后的代码，几乎无法实现调试。因此，还需要通过进一步调整开发策略来解决问题。由此可见，现在的前端模块化开发已经发展成为一个系统工程，开发人员必须从多方面考虑，多角度分析，从细节做起，共同协作才能实现前端模块化开发的目标。目前，国内只有腾讯、百度、新浪、豆瓣等少数几个网站设计了自己的前端模块化开发框架结构，拥有自己的开发策略，但这些公司对于前端模块化开发技术的运用也不是很娴熟。因此，对前端模块化开发策略的研究还是非常必要的。
技术实现思路
本专利技术的目的是提供一种基于移动框架的模块化构建方法，该方法根据网站前端模块化的不同开发思想，将每个页面分成多个功能进行分块化处理，这样既可快速的实现移动端的页面获取，也可在移动端调试的时候快速定位相关问题。通过定义多个模块来相互调用，既保证了各个模块之间不发生冲突，又提高了开发人员的编码效率。本专利技术的目的通过以下技术方案实现：一种基于移动框架的模块化构建方法，其特征在于：该方法分别定义自身页面模块的依赖关系，当用户请求某个页面时，页面的Controller指定需要载入的页面，不需指定该页面要依赖哪些模块，这些需要载入的模块会由加载的Loader自行计算得到；然后，Loader会与服务器端交互，将所需模块分组、合并与压缩，再并行下载到请求下载的浏览器上。该方法具体如下：1）Base路径解析规则（11）不可使用顶级标识，base本身只能使用相对标识或根路径；相对标识：相对于当前页面解析，在哪里被引用，相对的解析位置视被引用的地方而定，遵循当地的规则；paths中的字段会被以变量的方式在被使用的地方替换，然后再解析；（12）base默认路径为跟目录，手动设置base路径；2）alias中路径解析规则（21）alias的规则类似于paths，并且alias路径使用paths中的“变量”；（22）paths、alias中使用顶级标识、根路径、绝对路径，不要使用相对标识；3）模块定义使用的API只有define,require,require.async,exports,module.exports这五个，4）模块获取在模块中，定义了一些模块方法或者属性，对外提供属性或者方法，让外部方法来调用，使用exports.xx对外提供属性或者方法；5）逻辑处理对于任何一个应用，涉及逻辑处理的地方很多，不能把所有的代码写在一个页面中；搜索需要定义一个模块search.js,内容需定义一个模块content.js,顶部定义一个模块bottom.js,逻辑必须处理完毕后，再新建一个index.js,在index.js里面按顺序引用三个模块的内容，做到清晰、完整、完美、漂亮的代码抒写。本专利技术中，模块级的模块化开发，是指开发人员分别定义自身页面模块的依赖关系，即每个页面所需模块的设定，而不是像页面级模块化开发那样记录在一个中央设定文件中。当用户请求某个页面时，页面的Controller会指定需要载入的页面，但不需指定该页面要依赖哪些模块，这些需要载入的模块会由加载的Loader自行计算得到。然后，Loader会与服务器端交互，将所需模块分组、合并与压缩，再并行下载到请求下载的浏览器上。随着网站前端功能日渐增多且更新频繁，前端开发技术受到越来越多公司的重视。根据网站前端模块化的不同开发思想，将每个页面分成多个功能进行分块化处理，这样既可快速的实现移动端的页面获取，也可在移动端调试的时候快速定位相关问题。通过定义多个模块来相互调用，既保证了各个模块之间不发生冲突，又提高了开发人员的编码效率。针对多个模块化的调用，区分较复杂，所以在建立不同模块化的同时，必须严格规定模块名称及其信息。具体实施方式一种基于移动框架的模本文档来自技高网...

【技术保护点】
一种基于移动框架的模块化构建方法，其特征在于：该方法分别定义自身页面模块的依赖关系，当用户请求某个页面时，页面的Controller指定需要载入的页面，不需指定该页面要依赖哪些模块，这些需要载入的模块会由加载的 Loader自行计算得到；然后，Loader会与服务器端交互，将所需模块分组、合并与压缩，再并行下载到请求下载的浏览器上。

【技术特征摘要】
1.一种基于移动框架的模块化构建方法，其特征在于：该方法分别定义自身页面模块的依赖关系，当用户请求某个页面时，页面的Controller指定需要载入的页面，不需指定该页面要依赖哪些模块，这些需要载入的模块会由加载的Loader自行计算得到；然后，Loader会与服务器端交互，将所需模块分组、合并与压缩，再并行下载到请求下载的浏览器上。2.根据权利要求1所述的基于移动框架的模块化构建方法，其特征在于该方法具体如下：1）Base路径解析规则（11）不可使用顶级标识，base本身只能使用相对标识或根路径；相对标识：相对于当前页面解析，在哪里被引用，相对的解析位置视被引用的地方而定，遵循当地的规则；paths中的字段会被以变量的方式在被使用的地方替换，然后再解析；（12）base默认路径为跟目录，手动设置base路径；2）alias中路径解析规则（21）alia...

【专利技术属性】
技术研发人员：王全强，张斌，陈亮，孙竹君，
申请(专利权)人：江苏电力信息技术有限公司，国网江苏省电力公司，
类型：发明
国别省市：江苏,32