【速学速记】《设计模式》这样学就对了!
李运通,微医前端技术部前端工程师。最怕你一生碌碌无为,还安慰自己平凡可贵。
设计模式解决什么痛点?
它是解决特定问题的一系列套路,是前辈们的代码设计经验的总结,具有一定的普遍性,可以反复使用。其目的是为了
提高代码的可复用性、可读性、可维护性
。
设计模式的本质是面向对象设计原则的实际运用,是对类的封装性、继承性和多态性以及类的关联关系和组合关系的充分理解。不要重复造轮子
。
什么是面向对象编程
面向对象编程
是一种编程范式或编程风格。它以类或对象作为组织代码的基本单元,并将封装、抽象、继承、多态四大特性,作为代码设计和实现的基石。面向对象编程语言
是支持类或对象的语法机制,并有现成的语法机制,能方便的实现面向对象编程四大特性的编程语言面向对象开发
包括面向对象分析 OOA、面向对象设计 OOD、面向对象编程 OOP
10大设计原则
1.单一职责原则 SRP
实现类要职责单一
:如果一段代码块(函数 类 模块)负责多个功能,那么当 A 功能需求发生改变的时候改动了代码,就有可能导致 B 功能出现问题,所以一段代码块只应该负责一个职责。
2.开放-封闭原则 OCP
要对扩展开放,对修改关闭
:通过修改老代码来实现新功能可能导致老模块出现 BUG,所以我们应该通过开发新代码块来实现新功能
3.里氏替换原则 LSP
不要破坏继承体系
:程序中的子类应该可以替换父类出现的任何地方并保持预期不变。所以子类尽量不要改变父类方法的预期行为
4.接口隔离原则 ISP
设计接口的时候要精简单一
:当类 A 只需要接口 B 中的部分方法时,因为实现接口需要实现其所有的方法,于是就造成了类 A 多出了部分不需要的代码。这时应该将 B 接口拆分,将类A需要和不需要的方法隔离开来
5.依赖倒置原则 DIP
面向接口编程
:抽象不应该依赖细节,细节应该依赖于抽象。核心是面向接口编程,我们应该依赖于抽象接口,而不是具体的接口实现类或具体的对象
注意:上面的 SOLID 又称为5大设计原则
6.最少知识原则(迪米特原则)LOD
降低耦合度
:一个类或对象应该对其它对象保持最少的了解。只与直接的朋友(耦合)通信。
7.组合/聚合复用原则 CRP
多用组合少用继承
:尽可能通过组合已有对象(借用他们的能力)来实现新的功能,而不是使用继承来获取这些能力
8.不要重复你自己 DRY
功能语义重复应该合并,代码执行重复应该删减,代码逻辑重复但语义不同应该保留
9.尽量保持简单 KISS
尽可能使用简单可读性高的代码实现功能,而不用逻辑复杂、实现难度高、可读性差的方式
10.不要过度设计你暂时用不到的逻辑 YAGNI
不要过度优化、不要过度预留扩展点、不要设计同事看不懂的代码。
23种设计模式速记
速记:5+7=11 5种创建型 7种结构型 11种行为型 创建型: 抽工单建原型
抽象工厂、工厂、单例、建造者、原型 结构型: 桥代理装饰适配器,享元组合成门面
桥接、代理、装饰器、适配器、享元、组合、门面(外观) 行为型: 观察模板迭代的状态,命令中介解释职责链,访问策略备忘录
观察者、模板、迭代、状态、命令、中介者、解释器、职责链、访问者、策略、备忘录
创建型设计模式
封装对象创建过程,将对象的创建和使用解耦
单例模式
应用场景
处理资源访问冲突、用来创建全局唯一类
解决方案
懒汉式:用到的时候才创建(场景:不一定需要用到、创建代价大、延迟加载、需要快速启动系统) 饿汉式:系统启动时创建(场景:必定用到、临时创建影响响应速度) 多例:同一类的固定个数相同实例
工厂模式
应用场景
用来创建继承同一父类、实现同一接口的子类
对象,由给定的类型参数创建具体的对象。
解决方案
enum HelloType {
A,
B
}
interface Hello {
sayHello()
}
class A implements Hello {
sayHello() {
console.log('A');
}
}
class B implements Hello {
sayHello() {
console.log('B');
}
}
class HelloFactory {
static list = new Map<HelloType, Hello>([
[HelloType.A, new A()],
[HelloType.B, new B()]
])
static getHello(type: HelloType) {
return HelloFactory.list.get(type)
}
}
// test
HelloFactory.getHello(HelloType.A).sayHello()
HelloFactory.getHello(HelloType.B).sayHello()
抽象工厂模式
应用场景
继承同一父类、实现同一接口的子类
对象,由给定的多个类型参数创建具体的对象。
解决方案
enum Type {
A,
B
}
enum Occupation {
TEACHER,
STUDENT
}
interface Hello {
sayHello()
}
class TA implements Hello {
sayHello() {
console.log('Teacher A say hello')
}
}
class TB implements Hello {
sayHello() {
console.log('Teacher B say hello')
}
}
class SA implements Hello {
sayHello() {
console.log('Student A say hello')
}
}
class SB implements Hello {
sayHello() {
console.log('Student B say hello')
}
}
class AFactory {
static list = new Map<Occupation, Hello>([
[Occupation.TEACHER, new TA()],
[Occupation.STUDENT, new SA()]
])
static getHello(occupation: Occupation) {
return AFactory.list.get(occupation)
}
}
class BFactory {
static list = new Map<Occupation, Hello>([
[Occupation.TEACHER, new TB()],
[Occupation.STUDENT, new SB()]
])
static getHello(occupation: Occupation) {
return BFactory.list.get(occupation)
}
}
class HelloFactory {
static list = new Map<Type, AFactory | BFactory>([
[Type.A, AFactory],
[Type.B, BFactory]
])
static getType(type: Type) {
return HelloFactory.list.get(type)
}
}
// test
HelloFactory.getType(Type.A).getHello(Occupation.TEACHER).sayHello()
HelloFactory.getType(Type.A).getHello(Occupation.STUDENT).sayHello()
HelloFactory.getType(Type.B).getHello(Occupation.TEACHER).sayHello()
HelloFactory.getType(Type.B).getHello(Occupation.STUDENT).sayHello()
建造者模式
应用场景
创建时有很多必填参数需要验证 创建时参数求值有先后顺序、相互依赖 创建有很多步骤,全部成功才能创建对象
解决方案
class Programmer {
age: number
username: string
color: string
area: string
constructor(p) {
this.age = p.age
this.username = p.username
this.color = p.color
this.area = p.area
}
toString() {
console.log(this)
}
}
class Builder {
age: number
username: string
color: string
area: string
build() {
if (this.age && this.username && this.color && this.area) {
return new Programmer(this)
} else {
throw new Error('缺少信息')
}
}
setAge(age: number) {
if (age > 18 && age < 36) {
this.age = age
return this
} else {
throw new Error('年龄不合适')
}
}
setUsername(username: string) {
if (username !== '小明') {
this.username = username
return this
} else {
throw new Error('小明不合适')
}
}
setColor(color: string) {
if (color !== 'yellow') {
this.color = color
return this
} else {
throw new Error('yellow不合适')
}
}
setArea(area: string) {
this.area = area
return this
}
}
// test
const p = new Builder()
.setAge(20)
.setUsername('小红')
.setColor('red')
.setArea('hz')
.build()
.toString()
原型模式
应用场景
原型模式是基于已有的对象克隆数据,而不是修改原型链! 创建对象的代价太大,而同类的不同实例对象属性值基本一致。通过原型克隆的方式节约资源 不可变对象通过浅克隆实现 可变对象通过深克隆实现,深克隆占用资源多 同一对象不同时间版本,可以对比没变化的浅克隆,变化的深克隆,然后新版本替换旧版本。
结构型设计模式
总结了一些类或对象组合在一起的经典结构,这些经典结构可以解决特定应用场景的问题,将类或对象的结构和使用解耦
桥接模式
应用场景
将抽象和实现解耦,让它们可以独立变化 一个类存在多个独立变化的维度,我们通过组合的方式,让多个维度可以独立进行扩展 非常类似于组合优于继承原则
解决方案
enum MsgLevel {
ERROR,
WARN,
}
enum MsgType {
EMAIL,
PHONE
}
interface MsgContent {
content()
}
class ErrorMsg implements MsgContent {
content() {
return 'ERROR'
}
}
class WarnMsg implements MsgContent {
content() {
return 'WARN'
}
}
interface MsgSender {
send()
}
class PhoneSend implements MsgSender {
msgContent: MsgContent
constructor(msgContent: MsgContent) {
this.msgContent = msgContent
}
send() {
console.log(`phone send ${this.msgContent.content()}`)
}
}
class EmailSend implements MsgSender {
msgContent: MsgContent
constructor(msgContent: MsgContent) {
this.msgContent = msgContent
}
send() {
console.log(`email send ${this.msgContent.content()}`)
}
}
// test 此处还可以做成map结构继续优化(略)
new PhoneSend(new WarnMsg()).send()
new PhoneSend(new ErrorMsg()).send()
new EmailSend(new WarnMsg()).send()
new EmailSend(new ErrorMsg()).send()
代理模式
应用场景
给原类添加非功能性需求,为了将代码与原业务解耦 业务系统的非功能性需求开发:监控、统计、鉴权、限流、日志、缓存
解决方案
通过继承实现(不推荐)
class User{
login(){
console.log('user login...')
}
}
class UserProxy extends User{
login() {
console.log('login before')
super.login()
console.log('login after')
}
}
通过接口实现(推荐)
interface Login {
login()
}
class User implements Login {
login() {
console.log('user login...')
}
}
class UserProxy implements Login {
user = new User()
login() {
console.log('login before')
this.user.login()
console.log('login after')
}
}
装饰器模式
应用场景
装饰器类是对原始功能的增强 装饰器类和原始类继承同样的父类,这样我们可以对原始类嵌套多个装饰器类 主要解决继承关系过于复杂的问题,通过组合来替代继承 可以通过对原始类嵌套使用多个装饰器
解决方案
通过 AOP 实现
Function.prototype.before = function (beforeFn) {
return (...arg) => {
beforeFn(...arg);
return this(...arg);
}
};
Function.prototype.after = function (afterFn) {
return (...arg) => {
const result = this(...arg);
afterFn(...arg);
return result;
}
};
function ImportEvent1 {
console.log('重要的事情说三遍 1')
}
function ImportEvent2 {
console.log('重要的事情说三遍 2')
}
function ImportEvent3 {
console.log('重要的事情说三遍 3')
}
// test
ImportEvent2.before(ImportEvent1).after(ImportEvent3)()
适配器模式
应用场景
适配器模式用于补救设计上的缺陷,将不兼容的接口变得兼容 封装有缺陷的接口设计 统一多个类的接口设计 替换依赖的外部系统 兼容老版本接口 适配不同格式的数据
解决方案
原接口方法不多,类适配器和对象适配器都可以 如果原类方法很多,并且和目标接口差异小,用类适配器减少代码量 如果原类方法很多,并且和目标接口差异大,用对象适配器,组合优于继承
// 目标接口格式
interface ITarget {
f1()
f2()
f3()
}
// 原有类与目标接口不兼容
class Origin {
fa() {
}
fb() {
}
f3() {
}
}
// 使用适配器来兼容
class Adaptor implements ITarget {
origin = new Origin()
f1() {
this.origin.fa()
}
f2() {
this.origin.fb()
}
f3() {
this.origin.f3()
}
}
享元模式
应用场景
共享的单元。复用对象,节省内存,前提是享元对象是不可变对象(初始化之后不再改变)。
解决方案
比如网上象棋游戏有1000个房间,每个房间有1个棋盘,棋盘当前状态(棋子位置)各不相同,但棋子的大小、颜色、名字是相同且固定的,可以设计成享元
组合模式
应用场景
将一组对象组织成树形结构,以表示一种“部分-整体”的层次结构。组合模式让客户端可以统一单个对象和组合对象的处理逻辑(递归遍历)
解决方案
abstract class FileSystemNode {
path: string
abstract getFilesCount()
abstract getFilesSize()
}
class FileNode extends FileSystemNode {
constructor(path) {
super();
this.path = path
}
getFilesCount() {
return 1
}
getFilesSize() {
return require(this.path).length
}
}
class Directory extends FileSystemNode {
subNodes = []
constructor(path) {
super();
this.path = path
}
getFilesCount() {
return this.subNodes.reduce(item => item.getCount(), 0)
}
getFilesSize() {
return this.subNodes.reduce(item => item.getSize(), 0)
}
}
门面(外观)模式
应用场景
将多个后端接口请求合并为一个(冗余接口),提高响应速度,解决性能问题 通过封装细粒度接口,提供组合各个细粒度接口的高层次接口,来提高接口的易用性
行为型设计模式
总结了一些类或对象交互的经典方式,将该行为相关的类或对象解耦
观察者模式
应用场景
将观察者与被观察者解耦 发布订阅模式有发布订阅调度中心(中间商),观察者模式没有!
解决方案
// 目标对象
class Subject {
observerList: Observer[]
constructor() {
this.observerList = [];
}
addObserver(observer) {
this.observerList.push(observer);
}
notify() {
this.observerList.forEach((observer) => {
observer.update();
});
}
}
// 观察者
class Observer {
cb: Function
constructor(cb: Function) {
if (typeof cb === "function") {
this.cb = cb;
} else {
throw new Error("Observer构造器必须传入函数类型!");
}
}
update() {
this.cb();
}
}
// test
const observerCallback = function () {
console.log("我被通知了");
};
const observer = new Observer(observerCallback);
const subject = new Subject();
subject.addObserver(observer);
subject.notify();
模板模式
应用场景
在一个方法里定义一个算法(业务逻辑)骨架,并将某些步骤推迟到子类中实现。模板方法模式可以让子类在不改变算法整体结构的情况下,重新定义算法中的某些步骤。 复用 扩展
解决方案
abstract class Drinks {
firstStep() {
console.log('烧开水')
}
abstract secondStep()
thirdStep() {
console.log('倒入杯子')
}
abstract fourthStep()
drink() {
this.firstStep()
this.secondStep()
this.thirdStep()
this.fourthStep()
}
}
class Tea extends Drinks {
secondStep() {
console.log('浸泡茶叶')
}
fourthStep() {
console.log('加柠檬')
}
}
class Coffee extends Drinks {
secondStep() {
console.log('冲泡咖啡')
}
fourthStep() {
console.log('加糖')
}
}
// test
const tea = new Tea()
tea.drink()
const coffee = new Coffee()
coffee.drink()
策略模式
应用场景
定义一族算法族,将每个算法分别封装起来,让他们可以相互替换。 避免冗长的 if-else 或 switch 分支判断
解决方案
enum StrategyType {
S,
A,
B
}
const strategyFn = {
'S': function (salary: number) {
return salary * 4
},
'A': function (salary: number) {
return salary * 3
},
'B': function (salary: number) {
return salary * 2
}
}
const calculateBonus = function (level: StrategyType, salary: number) {
return strategyFn[level](salary)
}
calculateBonus(StrategyType.A, 10000) // 30000
职责链模式
应用场景
多个处理器 ABC 依次处理同一个请求,形成一个链条,当某个处理器能处理这个请求,就不会继续传递给后续处理器了 过滤器 拦截器 处理器
解决方案
const order500 = function (orderType, pay, stock) {
if (orderType === 1 && pay === true) {
console.log("500 元定金预购, 得到 100 元优惠券");
return true;
} else {
return false;
}
};
const order200 = function (orderType, pay, stock) {
if (orderType === 2 && pay === true) {
console.log("200 元定金预购, 得到 50 元优惠券");
return true;
} else {
return false;
}
};
const orderCommon = function (orderType, pay, stock) {
if ((orderType === 3 || !pay) && stock > 0) {
console.log("普通购买, 无优惠券");
return true;
} else {
console.log("库存不够, 无法购买");
return false;
}
};
class chain {
fn: Function
nextFn: Function
constructor(fn: Function) {
this.fn = fn;
this.nextFn = null;
}
setNext(nextFn) {
this.nextFn = nextFn
}
init(...arguments) {
const result = this.fn(...arguments);
if (!result && this.nextFn) {
this.nextFn.init(...arguments);
}
}
}
const order500New = new chain(order500);
const order200New = new chain(order200);
const orderCommonNew = new chain(orderCommon);
order500New.setNext(order200New);
order200New.setNext(orderCommonNew);
order500New.init(3, true, 500); // 普通购买, 无优惠券
状态模式
应用场景
将事物内部的每个状态分别封装成类, 内部状态改变会产生不同行为
解决方案
class weakLight {
light: Light
constructor(light: Light) {
this.light = light
}
press() {
console.log('打开强光')
this.light.setState(this.light.strongLight)
}
}
class strongLight {
light: Light
constructor(light: Light) {
this.light = light
}
press() {
console.log('关灯')
this.light.setState(this.light.offLight)
}
}
class offLight {
light: Light
constructor(light: Light) {
this.light = light
}
press() {
console.log('打开弱光')
this.light.setState(this.light.weakLight)
}
}
class Light {
weakLight: weakLight
strongLight: strongLight
offLight: offLight
currentState: offLight | weakLight | strongLight //当前状态: 默认关灯状态
constructor() {
this.weakLight = new weakLight(this)
this.strongLight = new strongLight(this)
this.offLight = new offLight(this)
this.currentState = this.offLight
}
press() {
this.currentState.press()
}
setState(state) {
this.currentState = state
}
}
// test
const light = new Light()
light.press()
light.press()
light.press()
light.press()
light.press()
light.press()
迭代器模式
应用场景
遍历集合对象
访问者模式
应用场景
允许一个或多个操作应用到一组对象上,解耦操作和对象本身
备忘录模式
应用场景
在不违背封装原则的前提下,捕获一个对象的内部状态,并在该对象之外保存这个状态,以便之后恢复对象为先前的状态
解决方案
class Programmer {
age: number
username: string
color: string
area: string
constructor(p) {
this.age = p.age
this.username = p.username
this.color = p.color
this.area = p.area
}
// 创建一个快照
createSnapshot() {
return {
age: this.age,
username: this.username,
color: this.color,
area: this.area
}
}
// 通过快照恢复对象状态
restoreSnapshot(snapshot: Programmer) {
this.age = snapshot.age
this.username = snapshot.username
this.color = snapshot.color
this.area = snapshot.area
}
}
命令模式
应用场景
命令模式的主要作用和应用场景,是用来控制命令的执行,比如,异步、延迟、排队执行命令、撤销重做命令、存储命令、给命令记录日志等。将命令的发起者和执行者解耦。
解决方案
interface Command {
execute()
}
class closeDoorCommand implements Command {
execute() {
console.log('close door');
}
}
class openPcCommand implements Command {
execute() {
console.log('open pc');
}
}
class openQQCommand implements Command {
execute() {
console.log('login qq');
}
}
class CommandManager {
commandList: Command[] = []
addCommand(command: Command) {
this.commandList.push(command)
}
execute() {
this.commandList.forEach(command => {
command.execute()
})
}
}
//test
const commandManager = new CommandManager();
commandManager.addCommand(new closeDoorCommand());
commandManager.addCommand(new openPcCommand());
commandManager.addCommand(new openQQCommand());
commandManager.execute();
解释器模式
应用场景
给定一个语言,定义它的文法表示,并定义一个解释器,这个解释器使用该标识来解释语言中的句子
中介模式
应用场景
中介模式的设计思想跟中间层很像,通过引入中介这个中间层,将一组对象之间的交互关系(依赖关系)转换成一对多(星状关系)。原本一个对象要跟n个对象交互,现在只需要跟一个中介对象交互,从而最小化对象间的交互关系,降低了代码复杂度,提高了代码的可读性和可维护性。
如何评价代码的质量?
可读性、可扩展性、可维护性、可复用性、可测试性... 高内聚低耦合 善战者无赫赫之功善医者无煌煌之名,大智若愚大巧若拙,真正的好代码并不是用了多少厉害的技术与奇技淫巧,而是看尽人世繁华后的返璞归真,寥寥几笔实现了功能的同时却没有任何个人风格的痕迹,小白都能看得懂的代码才是好代码。
怎样形成长期记忆?
想办法把零散的知识点串联起来记忆
自顶向下形成金字塔结构记忆 编成关键字口诀记忆 得意忘形
将知识的精华枝干提取出来强化记忆,去粗取精 学而不思则罔,思而不学则殆
深度思考能将他人的知识真正转化成自己的 学而时习之,不亦说乎
第一次学会只是脑海中的短时记忆, 需要多次复习强化才能形成长期记忆
注意事项
知识是死的,而代码是活的,不要用固化的设计模式实现硬套在活的业务逻辑里。
能学以致用是我们的学习目标,但是如果写出来的代码同组的其他人都看不懂,更加影响项目的可维护性和开发效率。所以我们可以少用慎用,但是我们必须掌握其思想。
牢牢掌握设计模式,拿去面试、面试别人、组内分享还是可以震慑群雄的,啊哈哈哈
别忘记对我素质三连,点赞、关注、评论
最后
欢迎加我微信,拉你进技术群,长期交流学习...
欢迎关注「前端Q」,认真学前端,做个专业的技术人...