用css实现下面的效果图。

方案一

<style type="text/css">

.myList1 { border: 1px solid #333; padding: 10px; }

.myList1 li { height: 20px; line-height: 20px; font-size: 12px; }

.myList2 { border: 1px solid #333; padding: 10px; }

.myList2 li { height: 20px; line-height: 20px; font-size: 16px; }

.myList3 { border: 1px solid #333; padding: 10px; }

.myList3 li { height: 20px; line-height: 20px; font-size: 12px; color: red; }

</style>

<ul class="myList1">

    <li>aaaaaaaaa</li>

    <li>bbbbbbbbb</li>

    <li>ccccccccc</li>

</ul>

<ul class="myList2">

    <li>ddddddddd</li>

    <li>eeeeeeeee</li>

<li>fffffffff</li>

</ul>

<ul class="myList3">

    <li>ggggggggg</li>

    <li>hhhhhhhhh</li>

<li>jjjjjjjjj</li>

</ul>

方案一可以实现我们想要的效果，但它非常冗余，myList1，myList2，myList3的css设置相同，‘myList1 li’、‘myList2 li’、‘myList2 li’有部分css一致。我们需要对它们进行改进。

方案二

<style type="text/css">

.myList1, .myList2, .myList3 { border: 1px solid #333; padding: 10px; }

.myList1 li, .myList2 li, .myList3 li { height: 20px; line-height: 20px; font-size: 12px; }

.myList2 li { font-size: 16px; }

.myList3 li { color: red; }

</style>

<ul class="myList1">

    <li>aaaaaaaaa</li>

    <li>bbbbbbbbb</li>

    <li>ccccccccc</li>

</ul>

<ul class="myList2">

    <li>ddddddddd</li>

    <li>eeeeeeeee</li>

<li>fffffffff</li>

</ul>

<ul class="myList3">

    <li>ggggggggg</li>

    <li>hhhhhhhhh</li>

<li>jjjjjjjjj</li>

</ul>

方案二和方案一思路相同，仍将模块视为完全不同彼此独立的三个类，只是对css代码做了精简工作。去除了代码冗余。

方案三

<style type="text/css">

.myList { margin-bottom: 10px; width: 300px; }

.f12 { font-size: 12px; }

.f16 { font-size: 16px; }

.red { color: red; }

.myList { border: 1px solid #333; padding: 10px; }

.myList li { height: 20px; line-height: 20px; }

</style>

<ul class="myList f12">

    <li>aaaaaaaaa</li>

    <li>bbbbbbbbb</li>

    <li>ccccccccc</li>

</ul>

<ul class="myList f16">

    <li>ddddddddd</li>

    <li>eeeeeeeee</li>

    <li>fffffffff</li>

</ul>

<ul class="myList f12 red">

    <li>ggggggggg</li>

    <li>hhhhhhhhh</li>

    <li>jjjjjjjjj</li>

</ul>

方案三换了新思路，提取了更多的粒度更小类，通过类的组合实现设计图的效果。

方案二和方案三看似都是不错的解决方案，其中方案二的优势是调用简单，一个模块只需要挂一个类；方案三调用稍微麻烦，但也有效控制了冗余，代码精简。

看起来方案二和方案三都不错，但如果想实现下图的效果，又会如何呢？

需求更改

按照方案二的思路，我们需要再定义一个新的类myList4.代码清单如下:

<style type="text/css">

.myList1, .myList2, .myList3, .myList4 { border: 1px solid #333; padding: 10px; }

.myList1 li, .myList2 li, .myList3 li { height: 20px; line-height: 20px; font-size: 12px; }

.myList2 li { font-size: 16px; }

.myList3 li { color: red; }

.myList4 li { font-size: 16px; color: red; }

</style>

<ul class="myList1">

    <li>aaaaaaaaa</li>

    <li>bbbbbbbbb</li>

    <li>ccccccccc</li>

</ul>

<ul class="myList2">

    <li>ddddddddd</li>

    <li>eeeeeeeee</li>

    <li>fffffffff</li>

</ul>

<ul class="myList3">

    <li>ggggggggg</li>

    <li>hhhhhhhhh</li>

    <li>jjjjjjjjj</li>

</ul>

<ul class="myList4">

    <li>LLLLLLLLL</li>

    <li>MMMMMMMMM</li>

    <li>NNNNNNNNN</li>

</ul>

按照方案三的思路，我们无需扩展新的类，只需要在HTML的标签的class里将之前定义的类重新组合即可。

<style type="text/css">

.f12 { font-size: 12px; }

.f16 { font-size: 16px; }

.red { color: red; }

.myList { border: 1px solid #333; padding: 10px; }

.myList li { height: 20px; line-height: 20px; }

</style>

</head>

<body>

<ul class="myList f12">

    <li>aaaaaaaaa</li>

    <li>bbbbbbbbb</li>

    <li>ccccccccc</li>

</ul>

<ul class="myList f16">

    <li>ddddddddd</li>

    <li>eeeeeeeee</li>

    <li>fffffffff</li>

</ul>

<ul class="myList f12 red">

    <li>ggggggggg</li>

    <li>hhhhhhhhh</li>

    <li>jjjjjjjjj</li>

</ul>

<ul class="myList f16 red">

    <li>LLLLLLLLL</li>

    <li>MMMMMMMMM</li>

    <li>NNNNNNNNN</li>

</ul>

多用组合，少用继承

方案三借鉴了编程领域的组合的思想，将方案二中复杂的myList1、myList2、myList3等类拆分成了几个相对简单的类，其中相对稳定的部分拆分成myList类，而可能变化的部分拆成了f12类、f16类和red类。通过类的组合，很容易实现类的扩展，避免产生类爆炸。

知识延伸，面向对象编程

在面向对象中有类似上面的情况:继承和组合。

继承的思路是将一个复杂且包含变化的类，拆分成几个复杂但稳定的子类。首先明确一个抽象的父类，父类有着几乎所有的方法和属性。但使用继承的话，任何一点小的变化也需要重新定义一个类，很容易引起类的爆炸式增长，产生一大堆有着细微不同的子类。

组合的思路是将一个复杂的类分成容易产生变化的部分和相对稳定的部分，将容易变化的部分拆分出去，每一种可能的变化设计成一个个单独的类，而相对稳定部分设计成一个主体类，这样，将一个复杂的类拆分成几个简单的类，类之间没有继承关系，这遵循了面向对象设计的“单一职责”原则。将那些容易变化的类的实例赋值给主体类作为一个属性，这样就实现了类的组合。用组合方式，可以大大减少类的数量。

后记，这是我看过解释继承和组合最容易理解的说法，没有学过面对对象概念的同学可能有些地方不明白。

来源:Web前端开发修炼之道

挂多个class还是新建class —— 多用组合，少用继承的更多相关文章

  1. sau交流学习社区--在element-ui中新建FormData对象组合上传图片和文件的文件对象，同时需要携带其他参数

    今天有一个坑,同时要上传图片和文件,而且图片要展示缩略图,文件要展示列表. 我的思路是: 首先,只上传附件照片,这个直接看ele的官方例子就行,不仅仅上传附件照片,还同时上传其他参数. 然后,再做上传 ...

  2. 多用StringBuilder,少用字符串拼接

    在C#中,在处理字符串拼接的时候,使用StringBuilder的效率会比硬拼接字符串高很多.到底有多高,如下: static void Main(string[] args) { string st ...

  3. CSS之少用继承，多用组合

    下面是一段普通的代码: css: .box{ border:1px solid #ccc; font-size:12px; background:#f1f1f1; padding:10px; } ht ...

  4. idea 在新建一个class的时候可以选择继承的父类

    1.把光标放在父类名称上按alt+enter可以生成子类 2. 选中implement abstract class

  5. 多用as少用强制类型转换

    在 C# 中存在一个名叫静态类型检查的机制,这个机制可以让编译器帮助我们把类型不服的用法找出来,从而使得应用程序在运行期间加少一些类型检查的操作.但是有时候我们还是需要进行运行期类型检查,比如我们在设 ...

  6. 用尽洪荒之力学习Flask源码

    WSGIapp.run()werkzeug@app.route('/')ContextLocalLocalStackLocalProxyContext CreateStack pushStack po ...

  7. Python开发——9.面向对象编程

    一.面向对象设计(Object oriented design) 面向对象设计是将一类具体事物的数据和动作整合到一起的过程,不会要求面向对象语言编程,但如果想要构造具备对象性质和特点的数据类型,需要更 ...

  8. python+selenium之简单介绍继承

    python+selenium之简单介绍继承 一.此例简单的介绍一下继承 1.面向对象的编程带来的主要好处之一是代码的重用,实现这种重用的方法之一是通过继承机制.继承完全可以理解成类之间的类型和子类型 ...

  9. 编写高质量代码:Web前端开发修炼之道（二）

    第四章:高质量的css 1)怪异模式和标准模式 在标准模式中,浏览器根据规范表现页面:而怪异模式通常模拟老式浏览器的行为以防止老站点无法工作. 他们两者之间的差异比较典型的表现在IE对盒模型的解析:在 ...

随机推荐

  1. Jenkins部署.net自动化构建

    1.环境部署: windows server 2008R2环境   2.相关软件 SVN(源代码管理器:jenkins通过插件从源代码管理器下载代码)   Jenkins(主角)地址:http://f ...

  2. Struts2(十六)Json

    一.JSON Json就是浏览器和服务器之间交换数据的一种轻量级对象 javaSctipt中类似的对象操作 $(function() { var person = { "name" ...

  3. 【原】PSD图标素材的全自动切图方法，适用于IOS、安卓、web前端等领域

    屌丝个人开发者经常遇到的尴尬问题是,自己不会设计UI素材又请不起专业的美工.最好的方式是去网上下载符合自己需求的素材修修改改直接用上.但是,在这个过程中会发现很多下载下来的素材是PSD格式的,很多图标 ...

  4. Oracle定义varchar2()类型存储汉字的长度问题

    varchar2最大是4000字节,那么就看你的oracle字符集:(select userenv('language') from dual;)如果字符集是16位编码的,ZHS16GBK,那么每个字 ...

  5. Linux Shell 05 位置变量(命令行参数)

    在Linux shell 脚本中可能会用到一些命令行参数,常见如下: $0:脚本名称 $#:执行脚本时传入的参数个数,不包括脚本名称 $@:所有参数 $*:所有参数 $1...$9:第1个参数.... ...

  6. 更改ubuntu下mysql的密码

    1.首先,进入环境中去,即 mysql  -u  root  -p   ,然后输入原始密码 2.此时会出现 mysql > 3.开始修改密码: mysql >   use  mysql ; ...

  7. JFrame小练习1

    1.文本域组件 public class TestJTextArea { public static void main(String[] args) { JFrame jf=new JFrame(& ...

  8. 烂泥：LVM学习之逻辑卷及卷组缩小空间

    本文由秀依林枫提供友情赞助,首发于烂泥行天下. 上一篇文章,我们学习了如何给LVM的逻辑卷及卷组扩容.这篇文章我们来学习,如何给LVM的逻辑卷及卷组缩小空间. 注意逻辑卷的缩小一定要离线操作,不能是在 ...

  9. nyoj 115 城市平乱 dijkstra最短路

    题目链接: http://acm.nyist.net/JudgeOnline/problem.php?pid=115 dijkstra算法. #include "stdio.h" ...

  10. Linux 之创建工作目录-mkdir

    在Linux下创建工作目录,一般使用 "mkdir" 指令,一下将介绍"mkdir"指令的使用方法,供大家参考. 一.使用帮助 在Linux终端(命令行)输入: ...