最近被「模組化」纏身，又是文章又是PPT的，被逼著想了很多相關的東西。整理下我這段時間對於「模組化」的思考，大多都是我自己從事頁面重構這份工作的經驗和理解，在某種程度上存在局限性，也希望自己能溫故而知新。
「模組化」只是我們對於過去一直使用的技術、方法的一個新潮的稱謂，就像「Ajax」。不過做為頁面重構發展的一種趨勢，越來越被大家重視，不自覺也滿口的“模組化”，只是你真的理解什麼是“模組化”嗎？
什麼是模組化？
對「模組化」的解釋，在CNKI 中就有28種。可見「模組化」思維使用的廣泛。最接近頁面重構中的“模組化”，現有的解釋應該是軟體開發中的解釋了。
先看一下百度詞條是怎麼解釋「模組化」的：
模組化是指解決一個複雜問題時自頂向下逐層把軟體系統劃分成若干模組的過程。每個模組完成一個特定的子功能，所有的模組以某種方法組裝起來，成為一個整體， 完成整個系統所要求的功能。模組具有以下幾種基本屬性：介面、功能、邏輯、狀態，功能、狀態與介面反映模組的外部特性，邏輯反映它的內部特性。在軟體的體系結構中，模組是可組合、分解和更換的單元。
相關的書籍也蠻多的，有興趣的同學可以搜尋。需要強調一點，我們所學習的是一種思考的方式。
頁面製作為什麼需要模組化？
網站內容越來越多、程式碼越來越臃腫，漸漸影響了客戶端的體驗（主要是開啟速度），影響到了維護的效率。有什麼方法可以解決這些問題呢？
我們很容易就想到：減少程式碼冗餘、提高程式碼重用率、圖片壓縮等等，而這些要如何實現呢？模組化思維可以解決，也就是可以有效減少程式碼冗餘、提高程式碼重用率，更重要是可以支援到多人維護，降低維護成本。 CSS寫法較為靈活，容易產生程式碼的耦合，使用模組化也能在一定程度上降低耦合度，對於BUG的定位也有幫助。 所以，我們更應該在網站前期就重視並使用「模組化的思維」來編寫網站。
我們之前常提到的網站效能優化，有相當一部分也是「模組化」的內容，例如提高程式碼重用，提高開發效率等等，「模組化」的優點還有很多，我大概列了一下：
提高程式碼重用率提高開發效率、減少溝通成本降低耦合降低發布風險減少Bug定位時間和Fix成本提高頁面容錯更好的實現快速迭代更好的支援灰度發布其中最重要的一點，我認為是「提高程式碼重用率”，這也是模組化最重要的特點之一。
如何實現“模組化”？
這裡的主要問題是HTML與CSS的“模組化”，我們可以看下換膚的實作方法：
同一類名，換文件（JS）
同一文件，換類名（JS）
由此可知HTML與CSS的介面實作：
CSS引入的三種方式類別名為了更好的實作這種接口，需要有相關的（互動、設計、頁面、開發）約定、規則、規範，例如：所有當前狀態都使用同一個類別名稱“nonce” ，所有變灰的表現都使用原類名後加上“_n”，Tab的實作方式等等。有了這些約定、規則、規格後，HTML程式碼就很容易實現模板化，統一介面規範。
有兩個誤區需要先認清下：
模組化後並不是就能被使用在任何位置（模組化後的程式碼段也是有適用的範圍限制，需要一個提供介面規則的環境）
模組化後並不是就不能再變更（模組化後的程式碼段可依實際需求做修改）
完全獨立的模組放在同一專案中，由於專案有自己的表現、互動統一性，所以各模組間必定出現類似的部分，這些部分可以被提出來做為公共的定義，減少冗餘，這時就會出現耦合的問題，完全不耦合是不可能的，因此模組化中很重要一點就是「適度的耦合」。有了公共定義，就得調整模組樣式的實作方式了，而這種調整也會影響到「介面」的實作方式。
由於本篇主要是講模組化的思考方式，具體實現的細節留待以後的文章中探討。相關內容可以看下之前寫的《從IKEA的家具設計講模組化》。歡迎一起討論。