模块化的核心思想──页面重构中的模块化设计（四）
由 Ghostzhang 发表于
有不少同学觉得前面的内容过于简单了，对于 样式的作用域的分类 、 栏目级作用域 、 继承 等内容的确十分基础，不过基础还是很重要的。下面就一起进入这个系列真正的主题——“模块化”吧。
早在Qzone4.0的页面架构中已经在项目中开始摸索提高代码复用的方法，只不过当时并没有很清晰的认识到“模块化”这个思想。从去年的《从宜家的家具设计讲模块化》开始，模块化成了我主要的一个学习方向。借着无数的提问、思考、讨论，渐渐形成了一个比较清晰的、较为完整的方案。后面的内容，更多的是出于我在实际项目中总结出来的方法，虽然已经尽可能为出现的问题提供了解决方法，不过还是少不了会有些我没遇到过或没考虑到的，欢迎各位指出。
首先来了解下页面重构中模块化的核心思想： 将HTML和CSS通过一定的规则进行分类、组合，以达到特定HTML、CSS在特定范围内最大程度的复用。 有三个关键词： 规则 、 特定范围 、 最大程度的复用 。怎么理解呢？
- 规则
- 编写模块时需要遵循的规范
- 特定范围
- 模块可使用的范围。与样式的作用域有关，大部分模块的使用范围仅仅是某一个栏目或站点。
- 最大程度的复用
- 做最少的修改即可重复使用。
很多同学都把“复用”理解成不用修改的直接使用，但在页面制作中，由于实际的项目环境，基本是不可能做到“一个模块走天下”的。不同的栏目会有不同的需求，大家应该都多少有所体会，我就不多讲了。
从实际出发，才能最终服务于实际。我们知道一个HTML标签可以绑定多个样式，所以我们可以这样去定义一个模块：
<div class="class-a class-b class-c">
...
</div>
不少同学已经知道这个方法了，而且还很形像的称之为“拼样式”。这样的定义很容易引出其它的问题，比如样式类的个数多少个适合？样式类如何命名？等等。下面讲下我的方法，从前面我们学到的样式作用域及模块化的核心思想，我们可以把样式进行一个分类，像这样：
.mode-a{/* 定义一个模块 */}
.type-a{/* 模块中的差异化定义 */}
.mode-name{/* 针对单个模块的个性化定义 */}
<div class="mode-a type-a mode-name">
...
</div>
上面的“mode-a”，我称它叫为“基类”；“type-a”为“扩展类”；“mode-name”为“模块名”，作用分别是：
- 基类
- （基础样式）模块的基础表现。包含了模块中大部分的状态。
- 扩展类
- （扩展样式）用于对使用基类的模块进行小范围的修改
- 模块名
- 模块在某一作用域中的唯一名称。
这里有一个简单的例子可以帮助理解。
也有同学主张用ID去表示“模块名”，我认为这种方式扩展性比较差，而且很容易与开发的ID冲突，不过也不失为一个方法。