网站建设时前端架构模块化的方法

　　网页和网页之间有很多相似或者相同的模块，模块化就是把这些模块抽离并独立管理。而模块化的方法，就是把模块的HTML、CSS和JavaScript文件独立，然后通过某种方法关联到使用这些模块的网页上。

　　在介绍模块化的具体方法之前，需要清楚一个点，“可以模块化”和“值得模块化”是两个完全不同的概念。如果把所有可以模块化的模块都独立，那么会有很多零碎的模块，这样很大程度上又会回到混乱的局面。

　　因此，下面先说明什么样的模块值得被模块化。

　　首先，模块的颗粒度需要有一个清晰的界定。模块的界定最好是3.4.1小节中提到的模块层中的某个模块区域，而不是模块区域内的一些零碎控件组合，这样能避免模块过于零碎。

　　一些比较复杂、相对独立，而且需要被多个网页使用的模块值得被模块化。如播放器就是一个很好的例子，播放器比较复杂，并且很多网页都会用到播放器。这些模块被模块化后，会减轻很多工作量。

　　一些大部分网页都需要的模块值得被模块化，如标头（Header）、底部（Footer）。这些部分被模块化后，可以很好地集中管理，当发生样式变更时，能避免修改遗漏等情况发生。

　　在明确了哪些模块需要被模块化之后，我们开始讨论具体的模块化方法。

　　1、iframe

　　iframe是HTML原生支持的，iframe的作用是将一个网页嵌入另外的网页中，被模块化的播放器一般以这种方式嵌入页面。使用iframe嵌入模块无疑是最理想的方式，被iframe嵌入的模块本身是一个完整的网页，拥有自己独立的HTML、CSS和JavaScript文件，模块的内部是直观的。另外，由于模块是一个完整的网页，单独调试模块会很方便。

　　但是，过度使用iframe往往是不被提倡的，这是由于iframe会对网页性能带来一定影响，也会增加HTTP的请求次数，所以一个网页嵌入iframe的个数最好不要超过3个。

　　HTML使用iframe嵌入网页的方式如代码3.32所示，其中frameborder="0"表示消除iframe边框，allowfullscreen="true"表示允许iframe全屏显示，这两个属性一般都要设置。

　　如果父网页和iframe中被嵌入的网页同源（网页地址的域名和端口都一致），则它们之间是可以互相通信的。

　　2、以插件的方式

　　第三方插件，这些插件一般是由CSS和JavaScript文件组成的。模块也可以以这种方式构造，只需要封装好CSS文件和JavaScript文件即可，而模块的HTML部分则需要变成JavaScript中的字符串塞到JavaScript文件里。

　　以插件形式做的模块化，这么做的好处是，网页可以像使用插件一样使用模块，非常方便。这样的做法有一个不好的地方，就是需要把HTML塞到JavaScript里，由于模块本身已经不是一个完整的网页，这样便使得模块不能以网页的形式打开，对模块本身的调试比较麻烦。另外，由于HTML需要转换成JavaScript的字符串，所以HTML部分如果内容太多的话，维护起来还是很麻烦的。

　　3、利用框架

　　一些框架是提供模块化功能的，但一般有两种方式，一种方式是类似于插件的方式，需要把HTML部分塞到JavaScript里，如Vue.js、React.js等，由于它跟上面“以插件的方式”中介绍的形式类似，所以在这里不展开介绍；另一种方式是提供独立的HTML、CSS和JavaScript代码空间，开发者根据框架的规则开发和关联模块后，再通过一些额外的工具来编译或构造前端工程，如Angular 2及后续版本，这里我们称它们为模块化框架。

　　这些模块化框架相对于插件形式的模块化，由于加入了额外的工具生成一部分代码，所以这些模块化框架对于模块的构造形式相对简单。

　　而且由于可以独立HTML、CSS和JavaScript代码，所以也相对直观一些。对于关联模块而言，也会有更直观的关联语法。