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

引言

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

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

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

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

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

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

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

2.1 传统模块化开发策略

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

这样作看上去简单易行，却存在不少问题。首先会出现大量模块，不但不便于管理，还会使请求数猛增。例如一个页面有四个模块，那就至少会产生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两个模块。全部页面和其所依赖的模块关系都由开发者写在页面级的设定文件中。当某个页面请求其所需模块时，经过一些工具，例如Mini工具，依据设定文件将所需模块合并及最小化，这样只需一个请求，就能够获得请求页面所需的全部模块，解决了传统模块化开发中请求数量过多和内容未压缩的问题。

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

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

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

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

3 结束语

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

【编辑推荐】

1. 前端模块化开发的价值
2. 前端模块化开发那点历史
3. 前端模块化设计思路

转载地址  http://mobile.51cto.com/web-407715.htm