網站建設時前端架構模塊化的方法

　　網頁和網頁之間有很多相似或者相同的模塊，模塊化就是把這些模塊抽離并獨立管理。而模塊化的方法，就是把模塊的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代碼，所以也相對直觀一些。對于關聯模塊而言，也會有更直觀的關聯語法。