页面重构中的模块化思维
Ghost 发表于 [2009-06-21 21:24]
最近被“模块化”缠身，又是文章又是PPT的，被逼着想了很多相关的东西。整理下我这段时间对于“模块化”的思考，大多都是我自己从事页面重构这份工作的经验和理解，在一定程度上存在局限性，也希望自己能温故而知新。
“模块化”只是我们对于过去一直使用的技术、方法的一个新潮的称谓，就像“Ajax”。不过做为页面重构发展的一种趋势，越来越被大家重视，不自觉也满口的“模块化”，只是你真的理解什么是“模块化”吗？
什么是模块化？
对“模块化”的解释，在 CNKI 中就有28种。可见“模块化”思维使用的广泛。最接近页面重构中的“模块化”，现有的解释应该就是软件开发中的解释了。
先看一下百度词条是怎么解释“ 模块化 ”的：
模块化是指解决一个复杂问题时自顶向下逐层把软件系统划分成若干模块的过程。每个模块完成一个特定的子功能，所有的模块按某种方法组装起来，成为一个整体，完成整个系统所要求的功能。模块具有以下几种基本属性：接口、功能、逻辑、状态，功能、状态与接口反映模块的外部特性，逻辑反映它的内部特性。在软件的体系结构中，模块是可组合、分解和更换的单元。
相关的书籍也蛮多的，有兴趣的同学可以搜一下。需要强调一点，我们所借鉴的是一种思维的方式。
页面制作为什么需要模块化？
站点内容越来越多、代码越来越臃肿，渐渐影响到了客户端的体验（主要是打开速度），影响到了维护的效率。有什么方法可以解决这些问题呢？
我们很容易就想到：减少代码冗余、提高代码重用率、图片压缩等等，而这些要如何实现呢？模块化思维可以解决，即可以有效减少代码冗余、提高代码重用率，更重要是可以支持到多人维护，降低维护成本。CSS写法较为灵活，容易产生代码的耦合，使用模块化也可以在一定程度上降低耦合度，对于BUG的定位也有帮助。所以，我们更应该在站点前期就重视并使用“模块化的思维”编写站点。
我们之前经常提到的站点性能优化，有相当一部分也是“模块化”的内容，比如提高代码重用，提高开发效率等等，“模块化”的优点还有很多，我大概列了一下：
- 提高代码重用率
- 提高开发效率、减少沟通成本
- 降低耦合
- 降低发布风险
- 减少Bug定位时间和Fix成本
- 提高页面容错
- 更好的实现快速迭代
- 更好的支持灰度发布
其中最重要的一点，我认为是“提高代码重用率”，这也是模块化最重要的特点之一。
如何实现“模块化”？
这里的主要问题是HTML与CSS的“模块化”，我们可以看下换肤的实现方法：
- 同一类名，换文件（JS）
- 同一文件，换类名（JS）
由此可知HTML与CSS的接口实现：
- CSS引入的三种方式
- 类名
为了更好的实现这种接口，需要有相关的（交互、设计、页面、开发）约定、规则、规范，比如：所有当前状态都使用同一个类名“nonce”，所有变灰的表现都使用原类名后加“_n”，Tab的实现方式等等。有了这些约定、规则、规范后，HTML代码就很容易可以实现模板化，统一接口规范。
有两个误区需要先认清下：
- 模块化后并不是就能被使用在任何位置（模块化后的代码段也是有适用的范围限制，需要一个提供接口规则的环境）
- 模块化后并不是就不能再变更（模块化后的代码段可根据实际需要做修改）
完全独立的模块放在同一项目中，由于项目有自己的表现、交互统一性，所以各模块间必定出现类似的部分，这些部分可以被提出来做为公共的定义，减少冗余，这时就会出现耦合的问题，完全不耦合是不可能的，因此模块化中很重要一点就是“适度的耦合”。有了公共定义，就得调整模块样式的实现方式了，而这种调整也会影响到“接口”的实现方式。
由于本篇主要是讲模块化的思维方式，具体实现的细节留待以后的文章中探讨。相关内容可以看下之前写的《 从宜家的家具设计讲模块化 》。欢迎一起讨论。
文章地址：http://www.cssforest.org/blog/index.php?id=134
《页面重构中的模块化思维》采用的授权是创作共用的 “署名-非商业性使用-相同方式共享 3.0 通用许可”.
文章被分类到：重构思想
林小志 在 404 日 之前 说：
传说中的沙发。
对于模块化有一点体会，但不是很深入。
个人有待加强。
对于鬼哥所提的观点基本上还是认同的。
愚人码头 在 404 日 之前 说：
抢了板凳再看文章！
Robin 在 404 日 之前 说：
我占到地板了.
不知道鬼哥这里提到的模块, 是指可以在一个站点中复用的东西还是可以在多个站点中复用?
如果仅在一个或一系列类似风格的站点上使用我觉得还不错. 可是要想在多个风格迥异的站点上使用, 那么必然要把模块写的足够“抽象”, 但是太“抽象” 是不是会使其实用性下降?
我们一直在做组件的开发,一个组件可以在很多个风格不同的网站上使用. 不知道是不是和鬼哥想做的东西如出一辙.
Shally 在 404 日 之前 说：
是不是类似于这种``??
<div class=“mod mod-news”></div>
<div class=“mod mod-products”></div>
will 在 404 日 之前 说：
如果做小项目模块化用到的比较少，不过大型项目模块化是必然的！
lwid 在 404 日 之前 说：
由于工作原因，最近一直在做页面重构模块化
冰剑 在 404 日 之前 说：
看了文章感觉鬼哥说的还有点泛！期待更详细的以后文章！
墨尔本 在 404 日 之前 说：
有的时候觉得叶面模块化就是在瞎折腾
但还是不得不去折腾。。。
Ghost 在 404 日 之前 说：
@Robin 更多的是在同一项目中的模块化，当然有些模块也是可以在多个项目间公用的，这些都是实现方式的问题。如果把HTML和CSS看成是不同的模块方式实现，对于多项目的支持就比较容易实现。
@冰剑 我也觉得有点空泛，跟我的表达能力也有关，加上我也还有很多地方没想透。页面重构中的模块化思维，虽然大家都不自觉的在使用，可是没有一个成型的理论或方法论之类的东西，也希望由此能引起大家更多的思考。
吾可. 在 404 日 之前 说：
模块化涉及的东西还是挺多，比如命名规范，优先级，重置等，自己还是比较模糊，希望能多从各位前辈那学习更多，呵呵，初次给鬼哥留言，多多指教
rain.kx 在 404 日 之前 说：
知道讲什么.明白想说什么.
但是没看懂..
最近.光长肉了..
挑战书 在 401 日 之前 说：
为什么需要模块化总结的不错。我觉得模块化最重要的是易于维护和提高可读性。
Kane 在 400 日 之前 说：
页面 module 化的话，的确是不错的。特别是给程序员剩下很多沟通时间，可以很方便的在其他页面使用对应的模块。我认为model化的话要准备好3个条件
1.定义出模块的种类（列表类型，图文类等等）
2.定义模块的风格种类（size、color、line-height等），如果能统一是最方便的。
3.编写好相关模块的接口和规范文档
moondy 在 394 日 之前 说：
模块化会或多或少增加一定的代码量，不过对于可读性以及扩展性来说，是很有必要的
啊丢 在 394 日 之前 说：
越来越深奥了！ 我得多学习了
芝麻开门 在 379 日 之前 说：
你好，对于“模块化也可以在一定程度上降低耦合度”有些不明白，是不是可以理解为相同的模块不同的显示位置写不同的CSS吗？
Ghost 在 378 日 之前 说：
@芝麻开门 模块化的特点之一是“相对独立”，即然是独立的模块，当然耦合应该是比较少的。