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

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

讨论