前言——页面重构中的设计模式

由 Ghostzhang 发表于 2012-11-09

前不久开始写《页面重构中的设计模式》，本想着内容应该是蛮多的，可是到约9000字的时候，发现写不下去了，有些内容我觉得很重要，但又不知道怎么说清楚，特别是那些已经“自然而然”的东西，不懂表达啊。

之前在写《[页面重构中的模块化设计][]》系列时就发现，只是讲模块化有点窄了，有些很重要但并不是模块化的内容放不进去，所以才会想说是不是需要一个更大的主题，正好也接触了下设计模式相关的内容，觉得可能会合适吧。

在开始下面的内容之前，可以先了解下我对模块化的理解，不然后面的内容可能会看得云里雾里的：

关于设计模式，以我的理解归纳了一下：

设计模式是被发现而不是被发明的。
设计模式是在解决特定问题时，所独立开发出类似的技术来解决这些问题，它们的共通性即为模式。
设计模式是用来解决一类相关问题的通用技术，而不是解决问题的特解。
设计模式是一种解决问题的思路，而不是解决方案本身。

简单的说，设计模式就是某种或某类问题的通用解决方案。当然说到设计模式，我们可能最先想到的就是“工厂模式”、“观察者模式”等程序上的解决方案，而我们的话题似乎有点不同。

如果你够细心，你会发现现有的理论与我们正在讨论的内容最大的区别在于，程序语言间有很强的共性，都是以一种理论为基础的，既使一个功能的实现使用了不同的程序语言。几乎所有的编程语言都会有“类”、“对象”、“变量”等概念，实现上都是“定义变量，赋值”、“如果符合条件就执行这个代码，不然就执行那个代码”，都有差不多的流程控制“条件判断”、“循环语句”等等。而HTML和CSS并算不上是编程语言，HTML是超文本标记语言，是用于描述网页文档的一种标记语言，而CSS是一种用来表现HTML或XML等文件式样的计算机语言。两者都没有编程序语言所必须具备的流程控制能力，甚至不能定义变量。这也许是页面重构在业内被大多数程序员同学所不屑的根本原因吧，当然对于习惯了编程思维的开发同学来说，CSS还是有一定难度的。

你一定想说，less、sass不就是让CSS可以定义变量了吗？这样算是程序了吧。它们本身是程序，但对于CSS来说，只是写法改变了，本质并没有改变。就像 zencodeing 一样，只是让你的输入更快了，但什么地方要写什么，还是需要我们去思考的。

在很长一段时间里，我都是把HTML和CSS放在一起去考虑的，因为在重构里HTML和CSS就是不可分开的关系，但它们之间有着不同的特性，侧重的点有所不同。HTML强调的是语义化、结构合理性，CSS则更多的偏重于灵活性和表现。它们间甚至可以说在某种程度上是矛盾的。在相当长一段时间里，都在考虑怎样处理好HTML和CSS间的这种矛盾，试图去寻找解释。包括从程序实现上的“模块化”、“面向对象编程”去找解释，虽然有大部分概念能对应上，但还是有一部分概念需要更多的理论支持。

在学习“设计模式”这个概念时，才发现自己其实一直在给自己画圈，总想着要把HTML、CSS给套到开发语言中的模块化里。正因为HTML和CSS并不是编程语言，所以当我们以程序的模块化去套的时候，就会觉得有些别扭。

既然放一起不好理解，那就把它们分开来理解吧。首先是HTML，在WEB标准的三者分离的思想中，HTML应该是划入到内容这一块的，即要传达给用户的实际数据，因此我们在HTML的关注重点在于如何更准确的把内容传达给用户，因为页面是通过终端读取显示的，所以这里要关注的就是终端是否能正确解析。对于大部分的人来说，只要是能看到的，就可以理解了。但对于机器来说，并不存在视觉这一说，举个例子，如果我们把一个文章的标题用p来实现，通过样式把它加粗、放大，让它“看起来”像个标题，但机器还是会把它当成是一个段落，因为机器读取到的是p所代表的含义，而不是视觉上的大小、粗细。

这也说明了标签语义对我们正确传达信息的重要性，但是……HTML中有语义的标签并无法满足到目前我们这个国度的网站需求，各种奇怪的需求让我们有时候坚持使用语义化的标签反而变得很不语义，这是很无奈的，但也是现实的情况。所以你会发现，我们输出的页面中，还是会大量的使用div标签，特别是在布局的标签上。当然，对于能够使用语义化标签的地方，我们还是会优先选择使用语义化标签的。

而对于CSS，则是更偏重于效果的展现，使用视觉的表现让内容更好的传达给用户。相比HTML来说，CSS更加的自由，这是优点，也是缺点。高自由度带来了使用上的便利，同时也带来维护上的困难。也正因为CSS的高自由度让团队中的合作会面临着较高的沟通成本，团队成员越多，成本越高，所以我们需要有一些相关的约定，来帮助我们减少沟通的成本。从这种角度来看，模块化其实就像是类似的规范，用来约束CSS的实现方式，以达到提高代码复用率、减少沟通、快速迭代的目的。