网站前端模块化开发策略研究

张晓红

摘 要： 随着网站前端功能日渐增多且更新频繁，前端开发技术受到越来越多公司的重视。一种具有先进开发思想和良好设计模式的前端模块化技术正逐渐成熟。根据网站前端模块化的不同开发思想，详细分析了目前常见的三种模块化开发策略，阐述了每种开发策略的具体实现方法、常见的框架与工具存在的问题及优缺点，并提出了完善前端模块化开发策略的一些方法。

关键词： 网站开发； 前端模块化； 开发策略； 框架

中图分类号：TP319 文献标志码：A 文章编号：1006-8228（2013）02-38-02

Strategy research of Website front-end modular development

Zhang Xiaohong

（Huludao No.1 Secondary Vocational and Technical School， Huludao， Liaoning 125000， China）

Abstract： With the function of website front-end increases constantly and updates frequently， so more attention is paid to the developing front-end technology by more and more companies. A kind of front-end modular technology with advanced development ideas and excellent design model is becoming mature gradually. According to the different thoughts of modular website front-end development， the three current common strategies of modular development are analyzed in detail， and their advantages and disadvantages of specific realization methods are discussed. Some methods， techniques and tools of perfecting front-end modular development strategies are proposed， and the website front-end modular development strategy is presented.

Key words： website development； front-end modular； development strategy； frame

0 引言

当今互联网飞速发展，网络用户的需求变化既快又大，且不可捉摸，大部分网站的更新周期都是以日、小时甚至分钟为单位。在这种情况下，网站的前端就成了变化最频繁的部分。随着互联网公司对前端开发的逐渐重视，前端开发人数也越来越多，可是，技术人员的投入总是有限的。面对需求的快速变化，引发了很多如前端编码规范、前端性能优化、前端安全漏洞防范等方面的问题。为了解决这些问题，一种具有先进开发思想和良好设计模式的前端模块化技术正逐渐成熟，并受到越来越多公司的青睐。

1 前端模块化技术的应用现状

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

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

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

2 前端模块化技术的开发策略

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

2.1 传统模块化开发策略

传统模块化开发首先将每个页面拆分成很多个基本模块，比如logo、导航、内容1、内容2、尾部导航、版权信息等等，然后将每个模块生成一个单独的文件。当页面要求加载时，使用载入CSS[3]，使用载入JavaScript，就实现了前端的模块化。代码如下所示：

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

2.2 页面级的模块化开发策略

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

[模块a] [模块b] [模块c] [模块c] [模块a] [模块d] [模块e] [页面的Loader][服务器][页面A] [页面B] [页面C][设定档] [下载模块]

图1 页面级模块化结构示意图

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

2.3 模块级的模块化开发策略

模块级的模块化开发，是指开发人员分别定义自身页面模块的依赖关系，即每个页面所需模块的设定，而不是像页面级模块化开发那样记录在一个中央设定文件中。当用户请求某个页面时，页面的Controller会指定需要载入的页面，但不需指定该页面要依赖哪些模块，这些需要载入的模块会由加载的Loader自行计算得到。然后，Loader会与服务器端交互，将所需模块分组、合并与压缩，再并行下载到请求下载的浏览器上。模块级模块化结构如图2所示。

[模块b] [模块c] [模块e] [模块a] [模块d] [模块c] [模块a] [页面A][页面B][页面C] [页面的Loader

指定载入A、B、C页面

自动算出还有a、b、c、d、e模块需载入][服务器][自动分散做并行下载]

图2 模块级模块化结构示意图

当前基于这种模块级模块化开发规范的框架有很多，例如RequireJS和YUI3。RequireJS是目前使用非常广泛的框架，只要定义好模块的依赖关系，就会依次将所需模块自动载入，不需做任何配置。而发布到线上时，可以使用Node.js提供的r.js进行合并与最小化。但是，RequireJS仍然存在发布时间偏长和线上调试困难的问题。相比之下，YUI3的Loader下载方式则更加优秀，其使用一种称为Combo Handler的机制[5]，它会将线上文件直接以GET的方式指定路径，进行动态合并及最小化。由于受到GET的长度限制，YUI Loader会根据模块的载入顺序、总数量和当前浏览器的GET长度限制等信息自动将Combo Handler的请求分散为若干个，进行并行下载，这样就解决了RequireJS遇到的问题。

3 结束语

由此可见，依赖当前出现的多种框架及工具，并加以适当修改就可以很好地实现模块级模块化开发策略，从而有效地解决了前端模块化开发中的诸多问题，既便于团队开发，又具有发布快、易于线上调试及维护、提高性能等优点。但与此同时，新问题也在不断涌现，例如页面模块的划分、模块的粒度和模块的继承等都还存在很多问题，这些都需要前端开发人员继续努力去解决，进而完善模块化开发策略。

参考文献：

[1] 张宏森等.基于模块的网页设计技术[J].计算机应用研究，2009.2.

[2] jQuery.http：//jquery.com/.2009-03-26

[3] 张经纬.CSS模块化的理解.http：//www.blue1000.com/bkhtml/2009-02/61778.htm

[4] 熊茜.基于虚拟表示模型的Web页面模块化设计方法[J].计算机应用，2008.25（2）.

[5] Yahoo UI Library.http：//developer.yahoo.com/yui/docs/API（YUILibrary）.htm