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

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

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

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

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

• 组件需要一个底层的运行环境。特别是对于CSS，就是常说的全站公共样式，包括reset。

• 确保同一组件在同一底层环境中的效果完整。

• 组件中的定义需要注意受组件外继承定义¹的影响。

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

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

• 是否需要静态化？

• 组件有多少种状态？

• 是否通过脚本程序实现状态的更改？

• 组件更新的频率？

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

1. 效果的完整性（同一底层环境）

2. 良好的性能

3. 可移植、复用（同一底层环境）

4. 易维护

5. 易扩展

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