页面重构中的组件制作要点（2）

我们来看一个例子：

首先，我们需要了解基本的实现环境：

• 是否需要静态化？（需要）

• 组件有多少种状态？（三种基本状态：正常、当前、已完成）

• 是否通过脚本程序实现状态的更改？（不使用）

• 组件更新的频率？（较低）

<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