《设计模式》这样学就对了！
以下文章来源于微医大前端技术 ，作者李运通
微医大前端技术
.
微医集团大前端官方公众号，推送原创技术文章、活动及招聘信息等，偶有技术小哥哥小姐姐们的日常。
李运通，微医前端技术部前端工程师。最怕你一生碌碌无为，还安慰自己平凡可贵。
设计模式解决什么痛点？
它是解决特定问题的一系列套路，是前辈们的代码设计经验的总结，具有一定的普遍性，可以反复使用。其目的是为了
提高代码的可复用性、可读性、可维护性。
设计模式的本质是面向对象设计原则的实际运用，是对类的封装性、继承性和多态性以及类的关联关系和组合关系的充分理解。不要重复造轮子。
什么是面向对象编程
面向对象编程是一种编程范式或编程风格。它以类或对象作为组织代码的基本单元，并将封装、抽象、继承、多态四大特性，作为代码设计和实现的基石。面向对象编程语言是支持类或对象的语法机制，并有现成的语法机制，能方便的实现面向对象编程四大特性的编程语言面向对象开发包括面向对象分析 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个对象交互，现在只需要跟一个中介对象交互，从而最小化对象间的交互关系，降低了代码复杂度，提高了代码的可读性和可维护性。
如何评价代码的质量？
可读性、可扩展性、可维护性、可复用性、可测试性... 高内聚低耦合 善战者无赫赫之功善医者无煌煌之名，大智若愚大巧若拙，真正的好代码并不是用了多少厉害的技术与奇技淫巧，而是看尽人世繁华后的返璞归真，寥寥几笔实现了功能的同时却没有任何个人风格的痕迹，小白都能看得懂的代码才是好代码。
怎样形成长期记忆？
想办法把零散的知识点串联起来记忆自顶向下形成金字塔结构记忆 编成关键字口诀记忆 得意忘形将知识的精华枝干提取出来强化记忆，去粗取精 学而不思则罔，思而不学则殆深度思考能将他人的知识真正转化成自己的 学而时习之，不亦说乎第一次学会只是脑海中的短时记忆， 需要多次复习强化才能形成长期记忆
注意事项
知识是死的，而代码是活的，不要用固化的设计模式实现硬套在活的业务逻辑里。
能学以致用是我们的学习目标，但是如果写出来的代码同组的其他人都看不懂，更加影响项目的可维护性和开发效率。所以我们可以少用慎用，但是我们必须掌握其思想。
牢牢掌握设计模式，拿去面试、面试别人、组内分享还是可以震慑群雄的，啊哈哈哈