《基于模块化的前端开发框架的研究与实现》 论文阅读（十三）

 　　1.1研究背景与意义
当今互.联网飞速发展，网络用户的需求变化既快又大，大部分网站的更新周
期都是以日，小时甚至分钟为单位，在这种情况下，网站的前端就成了变化最频
繁的部分川。随着互联网公司对前端开发的逐渐重视，前端开发人数也越来越多，
但是技术人员的投入总是有限的，而前端开发领城并没有为开发者们提供一-种简
洁，有条理的方式来管理模块的方法，前端模块化问题经久不衰。
以JavaScript 模块化为例，其经历了无模块时代，即代码次序堆特的时代、
模块萌芽时代及当前的模块化组件化时代，ECMA2015 也将模块化纳入到规范
中，使模块化成为JavaScript规范，开发人员不断地在模块化领域进行摸索及探
求。模块化开发使得前端开发人员摆脱繁琐的文件依赖和命名冲突，增强代码复
用性，将代码划分模块管理，也方便开发人员的分工划分。每个人员对自己的模
块负责，考虑其复用性及可扩展性，从这个角度来看，模块化开发也提升了开发
人员的开发效率和代码质量。
本论文研究模块化技术，发现前端模块化在使用及应用场景等方面主要存在
以下问题，亟待进一步优化:
(1)前端开发因其特殊性，在模块化方面- -直没有统-的解决方案，因为
开发人员实现-一个页面功能需要依赖三种语言(HTML、CSS. JavaScript) 的相
互组织才能完成，而当前JavaScript有较成熟的模块化技术，如SeaJS. require js
等，可借助于它们来实现代码管理，HTML及Css则没有相应的代码组织规范，
代码冗余且难以管理。如果仅仅是某-一个语言实现了模块化而其他语言还处于原
始状态，那这种模块化方案则并不能被大家认为是一-套完整的模块化方案，所以
开发者真正需要的是一种可以将三种语言能同时组织，综合完成的模块化方案。
(2)在HTML模块化中可结合前端模板技术来实现，而将模板文件化并模
块化引用则是个问题，当前前端方面动态文件加载主要是异步AJAX或动态标
签来实现，而以上功能均需浏览器底层支持，这在无形之中大大增加了浏览器的
负担，需要引入同步的机制来解决这一问题。与此同时仅仅靠前端模板技术只能
解决动态字符串的问题，而页面模块化组织调用、增加页面代码可读性这些问题
则不是前端模板技术能够简单解决的，因此需要一套技术来打展页面语言，实现
页面的模块化调度。
本文从以上两个方面出发，以前端模块化为研究目标，旨在解决面对复杂

 

 第二章关键技术研究
2.1静态资源模块化技术
在页面设计中，开发人员一直追求着简洁、灵活、可维护的代码。简洁具体
于HIML即为以最少的且语义化的标签来实现所需要的结构:于CSS即为高复
用，低冗余的定义。灵活要求开发人员的代码能达到最少改动可实现最多效果的
目的。可维护指以最少的改动解决问题，以最快的速度定位到问题的能力。问题
归结于兼顾实际工作中的开发效率、沟通成本、发布风险、容错度、链接数及速
度问题的情况下，如何在HTML. CsS中实现脚本编程语言中的封闭、组件、可
移植等等特性。
几乎所有编程语言都会有类、对象、变量等概念，拥有完整的流程控制。而
HTML和CSS算不上是编程语言，HTML是超文本标记语言，是用于描述网页
文档的一种标记语言，而CsS是一种用来表现HTML.或XML等文件式样的计
算机语言。两者都没有程序语言所具备的流程控制能力，甚至不能定义变量，这
就要求课题从另一个角度来进行页面设计中的模块化。
2.1.1页面布局模块化
模块化主要是提供了一项分治的思想，让代码拥有重用性的同时，还可以进
行分模块管理，将一个功能划分成多个模块，层次清晰又简单易懂，这种思想一
直被当前各大主流编程语言如JAVA、PHP等所推崇，在其早期便拥有包引入机
制及能力，但是对于前端来讲尤其是静态资源这一块， 怎样制定划分规则并实现
比如何进行代码划分有时显得更为重要，因为缺少相应成熟的规范来规定这些规
则，在早期，页面都是依托后端模板来实现某种意义上的模块化，如PHP的
include等,但是这样使前端代码与后端代码耦合性提高，于是有很多解决方案出
现，但是方案大多都是依托服务器语言来实现，如Smarty模板继承等。而在纯
前端领域一直缺少--个类以上结合方案的解决办法。
页面模块化布局的出现，为提升项目开发效率，解决项目维护问题提供了一
个解决方案。模块与模块间不相互依赖，又拥有- -定共性，通过相应的模块化引
入规则而相互联系，由于拥有这些优势，页面模块化布局被广大网站所应用，它
的网络架构更需要的是在合理的嵌套中保持最好的健壮性，可拓展，易维护性。
一个完整的网页，需要划分为多个模块，例如头部、底部、列表、侧边栏、菜单
等等,他们独立为-个个模块,每个模块均有自已独立的功能，在开发的过程中