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

　　网页和网页之间有很多相似或者相同的模块，模块化就是把这些模块抽离并独立管理。而模块化的方法，就是把模块的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代码，所以也相对直观一些。对于关联模块而言，也会有更直观的关联语法。

　　更多云南龙头科技有限公司网站案例请查看：http://www.ynlongtou.com/case.asp?id=3

　　云南龙头科技有限公司凭借多年的网站建设经验，坚持以“帮助中小企业实现网络营销化”为宗旨，成功帮助多家中小企业实现互联网信息化建设，得到了客户的一致好评。如你有任何关于网站建设的疑问，请立即点击咨询云南龙头科技有限公司资深营销专家或拨打咨询热线：13759574266，我们会详细为你一一解答你心中的疑难。