页面重构中的组件制作要点
来源:互联网 发布:郑州大学网络教育平台 编辑:程序博客网 时间:2024/05/16 23:52
在写完前面“模块化”相关的文章后,感觉试图用“模块化”本身去讲什么是“模块化”真是不容易讲得清。相信大家都多多少少能理解什么是“模块化”,但是不容易说得清,也有不少同学反馈说缺少实例。现在的团队里在推“组件化”,做为“模块化”的一个应用方式,也许正好可以从另一个方面讲讲“模块化”的实现。
这里的“组件”跟“模块”并没有本质的区别,那为什么还要提一个新的名词呢?在《 页面重构中的模块化思维 》中提到了“模块化”的应用是十分广的,而且大家已经对它有了自己的理解,想要重新认识“模块化”是不太容易的,因此决定换一个名。“模块化”更多的讲一种思维,而这里的“组件化”更多的是讲一种实现。
一个组件效果的实现,需要的支持可能是不同的,组件强调的是“效果的完整”,要保证效果完整,就需要HTML、CSS、前端脚本甚至后台脚本等的配合。
简单列下做组件时需要注意的几点:
- 组件需要一个底层的运行环境。特别是对于CSS,就是常说的全站公共样式,包括reset。
- 确保同一组件在同一底层环境中的效果完整。
- 组件中的定义需要注意受组件外继承定义1的影响。
在使用上面这些定义的时候,应该注意继承性对作用范围中标签的影响。同理,为了减少组件中被外层定义中的有继承性定义的影响,必要时须要在组件中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;}
完成效果见 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森林群里讨论这个图的实现时,还看到了上面两种之外的实现方式,像完全使用脚本将各个状态输出等。
近期对模块化实现方式的一点总结,欢迎讨论。
1 常用有继承性的样式定义:
- 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
- 页面重构中的组件制作要点
- 《重构》要点列表
- 重构要点总结
- 页面重构中的模块化思维
- 页面重构中的模块化思维
- 重构 一书要点
- 网页重构——bigpipe中的页面构建优化
- 代码重构的时机与要点
- 页面重构工作者
- 页面重构
- 页面重构
- 页面重构
- asp.net中的页面重定向详解
- ASPX页面如何加载GAC中的组件?
- Qt中的多页面切换组件
- Delphi 程序制作要点
- PPT制作要点
- Delphi 程序制作要点
- C#,Ftp各种操作,上传,下载,删除文件,创建目录,删除目录,获得文件列表
- Android开发环境搭建(jdk+eclip+android sdk)
- mssql错误码 @@ERROR
- 介绍几个常用的jquery ui框架
- 页面重构中的模块化思维
- 页面重构中的组件制作要点
- 样式的作用域──页面重构中的模块化设计(一)
- 栏目级作用域──页面重构中的模块化设计(二)
- 继承──页面重构中的模块化设计(三)
- Linux访问Windows远程桌面——rdesktop用法
- 模块化的核心思想──页面重构中的模块化设计(四)
- 基类、扩展类──页面重构中的模块化设计(五)
- CSS模块的注释——页面重构中的模块化设计(六)
- WEB系统架构设计经验分享