|
最近被“模塊化”纏身，又是文章又是PPT的，被逼著想了很多相關的東西。整理下我這段時間對于“模塊化”的思考，大多都是我自己從事頁面重構這份工作的經(jīng)驗和理解，在一定程度上存在局限性，也希望自己能溫故而知新。
“模塊化”只是我們對于過去一直使用的技術、方法的一個新潮的稱謂，就像“Ajax”。不過做為頁面重構發(fā)展的一種趨勢，越來越被大家重視，不自覺也滿口的“模塊化”，只是你真的理解什么是“模塊化”嗎？
什么是模塊化？
對“模塊化”的解釋，在 CNKI 中就有28種。可見“模塊化”思維使用的廣泛。最接近頁面重構中的“模塊化”，現(xiàn)有的解釋應該就是軟件開發(fā)中的解釋了。
先看一下百度詞條是怎么解釋“ 模塊化 ”的：
“模塊化是指解決一個復雜問題時自頂向下逐層把軟件系統(tǒng)劃分成若干模塊的過程。每個模塊完成一個特定的子功能，所有的模塊按某種方法組裝起來，成為一個整體，完成整個系統(tǒng)所要求的功能。模塊具有以下幾種基本屬性：接口、功能、邏輯、狀態(tài)，功能、狀態(tài)與接口反映模塊的外部特性，邏輯反映它的內部特性。在軟件的體系結構中，模塊是可組合、分解和更換的單元�！�
相關的書籍也蠻多的，有興趣的同學可以搜一下。需要強調一點，我們所借鑒的是一種思維的方式。
頁面制作為什么需要模塊化？
站點內容越來越多、代碼越來越臃腫，漸漸影響到了客戶端的體驗（主要是打開速度），影響到了維護的效率。有什么方法可以解決這些問題呢？
我們很容易就想到：減少代碼冗余、提高代碼重用率、圖片壓縮等等，而這些要如何實現(xiàn)呢？模塊化思維可以解決，即可以有效減少代碼冗余、提高代碼重用率，更重要是可以支持到多人維護，降低維護成本。CSS寫法較為靈活，容易產生代碼的耦合，使用模塊化也可以在一定程度上降低耦合度，對于BUG的定位也有幫助。所以，我們更應該在站點前期就重視并使用“模塊化的思維”編寫站點。
我們之前經(jīng)常提到的站點性能優(yōu)化，有相當一部分也是“模塊化”的內容，比如提高代碼重用，提高開發(fā)效率等等，“模塊化”的優(yōu)點還有很多，我大概列了一下：
- 提高代碼重用率
- 提高開發(fā)效率、減少溝通成本
- 降低耦合
- 降低發(fā)布風險
- 減少Bug定位時間和Fix成本
- 提高頁面容錯
- 更好的實現(xiàn)快速迭代
- 更好的支持灰度發(fā)布
其中最重要的一點，我認為是“提高代碼重用率”，這也是模塊化最重要的特點之一。
如何實現(xiàn)“模塊化”？
這里的主要問題是HTML與CSS的“模塊化”，我們可以看下?lián)Q膚的實現(xiàn)方法：
- 同一類名，換文件（JS）
- 同一文件，換類名（JS）
由此可知HTML與CSS的接口實現(xiàn)：
為了更好的實現(xiàn)這種接口，需要有相關的（交互、設計、頁面、開發(fā)）約定、規(guī)則、規(guī)范，比如：所有當前狀態(tài)都使用同一個類名“nonce”，所有變灰的表現(xiàn)都使用原類名后加“_n”，Tab的實現(xiàn)方式等等。有了這些約定、規(guī)則、規(guī)范后，HTML代碼就很容易可以實現(xiàn)模板化，統(tǒng)一接口規(guī)范。
有兩個誤區(qū)需要先認清下：
- 模塊化后并不是就能被使用在任何位置（模塊化后的代碼段也是有適用的范圍限制，需要一個提供接口規(guī)則的環(huán)境）
- 模塊化后并不是就不能再變更（模塊化后的代碼段可根據(jù)實際需要做修改）
完全獨立的模塊放在同一項目中，由于項目有自己的表現(xiàn)、交互統(tǒng)一性，所以各模塊間必定出現(xiàn)類似的部分，這些部分可以被提出來做為公共的定義，減少冗余，這時就會出現(xiàn)耦合的問題，完全不耦合是不可能的，因此模塊化中很重要一點就是“適度的耦合”。有了公共定義，就得調整模塊樣式的實現(xiàn)方式了，而這種調整也會影響到“接口”的實現(xiàn)方式。
由于本篇主要是講模塊化的思維方式，具體實現(xiàn)的細節(jié)留待以后的文章中探討。相關內容可以看下之前寫的《 從宜家的家具設計講模塊化 》。歡迎一起討論。
原文：http://www.cssforest.org/blog/index.php?id=134
本文鏈接：http://m.95time.cn/tech/web/2009/6825.asp 
出處：css森林
責任編輯：bluehearts
◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。
|
