说明：继续学习努力
PS：学习自---掘金的JavaScript设计模式核心原理与应用小册
一、概念
1.状态模式允许一个对象在其内部状态改变时改变它的行为，对象看起来似乎修改了它的类
2.状态模式主要解决的是当控制一个对象状态的条件表达式过于复杂时的情况。把状态的逻辑判断转移到表示不同状态的一系列类中，可以把复杂的判断逻辑简化。
二、案例
代码+案例说明
-
1.案例说明 机器人制造公司
普通机器人：机器硬件设备组装 拥有扫地 接入智能系统功能
巡逻机器人：在普通机器人基础上增加了夜间观察，移动功能
作战机器人：在巡逻机器人基础上增加了发射武器，防御功能
搜救机器人：在巡逻机器人基础上增加了生命感知功能 -
2.开发思路 公司先生产出普通机器人
普通机器人基础上进行组装相应功能
顶配机器人根据不同发展方向进行生产 -
3.if-else判断开发 v1.0
class RobotsMaker1 {
constructor() {
this.robot = 'init'; // 初始化机器人
}
make(robot) { // 生产机器人
this.robot = robot; // 当前机器人
if (robot === 'common') { // 通用机器人
console.log('组装通用机器人');
} else if (robot === 'patrol') { // 巡逻机器人
console.log('增加了夜间观察，移动功能');
} else if (robot === 'fight') { // 作战机器人
console.log('增加了发射武器，防御功能');
} else if (robot === 'search') { // 搜救机器人
console.log('增加了生命感知功能');
}
}
}
const robot1 = new RobotsMaker1();
robot1.make('fight'); // 增加了发射武器，防御功能
- 4.因为生产机器人，是分步骤的，职责分明。 v2.0
// 例如搜救机器人在巡逻机器人基础上增加了感知功能
class RobotsMaker2 {
constructor() {
this.robot = 'init'; // 初始化机器人
}
make(robot) { // 生产机器人
this.robot = robot; // 当前机器人
if (robot === 'common') { // 通用机器人
this.common();
} else if (robot === 'patrol') { // 巡逻机器人
this.patrol();
} else if (robot === 'fight') { // 作战机器人
this.fight();
} else if (robot === 'search') { // 搜救机器人
this.search();
}
}
// 当前
common() {
console.log('组装通用机器人');
}
// 巡逻
patrol() {
this.common()
console.log('增加了夜间观察，移动功能');
}
// 作战
fight() {
this.patrol();
console.log('增加了发射武器，防御功能');
}
// 搜救
search() {
this.patrol();
console.log('增加了生命感知功能');
}
}
const robot2 = new RobotsMaker2();
robot2.make('fight');
// 结果：
// 组装通用机器人
// 增加了夜间观察，移动功能
// 增加了发射武器，防御功能
- 5.开放封闭 去除if-else v3.0
const robotToProcessor = {
// 当前
common() {
console.log('组装通用机器人');
},
// 巡逻
patrol() {
this.common()
console.log('增加了夜间观察，移动功能');
},
// 作战
fight() {
this.patrol();
console.log('增加了发射武器，防御功能');
},
// 搜救
search() {
this.patrol();
console.log('增加了生命感知功能');
}
}
class RobotsMaker3 {
constructor() {
this.robot = 'init'; // 初始化机器人
}
make(robot) { // 生产机器人
this.robot = robot; // 当前机器人
if(!robotToProcessor[robot]) {
return ;
}
robotToProcessor[robot]();
}
}
const robot3 = new RobotsMaker3();
robot3.make('search');
// 结果：
// 组装通用机器人
// 增加了夜间观察，移动功能
// 增加了生命感知功能
- 6.我们需要感知到机器人生产的内部状况，我们需要对代码再进行改造 v4.0
class RobotsMaker4 {
constructor() {
this.robot = 'init'; // 初始化机器人
this.weight = '50kg'; // 机器人的重量
}
robotToProcessor = {
that: this,
// 当前
common() {
console.log('现在机器人的重量是：', this.that.weight);
console.log('组装通用机器人');
},
// 巡逻
patrol() {
this.common()
console.log('增加了夜间观察，移动功能');
},
// 作战
fight() {
this.patrol();
console.log('增加了发射武器，防御功能');
},
// 搜救
search() {
this.patrol();
console.log('增加了生命感知功能');
}
}
make(robot) { // 生产机器人
this.robot = robot; // 当前机器人
if(!this.robotToProcessor[robot]) {
return ;
}
this.robotToProcessor[robot]();
}
}
const robot4 = new RobotsMaker4();
robot4.make('search');
// 结果
// 现在机器人的重量是： 50kg
// 组装通用机器人
// 增加了夜间观察，移动功能
// 增加了生命感知功能
