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

肖慧明

(辽宁轨道交通职业学院,辽宁沈阳 110023)

在通讯技术与互联网的不断发展下,网络用户数量也得到了飞速增长。互联网上信息资源的规模正以惊人的速度上升,各类不同种类、不同目的的网站也随之涌现。企业为了达到树立其形象、宣传新产品等目的,纷纷涉足网站建设这一领域。随着相关企业对网站建设的逐渐重视,网站建设的需求也越来越多,大部分网站的更新周期迅速缩减。虽然网站前端开发的人员也在逐年增加,但面对如今行业需求的快速变化,仍然不能很好的解决前端开发面临的诸多问题,一种对思想先进、模式良好的前端模块化开发技术的需求愈演愈烈。

1 网站前端的发展及现状

网站前端的发展日新月异,短短不过10年的时间,已经逐步引领了潮流。如今,网站已演变为互联网应用程序,代码量的爆炸式增长,为了降低开发成本,同时保证代码的质量,网站前端的模块化势在必行。前端模块化开发在于按布局和功能的模块划分,各个模块负责特定功能,所有模块按一定的组织方式形成一个整体。模块化开发的主要目的是为了复用代码、便于维护、代码结构清晰等。前端模块化有利于多人协同开发,降低了开发人员之间的干扰,能够有效提高网页浏览的速度,减少代码的冗余,整合网络信息资源等。网站前端模块化开发已经发展成为一个系统工程,它需要相关人员多角度分析,共同协作。但目前国内只有少数企业设计了自己耳朵前端模块化开发框架结构,拥有专属的开发策略,且对新技术的应用还不够成熟。网站前端的模块化开发仍然任重而道远。

2 模块化开发策略

与模块化的程序设计思想类似,前端模块化开发的基本思想是在Web上以模块作为基本单位,对相关代码等进行组织和划分,各个模块相互独立,负责各自特定的功能。在此种策略下,一个网页可以看作是由一个主模块和若干个子模块构成,主模块相当于程序设计中的主函数,用于存放子模块以及属于自身的页面元素。对网站所需的基本元素进行模块化,方便对其进行调用和管理。由此可见,网站前端的模块化开发技术并不太复杂。在网站建设中,采用一套合理有效的开发策略,对HTML、CSS、JavaScript进行有效的拼装组合,又能减少三者的循环依赖,降低代码的耦合度。常见的几种开发策略包括传统策略、页面级策略、模块级策略。

2.1 传统开发策略

在传统的模块化开发中,需要先将各个页面进行拆分,形成多个基本模块,如LOGO、导航条、尾部导航、版权信息、内容1、内容2等,每个模块生成各自的文件。这样的实现方法虽然看上去简单方便,但是却存在很多的问题。例如,传统的模块化开发策略将产生大量的模块,这样既不便于管理,相应的请求数也会剧增;同时,考虑到大量模块的存在,需要对其进行压缩,但压缩后又会造成新的问题,如容易阻塞页面的显示等。基于以上原因,这种传统的开发策略并不适用于团队开发,需要做出相应的改进。

2.2 页面级开发策略

在页面级开发策略中,根据不同页面的模块划分情况,设定所需要的CSS模块和JavaScript模块,各个页面与其所依赖的模块关系写于页面级的设定文件中。在发生请求时,通过Mini工具将所需要的模块进行合并,一个请求即可得到请求页面所需要的全部模块,解决了再传统开发策略中,因内容压缩和模块过多而出现的问题。

2.3 模块级开发策略

基于页面级模块化开发策略开发的网页不利于后期维护,在移动某个页面时,所依赖的模块也将发生变化,应当全部移除,但其他页面也可能存在引用情况,导致整个移除花销增大。除此之外,网站的线上调试极为困难,因为发布的代码经过混淆之后,难以实现调试。在实际操作中,也存在一些问题,如更新了前端基础类库后很难推动全站升级,利用某个新的通用组件时发现代码实现较为困难,新功能经过评估后只能基于原有类库继续开发,公司整合业务、合并产品线时发现前端代码发生冲突等。

基于上述问题的考虑,模块级的模块化开发策略应运而生。模块级的模块化开发,是指开发人员分别定义自身页面模块的依赖关系,而不再像页面级模块化开发那样集中记录。发生请求页面时,页面的Controller指定需要加载的页面,由加载的Loader自行计算需要加载的模块,同时Loader与服务器端进行交互,对所需要的模块进行分组、合并、压缩操作,并行下载至请求的浏览器上。

目前基于模块级的模块化开发规范的框架较多,如RequireJS,它是目前使用较为广泛的框架,在定义好模块的依赖关系后,不需做任何的配置,就能实现对所需模块进行自动有序的载入。RequireJs实现了js文件的异步加载,避免网页失去响应,同时对模块之间的依赖性进行管理,方便了代码的编写与维护。

与RequireJs相比,YUI3的Loader对下载方式进行了优化,YUI3强调代码的复用,将功能做了级别划分和颗粒化的设计,YUI3种子中的Get、Loader模块是动态按需加载的基础,YUI3框架通过良好的结构组织,可以根据程序引入的所需模块名称自动计算依赖模块,实现按需加载;YUI3对每个模块都进行了更细粒度的划分。YUI Loader用GET的方式指定线上文件的路径,进行动态的合并,同时做最小化处理。Loader根据模块载入的数量、顺序与当前浏览器支持的GET长度自动对请求进行分散、并行下载。在概念上抽象出核心、组件、和工具类,分别放在不同的目录结构中,需要时自行引用。YUI3的这一设计理念为动态加载的框架设计做了很好的铺垫。

3 结语

对网站前端的模块化开发的意义在于最大化的实现了设计的重用,以最少的模块和零部件,更高效的满足更多具有个性化的需求。在模块化开发中,开发人员能够按照所要实现的功能选择加载模块。依赖现有的多种开发工具与框架,适当修改,如目前存在的模块划分、模块粒度、模块继承等问题,完善模块化开发策略。未来的网站前端开发,需要做到易于线上的调试和后期的维护,同时发布时间也需有效缩短,需要开发人员的齐心协力,以实现更好的模块化开发。

[1]熊茜.基于虚拟表示模型的Web页面模块化设计方法[J].计算机应用,2008,25(2).

[2]张宏森,朱征宇.基于模块的网页设计技术[J].计算机应用研究,2009,(2):49-50.

[3]钟志东,孟清.网站开发的五层构架模块化设计[J].计算机时代,2013,(8):19-21.