頁面重構中的組件製作要點

在寫完前面“模塊化”相關的文章後，感覺試圖用“模塊化”本身去講什麼是“模塊化”真是不容易講得清。相信大家都多多少少能理解什麼是“模塊化”，但是不容易說得清，也有不少同學反饋說缺少實例。現在的團隊裏在推“組件化”，做爲“模塊化”的一個應用方式，也許正好可以從另一個方面講講“模塊化”的實現。

這裏的“組件”跟“模塊”並沒有本質的區別，那爲什麼還要提一個新的名詞呢？在《 頁面重構中的模塊化思維 》中提到了“模塊化”的應用是十分廣的，而且大家已經對它有了自己的理解，想要重新認識“模塊化”是不太容易的，因此決定換一個名。“模塊化”更多的講一種思維，而這裏的“組件化”更多的是講一種實現。

一個組件效果的實現，需要的支持可能是不同的，組件強調的是“效果的完整”，要保證效果完整，就需要HTML、CSS、前端腳本甚至後臺腳本等的配合。

簡單列下做組件時需要注意的幾點：

• 組件需要一個底層的運行環境。特別是對於CSS，就是常說的全站公共樣式，包括reset。
• 確保同一組件在同一底層環境中的效果完整。
• 組件中的定義需要注意受組件外繼承定義¹的影響。

在使用上面這些定義的時候，應該注意繼承性對作用範圍中標籤的影響。同理，爲了減少組件中被外層定義中的有繼承性定義的影響，必要時須要在組件中reset。

在做一個組件之前，有幾個問題需要先搞清楚，如：

• 是否需要靜態化？
• 組件有多少種狀態？
• 是否通過腳本程序實現狀態的更改？
• 組件更新的頻率？

這些問題對於組件如何實現更優起了很重要的作用。瞭解了基本的實現方式後，在製作組件所要考慮的方面，大概有下面這些：

1. 效果的完整性（同一底層環境）
2. 良好的性能
3. 可移植、複用（同一底層環境）
4. 易維護
5. 易擴展

一個好用的組件，應該是充分考慮到上面這些點，並在它們間找到平衡。

我們來看一個例子：

首先，我們需要了解基本的實現環境：

• 是否需要靜態化？（需要）
• 組件有多少種狀態？（三種基本狀態：正常、當前、已完成）
• 是否通過腳本程序實現狀態的更改？（不使用）
• 組件更新的頻率？（較低）

<div class="flow_step">
<ol class="cols3">
<li class="current">第一步</li>
<li>第二步</li>
<li class="last">第三步</li>
</ol>
</div>
<div class="flow_step">
<ol class="cols3">
<li class="done current_prev">第一步</li>
<li class="current">第二步</li>
<li class="last">第三步</li>
</ol>
</div>
<div class="flow_step">
<ol class="cols3">
<li class="done">第一步</li>
<li class="done current_prev">第二步</li>
<li class="current">第三步</li>
</ol>
</div>

.flow_step{width:950px;height:25px;margin:20px auto 10px;padding:0;}
.flow_step ol{margin:0;padding:0;}
.flow_step li{float:left;padding:0px 15px 0px 0px;list-style:decimal inside;
background:url(step.png) #E6E6E6 no-repeat 100% -50px;color:#333333;font:700 14px/25px "宋體";text-align:center;} 

 /* 當前步驟 */
.flow_step li.current{background-color:#FF5500;color:#FFFFFF;} 

 /* 已完成步驟 */
.flow_step li.done{background-position:100% 0px;background-color:#FFD98D;color:#FF6600;} 

 /* 已完成無當前步驟 */
.flow_step li.done_none{background-position:100% -50px;background-color:#FFD98D;color:#FF6600;} 

 /* 當前步驟的上一步 */
.flow_step li.current_prev{background-position:100% -25px;background-color:#FFD98D;} 

 /* 最後一個步驟 */
.flow_step li.last{background:none;background-color:#E6E6E6;} 

 /* 最後一個步驟爲當前步驟 */
.flow_step li.last_current{background:none;background-color:#ff5500;color:#FFFFFF;}
.flow_step li.last_current_none{background:none;background-color:#FFD98D;color:#FF6600;}
.flow_step .cols3 li{width:301px;}
.flow_step .cols4 li{width:222px;}
.flow_step .cols5 li{width:175px;}

完成效果見 Demo ，再看看它幾個方面的分析：

• 效果的完整性，可移植、複用，良好的性能：沒問題
• 易維護：較差。HTML維護量較大，每個狀態需要一個新的HTML代碼；樣式的組合需要花點時間理解。
• 易擴展：較差。新增一個5步的導航，需要增加10個HTML代碼片段；樣式基本不需要更新。
• 較難做成程序模板，HTML代碼量較大。

同一個效果，如果基本的實現環境有所改變，可能就需要一種新的作法：

• 是否需要靜態化？（需要）
• 組件有多少種狀態？（三種基本狀態：正常、當前、已完成）
• 是否通過腳本程序實現狀態的更改？（可使用CGI）
• 組件更新的頻率？（有多種步驟，3~5步）
• 有多個步驟同在一個頁面的情況

<div class="flow_step_no1 flow_step_no0_n">
<!-- flow_step_no1中的“1”爲當前步驟。
flow_step_no0_n的“0”表示正常狀態，當出現無當前步驟時與flow_step_no1中的“1”相等。 -->
<div class="flow_step">
<ol class="cols3"><!-- cols3表示總共有三步 -->
<li class="step_1">第一步</li>
<li class="step_2">第二步</li>
<li class="step_3">第三步</li>
</ol>
</div>
</div>

/* 組件頁面流程圖 */
.flow_step{width:950px;height:25px;overflow:hidden;margin:20px auto 10px;padding:0;}
.flow_step ol{width:110%;margin:0;padding:0;}
.flow_step li{float:left;padding:0px 15px 0px 0px;list-style:decimal inside;
background:url(step.png) #e6e6e6 no-repeat 100% -50px;color:#333333;font:700 14px/25px "宋體";text-align:center;}
.flow_step .cols3 li{width:301px;}
.flow_step .cols4 li{width:222px;}
.flow_step .cols5 li{width:175px;}
.flow_step .cols6 li{width:143px;} 

 /* 當前步驟效果 */
.flow_step_no1 .step_1,
.flow_step_no2 .step_2,
.flow_step_no3 .step_3,
.flow_step_no4 .step_4,
.flow_step_no5 .step_5,
.flow_step_no6 .step_6
{background-position:100% -50px;background-color:#FF5500;color:#FFFFFF;} 

 /* 最後一步去箭頭 */
.cols3 .step_3,
.cols4 .step_4,
.cols5 .step_5,
.cols6 .step_6
{background-image:none;} 

 /* 當前步驟時前一步的效果 */
.flow_step_no2 .step_1,
.flow_step_no3 .step_2,
.flow_step_no4 .step_3,
.flow_step_no5 .step_4,
.flow_step_no6 .step_5
{background-position:100% -25px;background-color:#FFD98D;color:#FF6600;} 

 /* 前前步驟時除去前一步外已完成的效果 */
.flow_step_no3 .step_1,
.flow_step_no4 .step_1,.flow_step_no4 .step_2,
.flow_step_no5 .step_1,.flow_step_no5 .step_2,.flow_step_no5 .step_3,
.flow_step_no6 .step_1,.flow_step_no6 .step_2,.flow_step_no6 .step_3,.flow_step_no6 .step_4
{background-position:100% 0;background-color:#FFD98D;color:#FF6600;} 

 /* 最後一步時的效果 */
.flow_step_no3 .cols3 .step_3,
.flow_step_no4 .cols4 .step_4,
.flow_step_no5 .cols5 .step_5,
.flow_step_no6 .cols6 .step_6
{background-color:#ff5500;color:#ffffff;} 

 /* 已完成無當前步驟 */
.flow_step_no1_n .step_1,
.flow_step_no2_n .step_2,
.flow_step_no3_n .step_3,
.flow_step_no4_n .step_4,
.flow_step_no5_n .step_5,
.flow_step_no6_n .step_6
{background-position:100% -50px;background-color:#FFD98D;color:#FF6600;}
.flow_step_no2_n .step_1,
.flow_step_no3_n .step_2,
.flow_step_no4_n .step_3,
.flow_step_no5_n .step_4,
.flow_step_no6_n .step_5
{background-position:100% 0;}
.flow_step_no3_n .cols3 .step_3,
.flow_step_no4_n .cols4 .step_4,
.flow_step_no5_n .cols5 .step_5,
.flow_step_no6_n .cols6 .step_6
{background-color:#FFD98D;color:#FF6600;}

完成效果見 Demo ，再看看它幾個方面的分析：

• 效果的完整性，可移植、複用，良好的性能：沒問題
• 易維護：一般。HTML維護簡單，多個步驟、狀態同在一個HTML；樣式的維護點較多。
• 易擴展：一般。HTML擴展性較好；樣式的擴展性一般，基本不需更新。
• 可較方便的製作爲程序模板。

從上面的例子可以看出，同樣的效果，不同的實現方式，它的可維護、可擴展等等特性是不大相同的，在CSS森林羣裏討論這個圖的實現時，還看到了上面兩種之外的實現方式，像完全使用腳本將各個狀態輸出等。

近期對模塊化實現方式的一點總結，歡迎討論。

¹ 常用有繼承性的樣式定義：

• text-indent
• text-align
• layout-flow
• writing-mode
• line-break
• white-space
• word-wrap
• list-style
• list-style-image
• list-style-position
• list-style-type
• font
• font-style
• font-variant
• font-weight
• font-size
• line-height
• font-family
• color
• text-transform
• letter-spacing
• word-spacing

文章地址：http://www.cssforest.org/blog/index.php?id=146