基类、扩展类──页面重构中的模块化设计（五）
由 Ghostzhang 发表于 2010-06-11 19:24
基类 和 扩展类 是这个系列的主要内容，上一篇《 模块化的核心思想──页面重构中的模块化设计（四） 》中只是简单提了一下，我们再深入的来了解下它们。
一般所使用的“模块化”的方法，就是以某一个类做为定义的开始，比如：
代码语言：javascript复制/* S 图片列表 */
.pic_lists li,
.pic_lists li img{float:left;width:122px;height:122px;margin-bottom:8px;}
.pic_lists li{list-style:none;margin:0 0 0 6px;text-align:center;}
.pic_lists li .pic{display:block;border:1px solid #476081;}
/* E 图片列表 */
/* S mtv列表 */
.mtv_lists{width:930px;height:130px;}
.mtv_lists li,
.mtv_lists li img{float:left;width:120px;margin-bottom:8px;}
.mtv_lists li{list-style:none;margin:0 10px 0 0;text-align:center;}
.mtv_lists li img{height:90px;border:1px solid #476081;}
.mtv_lists li .pic{display:block;width:120px;height:90px;margin-bottom:8px;}
/* E mtv列表 */这个例子： 两个列表模块 。
效果展示
这种方式是比较常见的，可以很好的将一个模块独立出来。如果使用新学习到的“方法”来写这两个列表模块，应该是怎样？
基类（基础样式）模块的基础表现。包含了模块中大部分的状态。
也就是说，当出现多个类似的模块时，基类包含了这些模块的大部分的效果（或者理解为公共的部分），在基类的基础上，我们可以通过添加很少的代码——扩展类，来达到所需要要效果。像这样：
代码语言：javascript复制/* S 列表 基类 */
.mode_lists li,
.mode_lists li img{float:left;width:122px;margin-bottom:8px;}
.mode_lists li{list-style:none;margin:0 10px 18px 0;text-align:center;}
.mode_lists li img{border:1px solid #476081;}
/* E 列表 基类 */
/* S 图片列表 */
.pic_lists li,
.pic_lists li img{height:122px;}
.pic_lists li{margin:0 0 8px 6px;}
.pic_lists li .pic{display:block;border:1px solid #476081;}
/* E 图片列表 */
/* S mtv列表 */
.mtv_lists{width:930px;height:130px;}
.mtv_lists li,
.mtv_lists li img{width:120px;height:90px;}
.mtv_lists li .pic{display:block;margin-bottom:8px;}
/* E mtv列表 */可能你会觉得这样的样式不就多写了，还得把原先的模块类变成两个。的确不是所有的模块都值得这样去做，于是我们可以得到一种“偷懒”的作法，把其中一个模块直接变成基类。对于经常会被使用的模块，像图片列表、播放列表等，这种写法在代码的复用和效率会有一定的提高。一般情况下只需要做下简单的修改即可应用，来看一个复杂些的例子：
一个带头像的消息列表（A）
不带头像的简化列表（B）
看看这两个图，在脑中先想想如果是你，你要怎么实现。……5分钟过去了……差不多有方案了，按上面的思路，基类是包含了大部分的效果的，也就是说基类应该能满足大部分效果的需要，两个模块间差异的地方，可以通过扩展类来完成。当然前提是这两个模块有能找到类似的点，能够形成基类。
在这两个模块中，我们不难看出，A模块和B模块在信息的部分是很类似的，虽然B模块的列表不需要A模块的评论部分，但这并不影响B模块的表现。所以我们可以把这两个模块看成的类似模块。另个，以哪个为基类呢？从满足大部分效果这个要求来看，很明显A模块做为基类是要比B模块做为基类更合适的，如果用B模块做基类，那么需要写更多的扩展类来满足A的需要。另外还有一个重要的点，之所以选择A模块为基类，是因为A在栏目中被更多的页面使用。
OK，来看看A模块怎么实现（样式部分）：
代码语言：javascript复制/* S 消息 基类 */
.mode_message{position:relative;padding:8px 3px 8px 48px;border-bottom:1px solid #DAECF6;_zoom:1;line-height:1.3;}
.mode_message .user_info{position:absolute;left:3px;top:10px;}
.mode_message .user_info .pic img{width:35px;height:35px;}
.mode_message .mode_message_cont{color:#797979;word-break:normal;word-wrap:break-word;}
.mode_message .mode_message_cont .info{display:block;zoom:1;}
.mode_message .mode_message_cont .info .music_name{color:#22639B;}
.mode_message .mode_message_cont .info .op_music{display:none;}
.mode_message .mode_message_cont .info:hover .op_music,
.mode_message .mode_message_cont .info.hover .op_music{display:block;position:absolute;right:5px;top:7px;background-color:#FFFFFF;}
.mode_message .msg{padding:2px 0;word-break:normal;word-wrap:break-word;}
.mode_message .mode_message_cont .op{margin-bottom:3px;}
.mode_message .time{display:inline-block;*display:inline;*zoom:1;font-size:10px;}
.mode_message .msg .p_zt_l,.mode_message .msg .p_zt_r{display:inline-block;*display:inline;*zoom:1;width:13px;height:8px;background:url(img/_g_other.png) no-repeat -17px -17px;vertical-align:text-middle;*vertical-align:middle;}
.mode_message .msg .p_zt_r{background-position:0 -28px;}
.mode_message .write_back .cont{margin-bottom:2px;padding:5px;background-color:#EAF6FA;_zoom:1;}
.mode_message .write_back .cont .cont{border-left:1px solid #ABCFE1;}
.mode_message .write_back .cont .zt{*overflow:hidden;}
.mode_message .write_back .cont .zt2{*padding-right:6px;}
.mode_message .write_back .cont .zt textarea{width:100%;height:40px;padding:0 2px;border:1px solid #D1E1EC;line-height:20px;color:#4F4F4F;}
.mode_message .write_back .cont .zt .normal textarea{height:23px;color:#B1B4B8;}
.mode_message .write_back .cont .zt .normal .op{display:none;}
.mode_message .write_back .cont .op{margin:5px 0 0;}
.mode_message .write_back .cont .op .bt_v2{padding:0 2px;vertical-align:middle;}
.mode_message .write_back .cont .zt{width:98.5%;*width:99.9%}
.mode_message:nth-last-child(1){border-bottom:none;}
/* E 消息 基类 */别忘了提示条，虽然是用于模块中，但它应该是可以被更广泛使用的模块，因此我把它单独提了出来：
代码语言：javascript复制/* S 提示条 基类 */
.mode_hint{position:relative;margin:3px 0;padding:5px;background-color:#FFFEAB;color:#000000;_zoom:1;}
.mode_hint .op{position:absolute;right:8px;top:5px;}
.mode_hint .op a{color:#000000;}
/* E 提示条 基类 */还有像按钮、全局定义这些内容，就不列出了。完整的可以看下面。
效果展示
例子中可以看到，扩展类的定义很少，只是一些简单的定义，像B模块：
代码语言：javascript复制/* S 消息 扩展 */
.message_nopic{padding-left:0;}
/* E 消息 扩展 */只需要一句，将头像去掉即可。
