用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对盒模型的解析:在 ...

随机推荐

CoreAnimation(CA)
开发者真会玩,原来我看到CA都懵了.啥是CA?原来就是Core Animation.哎,读书少啊,被虐成
c语言的简易日历
用c语言编写的简易日历,代码如下: #include <stdio.h> int main(int argc, const char * argv[]) { // insert code ...
[android] 手机卫士自定义对话框布局
手机防盗页面部分点击手机防盗,进行判断,如果没有设置密码,显示一个设置密码的对话框,如果已经设置密码了,弹出输入密码对话框密码保存在SharedPreferences中,数据取出进行判断自定义一 ...
关于Assets.car素材问题
最近在做自己的第一个App,由于全程都是自己一个人完成,所以原型设计.素材都得自己找,自己改.遇到了提取Assets.car中的素材的问题,通过网络找到了2中解决方法: themeEngine 使用 ...
C# List中随机获取N个字符
static void Main(string[] args) { List<string> strList = new List<string>(); ; i <= ; ...
回文数第N个回文数
判断回文数还是不难,如果能转为字符串就更简单了. 如果是求第N个回文数呢. 12321是一个回文数,这里先考虑一半的情况. 回文数的个数其实是有规律的.如: 1位回文数: 9个 2位回文数: 9个 3 ...
(ios实战)单个ViewControl适配不同ios版本xib文件实现
xcode5 中的界面布局根据sdk 分成ios7.0 and Later 和 ios6.1 and Earlier 两种,那如何xib同时支持 ios6 和ios7 的界面呢方法如下: 在xco ...
Effective Java 43 Return empty arrays or collections, not nulls
Feature Return empty arrays or collection Return nulls Avoids the expense of allocating the array N ...
在VS项目中通过GIT生成版本号作为编译版本号
上一篇博客写了如何在 .Net 项目使用 SVN 作为版本控制工具时生成与代码对应的组件版本号.虽然在公司一直使用 SVN ,但我却对 GIT 情有独钟(可能要归功于那段捣鼓 ROM 的时光),但少有 ...
Oracle与SQL SERVER编程差异分析（入门）
网上有关Oracle与SQL SERVER性能差异的文章很多,结论往往是让你根据数据量与预算来选择数据库.但实际项目中,特别是使用 .Net 开发的系统,支持以上两种数据库或者更多已经成为Boss的普 ...

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

需求更改

多用组合，少用继承

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

随机推荐

热门专题