用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 —— 多用组合，少用继承的更多相关文章

sau交流学习社区--在element-ui中新建FormData对象组合上传图片和文件的文件对象，同时需要携带其他参数
今天有一个坑,同时要上传图片和文件,而且图片要展示缩略图,文件要展示列表. 我的思路是: 首先,只上传附件照片,这个直接看ele的官方例子就行,不仅仅上传附件照片,还同时上传其他参数. 然后,再做上传 ...
多用StringBuilder,少用字符串拼接
在C#中,在处理字符串拼接的时候,使用StringBuilder的效率会比硬拼接字符串高很多.到底有多高,如下: static void Main(string[] args) { string st ...
CSS之少用继承，多用组合
下面是一段普通的代码: css: .box{ border:1px solid #ccc; font-size:12px; background:#f1f1f1; padding:10px; } ht ...
idea 在新建一个class的时候可以选择继承的父类
1.把光标放在父类名称上按alt+enter可以生成子类 2. 选中implement abstract class
多用as少用强制类型转换
在 C# 中存在一个名叫静态类型检查的机制,这个机制可以让编译器帮助我们把类型不服的用法找出来,从而使得应用程序在运行期间加少一些类型检查的操作.但是有时候我们还是需要进行运行期类型检查,比如我们在设 ...
用尽洪荒之力学习Flask源码
WSGIapp.run()werkzeug@app.route('/')ContextLocalLocalStackLocalProxyContext CreateStack pushStack po ...
Python开发——9.面向对象编程
一.面向对象设计(Object oriented design) 面向对象设计是将一类具体事物的数据和动作整合到一起的过程,不会要求面向对象语言编程,但如果想要构造具备对象性质和特点的数据类型,需要更 ...
python+selenium之简单介绍继承
python+selenium之简单介绍继承一.此例简单的介绍一下继承 1.面向对象的编程带来的主要好处之一是代码的重用,实现这种重用的方法之一是通过继承机制.继承完全可以理解成类之间的类型和子类型 ...
编写高质量代码:Web前端开发修炼之道（二）
第四章:高质量的css 1)怪异模式和标准模式在标准模式中,浏览器根据规范表现页面:而怪异模式通常模拟老式浏览器的行为以防止老站点无法工作. 他们两者之间的差异比较典型的表现在IE对盒模型的解析:在 ...

随机推荐

iOS 基础日记－修饰符
今晚随便温习了一下iOS 基础关于修饰符这块的东西,下面简单的来描述一下,其中有的也是在网络学习到的: strong与weak是由ARC新引入的对象变量属性 ARC的解释:ARC引入了新的对象的生命周 ...
iOS之UI--CAShapeLayer
关于CAShapeLayer 内容大纲: CAShapeLayer简介贝塞尔曲线与CAShapeLayer的关系 strokeStart和strokeEnd 动画用CAShapeLayer实现进度 ...
Mac上的软件使用介绍
目录大纲: Drop to GIF Parallels Desktop 1.Drop to GIF 功能:将视频文件可以生产动态图gif文件网址在github上:https://github.com ...
Android之左右滑动菜单
近来学习了极客学院有关于界面左右滑动的视频,就在这里写个博客,巩固一下知识点,以免忘了. 这里主要介绍界面是如何左右滑动的: 1.首先我们应该设置好将要滑动的三个界面,即leftMenu.middle ...
JMeter源码集成到Eclipse
由于JMeter纯Java开发,界面也是基于Swing或AWT搞出来的,所以想更深层次的去了解这款工具或对于想了解JMeter插件开发或二次开发的童鞋们来说,读读JMeter的源码估计是必不可少的,所 ...
PHP面试题集之基础题
1.用PHP打印出前一天的时间格式是 2006-5-10 22:21:21 date_default_timezone_set('PRC'); //默认时区 echo "今天:", ...
javascript图片库
将图片发布到网上的办法很多,可以简单地把所有图片都放在一个网页中,但是会导致这个网页过于庞大.为每张图片分别创建一个网页的解决办法值得考虑,但是制作过程需要花费非常多的时间和精力. 如果想要两全其美, ...
JSON、使用JSON进行数据交换的基础和原理
1. JSON 1.1. JSON 1.1.1. 什么是JSON JSON即Javascript对象表示法,是一种现在主流的数据交换格式.之所以应用广泛还是由其简单易读所决定的. 简单,只有六种类型的 ...
在jsp中默认写上的一段java代码表示basePath 的路径的具体的意思是什么？
<% String path = request.getContextPath(); String basePath = request.getScheme() + "://" ...
JavaScript中点号“.”的多义性
点号「.」在JavaScript中有两种语义语义1.表示算术中的小数点(浮点数),如 2.5 语义2.取对象属性.方法,如 [].push(2) 这几乎没有任何难理解的地方,但下面这个问题则很有趣. ...

挂多个class还是新建class —— 多用组合，少用继承

需求更改

多用组合，少用继承

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

随机推荐

热门专题