模块化的核心思想──页面重构中的模块化设计(四)

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冲突,不过也不失为一个方法。

评论