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

由 Ghostzhang 发表于

在写完前面“模块化”相关的文章后，感觉试图用“模块化”本身去讲什么是“模块化”真是不容易讲得清。相信大家都多多少少能理解什么是“模块化”，但是不容易说得清，也有不少同学反馈说缺少实例。现在的团队里在推“组件化”，做为“模块化”的一个应用方式，也许正好可以从另一个方面讲讲“模块化”的实现。

这里的“组件”跟“模块”并没有本质的区别，那为什么还要提一个新的名词呢？在《页面重构中的模块化思维》中提到了“模块化”的应用是十分广的，而且大家已经对它有了自己的理解，想要重新认识“模块化”是不太容易的，因此决定换一个名。“模块化”更多的讲一种思维，而这里的“组件化”更多的是讲一种实现。

一个组件效果的实现，需要的支持可能是不同的，组件强调的是“效果的完整”，要保证效果完整，就需要HTML、CSS、前端脚本甚至后台脚本等的配合。

简单列下做组件时需要注意的几点：

  • 组件需要一个底层的运行环境。特别是对于CSS，就是常说的全站公共样式，包括reset。
  • 确保同一组件在同一底层环境中的效果完整。
  • 组件中的定义需要注意受组件外继承定义的影响。

在使用上面这些定义的时候，应该注意继承性对作用范围中标签的影响。同理，为了减少组件中被外层定义中的有继承性定义的影响，必要时须要在组件中reset。

在做一个组件之前，有几个问题需要先搞清楚，如：

  • 是否需要静态化？
  • 组件有多少种状态？
  • 是否通过脚本程序实现状态的更改？
  • 组件更新的频率？

这些问题对于组件如何实现更优起了很重要的作用。了解了基本的实现方式后，在制作组件所要考虑的方面，大概有下面这些：

  • 效果的完整性（同一底层环境）
  • 良好的性能
  • 可移植、复用（同一底层环境）
  • 易维护
  • 易扩展

一个好用的组件，应该是充分考虑到上面这些点，并在它们间找到平衡。

我们来看一个例子：

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

  • 是否需要静态化？（需要）
  • 组件有多少种状态？（三种基本状态：正常、当前、已完成）
  • 是否通过脚本程序实现状态的更改？（不使用）
  • 组件更新的频率？（较低）

<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;}

完成效果

效果展示

再看看它几个方面的分析：

  • 效果的完整性，可移植、复用，良好的性能：没问题
  • 易维护：较差。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;}

完成效果

效果展示

再看看它几个方面的分析：

  • 效果的完整性，可移植、复用，良好的性能：没问题
  • 易维护：一般。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

讨论