基类、扩展类──页面重构中的模块化设计(五)

Ghostzhang 发表于

基类 和 扩展类 是这个系列的主要内容,上一篇《 模块化的核心思想──页面重构中的模块化设计(四) 》中只是简单提了一下,我们再深入的来了解下它们。

一般所使用的“模块化”的方法,就是以某一个类做为定义的开始,比如:


/* 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列表 */

这个例子: 两个列表模块 。

效果展示

这种方式是比较常见的,可以很好的将一个模块独立出来。如果使用新学习到的“方法”来写这两个列表模块,应该是怎样?

基类
(基础样式)模块的基础表现。包含了模块中大部分的状态。

也就是说,当出现多个类似的模块时,基类包含了这些模块的大部分的效果(或者理解为公共的部分),在基类的基础上,我们可以通过添加很少的代码——扩展类,来达到所需要要效果。像这样:


/* 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模块怎么实现(样式部分):


/* 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 消息 基类 */

别忘了提示条,虽然是用于模块中,但它应该是可以被更广泛使用的模块,因此我把它单独提了出来:


/* 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模块:


/* S 消息 扩展 */
.message_nopic{padding-left:0;}
/* E 消息 扩展 */

只需要一句,将头像去掉即可。

评论列表