卸下if-else 侠的皮衣!- 状态模式
🤭当我是if-else侠的时候
😶怕出错
给我一个功能,我总是要写很多if-else,虽然能跑,但是维护起来确实很难受,每次都要在一个方法里面增加逻辑,生怕搞错,要是涉及到支付功能,分分钟炸锅
😑难调试
我总是不知道之前写的逻辑在哪里,一个方法几百行逻辑,而且是不同功能点冗余在一起!这可能让我牺牲大量时间在这查找调试中
🤨交接容易挨打
当你交接给新同事的时候,这个要做好新同事的白眼和嘲讽,这代码简直是坨翔!这代码简直是个易碎的玻璃,一碰就碎!这代码简直是个世界十大奇迹!
🤔脱下if-else侠的皮衣
先学习下开发的设计原则
单一职责原则(SRP)
就一个类而言,应该仅有一个引起他变化的原因
开放封闭原则(ASD)
类、模块、函数等等应该是可以扩展的,但是不可以修改的
里氏替换原则(LSP)
所有引用基类的地方必须透明地使用其子类的对象
依赖倒置原则(DIP)
高层模块不应该依赖底层模块
迪米特原则(LOD)
一个软件实体应当尽可能的少与其他实体发生相互作用
接口隔离原则(ISP)
一个类对另一个类的依赖应该建立在最小的接口上
在学习下设计模式
大致可以分三大类:创建型
,结构型
,行为型
创建型:工厂模式 ,单例模式,原型模式
结构型:装饰器模式,适配器模式,代理模式
行为型:策略模式,状态模式,观察者模式
之前文章学习了**策略模式, 适配器模式,有兴趣可以过去看看,下面我们来学习适配器模式**
场景:做四种咖啡的咖啡机
- 美式咖啡(american):只吐黑咖啡
- 普通拿铁(latte):黑咖啡加点奶
- 香草拿铁(vanillaLatte):黑咖啡加点奶再加香草糖浆
- 摩卡咖啡(mocha):黑咖啡加点奶再加点巧克力
用if-else来写,如下
class CoffeeMaker {
constructor() {
/**
这里略去咖啡机中与咖啡状态切换无关的一些初始化逻辑
**/
// 初始化状态,没有切换任何咖啡模式
this.state = 'init';
}
// 关注咖啡机状态切换函数
changeState(state) {
// 记录当前状态
this.state = state;
if(state === 'american') {
// 这里用 console 代指咖啡制作流程的业务逻辑
console.log('我只吐黑咖啡');
} else if(state === 'latte') {
console.log(`给黑咖啡加点奶`);
} else if(state === 'vanillaLatte') {
console.log('黑咖啡加点奶再加香草糖浆');
} else if(state === 'mocha') {
console.log('黑咖啡加点奶再加点巧克力');
}
}
}
分下下问题,假如我们多了几种格式,我们又要在这个方法体里面扩展,违反了开放封闭原则(ASD)
,所以我们现在来采用适配器模式来写下:
class CoffeeMaker {
constructor() {
// 初始化状态,没有切换任何咖啡模式
this.state = 'init';
// 初始化牛奶的存储量
this.leftMilk = '500';
}
stateToProcessor = {
that: this,
american() {
this.that.leftMilk = this.that.leftMilk - 100
console.log('咖啡机现在的牛奶存储量是:', this.that.leftMilk)
console.log('吐黑咖啡');
},
latte() {
this.american()
console.log('加点奶');
},
vanillaLatte() {
this.latte();
console.log('再加香草糖浆');
},
mocha() {
this.latte();
console.log('再加巧克力');
}
}
changeState(state) {
this.state = state;
if (!this.stateToProcessor[state]) {
return;
}
this.stateToProcessor[state]();
}
}
const mk = new CoffeeMaker();
mk.changeState('latte');
mk.changeState('mocha');
这个状态模式实际上跟策略模式很像,但是状态模式会关注里面的状态变化,就像上诉代码能检测咖啡牛奶量,去除了if-else,能很好的扩展维护
结尾
遵守设计规则,脱掉if-else的皮衣,善用设计模式,加油,骚年们!给我点点赞,关注下!
作者:向乾看
来源:juejin.cn/post/7267207014382829579
来源:juejin.cn/post/7267207014382829579