子產品化的核心思想──頁面重構中的子產品化設計（四）

由 Ghostzhang 發表于 2010-05-12 15:48

有不少同學覺得前面的内容過于簡單了，對于 樣式的作用域的分類 、 欄目級作用域 、 繼承 等内容的确十分基礎，不過基礎還是很重要的。下面就一起進入這個系列真正的主題——“子產品化”吧。

早在Qzone4.0的頁面架構中已經在項目中開始摸索提高代碼複用的方法，隻不過當時并沒有很清晰的認識到“子產品化”這個思想。從去年的《 從宜家的家具設計講子產品化 》開始，子產品化成了我主要的一個學習方向。借着無數的提問、思考、讨論，漸漸形成了一個比較清晰的、較為完整的方案。後面的内容，更多的是出于我在實際項目中總結出來的方法，雖然已經盡可能為出現的問題提供了解決方法，不過還是少不了會有些我沒遇到過或沒考慮到的，歡迎各位指出。

首先來了解下頁面重構中子產品化的核心思想： 将HTML和CSS通過一定的規則進行分類、組合，以達到特定HTML、CSS在特定範圍内最大程度的複用。 有三個關鍵詞： 規則 、 特定範圍 、 最大程度的複用 。怎麼了解呢？

規則編寫子產品時需要遵循的規範特定範圍子產品可使用的範圍。與樣式的作用域有關，大部分子產品的使用範圍僅僅是某一個欄目或站點。最大程度的複用做最少的修改即可重複使用。

很多同學都把“複用”了解成不用修改的直接使用，但在頁面制作中，由于實際的項目環境，基本是不可能做到“一個子產品走天下”的。不同的欄目會有不同的需求，大家應該都多少有所體會，我就不多講了。

從實際出發，才能最終服務于實際。我們知道一個HTML标簽可以綁定多個樣式，是以我們可以這樣去定義一個子產品：

<div class="class-a class-b class-c">
    ...
</div>           

複制

不少同學已經知道這個方法了，而且還很形像的稱之為“拼樣式”。這樣的定義很容易引出其它的問題，比如樣式類的個數多少個适合？樣式類如何命名？等等。下面講下我的方法，從前面我們學到的樣式作用域及子產品化的核心思想，我們可以把樣式進行一個分類，像這樣：

.mode-a{/* 定義一個子產品 */}
.type-a{/* 子產品中的差異化定義 */}
.mode-name{/* 針對單個子產品的個性化定義 */}           

複制

<div class="mode-a type-a mode-name">
    ...
</div>           

複制

上面的“mode-a”，我稱它叫為“基類”；“type-a”為“擴充類”；“mode-name”為“子產品名”，作用分别是：

基類（基礎樣式）子產品的基礎表現。包含了子產品中大部分的狀态。擴充類（擴充樣式）用于對使用基類的子產品進行小範圍的修改子產品名子產品在某一作用域中的唯一名稱。

這裡有一個簡單的例子可以幫助了解。

效果展示

也有同學主張用ID去表示“子產品名”，我認為這種方式擴充性比較差，而且很容易與開發的ID沖突，不過也不失為一個方法。