ES6 类聊 JavaScript 设计模式之行为型模式(一)
本文是《ES6 类聊 JavaScript 设计模式》的第三篇,介绍第三种类型的设计模式行为设计模式,其特别关注对象之间的通信。
在软件工程中, 行为型模式为设计模式的一种类型,用来识别对象之间的常用交流模式并加以实现。如此,可在进行这些交流活动时增强弹性。—— 维基百科
- 责任链模式
- 命令模式
- 迭代器模式
- 中介者模式
- 备忘录模式
13. 责任链模式
责任链模式创建了一个对象链,从一个点开始,它会停止,直到找到某个条件。
为解除请求的发送者和接收者之间耦合,而使多个对象都有机会处理这个请求。将这些对象连成一条链,并沿着这条链传递该请求,直到有一个对象处理它。—— 维基百科
实例
实例将使用一个生物攻击防御的游戏。游戏中生物将增加它的防御和攻击当它到达一定的点。它会形成一个链条,攻击和防御会增加和减少。
class Creature {
constructor(name, attack, defense) {
this.name = name;
this.attack = attack;
this.defense = defense;
}
toString() {
return `${this.name} (攻击值:${this.attack} / 防御值:${this.defense})`;
}
}
class CreatureModifier {
constructor(creature) {
this.creature = creature;
this.next = null;
}
add(modifier) {
if (this.next) {
this.next.add(modifier);
} else {
this.next = modifier;
}
}
handle() {
if (this.next) {
this.next.handle();
}
}
}
// 增加攻击逻辑
class DoubleAttackModifier extends CreatureModifier {
constructor(creature) {
super(creature);
}
handle() {
console.log(`来自 ${this.creature.name} 的双重攻击!`);
this.creature.attack *= 2;
super.handle();
}
}
// 增加防御逻辑
class IncreaseDefenseModifier extends CreatureModifier {
constructor(creature) {
super(creature);
}
handle() {
if (this.creature.attack <= 2) {
console.log(`增加 ${this.creature.name} 的防御!`);
this.creature.defense++;
}
super.handle();
}
}
接下来看下如何使用责任链模式定义的类。
const bacteria = new Creature("Bacteria", 1, 1);
console.log(bacteria.toString()); // Bacteria (攻击值:1 / 防御值:1)
const root = new CreatureModifier(bacteria);
root.add(new DoubleAttackModifier(bacteria));
root.add(new IncreaseDefenseModifier(bacteria));
root.handle(); // 来自 Bacteria 的双重攻击! // 增加 Bacteria 的防御!
console.log(bacteria.toString()); // Bacteria (攻击值:2 / 防御值:2)
14. 命令模式
命令模式将创建将动作封装在对象中的对象。
在面向对象的编程中,命令模式是一种行为设计模式,其中对象用于封装执行操作或稍后触发事件所需的所有信息。这些信息包括方法名称、拥有该方法的对象和方法参数的值。 —— 维基百科
实例
代码实例将举一个银行帐户的需求,假如必须存入或提取一定数量的钱,会在其中发出命令。
class BankAccount {
constructor(balance = 0) {
this.balance = balance;
}
deposit(amount) {
this.balance += amount;
console.log(`账户存入:${amount},余额为:${this.balance}`);
}
withdraw(amount) {
if (this.balance - amount >= BankAccount.overdraftLimit) {
this.balance -= amount;
console.log(`账户提现:${amount},余额为:${this.balance}`);
}
}
toString() {
return `余额为 ${this.balance}`;
}
}
BankAccount.overdraftLimit = -100; // 假设可以透支 100
接下来创建相应的命令:
const Action = Object.freeze({
deposit: 1,
withdraw: 2,
});
class BankAccountCommand {
constructor(account, action, amount) {
this.account = account;
this.action = action;
this.amount = amount;
}
call() {
const callHandler = {};
callHandler[Action.deposit] = (amount) => this.account.deposit(amount);
callHandler[Action.withdraw] = (amount) =>
this.account.withdraw(amount);
callHandler[this.action](this.amount);
}
undo() {
const callHandler = {};
callHandler[Action.deposit] = (amount) => this.account.withdraw(amount);
callHandler[Action.withdraw] = (amount) => this.account.deposit(amount);
callHandler[this.action](this.amount);
}
}
//
const bankAccount = new BankAccount(100);
const cmd = new BankAccountCommand(bankAccount, Action.deposit, 50);
cmd.call(); // 账户存入:50,余额为:150
console.log(bankAccount.toString()); // 余额为 150
cmd.undo(); // 账户提现:50,余额为:100
console.log(bankAccount.toString()); // 余额为 100
15. 迭代器模式
迭代器模式访问对象的元素而不暴露其底层表示。
在面向对象编程中,迭代器模式是一种设计模式,其中迭代器用于遍历容器并访问容器的元素。 —— 维基百科
实例
将举一个数组的例子,在其中打印一个数组的值,然后使用迭代器将其值对调输出。
class Stuff {
constructor() {
this.a = 33;
this.b = 66;
}
[Symbol.iterator]() {
let i = 0;
return {
next: () => {
return {
done: i > 1,
value: this[i++ === 0 ? "a" : "b"],
};
},
};
}
get backwards() {
let i = 0;
return {
next: () => {
return {
done: i > 1,
value: this[i++ === 0 ? "b" : "a"],
};
},
[Symbol.iterator]: function () {
return this;
},
};
}
}
const values = [100, 200, 300];
for (const i in values) {
console.log(`索引 ${i} 的值 ${values[i]}`);
}
for (const v in values) {
console.log(`值为 ${v}`);
}
const stuff = new Stuff();
console.log("=====>正常打印<======");
for (const item of stuff) {
console.log(item);
}
console.log("=====>对调打印<======");
for (const item of stuff.backwards) {
console.log(item);
}
运行后在终端显示结果如下:
索引 0 的值 100
索引 1 的值 200
索引 2 的值 300
值为 0
值为 1
值为 2
=====>正常打印<======
33
66
=====>对调打印<======
66
33
16. 中介者模式
中介者模式添加了一个第三方对象来控制两个对象之间的交互。它允许类之间的松散耦合,因为它是唯一详细了解其方法的类。
中介者模式定义了一个对象,该对象封装了一组对象如何交互。这种模式被认为是一种行为模式,因为它可以改变程序的运行行为。在面向对象编程中,程序通常由许多类组成。—— 维基百科
实例
代码是一个人使用聊天室的例子。在这里,聊天室充当了两个人交流的中介。
class Person {
constructor(name) {
this.name = name;
this.chatLog = [];
}
receive(sender, message) {
const s = `${sender}:“${message}”`;
console.log(`【${this.name}的聊天会话】${s}`);
this.chatLog.push(s);
}
say(message) {
this.room.broadcast(this.name, message);
}
pm(who, message) {
this.room.message(this.name, who, message);
}
}
// 创建聊天室
class ChatRoom {
constructor() {
this.people = [];
}
broadcast(source, message) {
for (const p of this.people) {
if (p.name !== source) {
p.receive(source, message);
}
}
}
join(p) {
const joinMsg = `${p.name} 加入聊天室`;
this.broadcast("room", joinMsg);
p.room = this;
this.people.push(p);
}
message(source, destination, message) {
for (const p of this.people) {
if (p.name === destination) {
p.receive(source, message);
}
}
}
}
// 使用方式
const room = new ChatRoom();
const Quintion = new Person("Quintion");
const Devpoint = new Person("Devpoint");
room.join(Quintion);
room.join(Devpoint);
Quintion.say("下午好!");
const Tony = new Person("Tony");
room.join(Tony);
Tony.say("大家好!");
运行后在终端可以看到如下结果:
【Quintion的聊天会话】room:“Devpoint 加入聊天室”
【Devpoint的聊天会话】Quintion:“下午好!”
【Quintion的聊天会话】room:“Tony 加入聊天室”
【Devpoint的聊天会话】room:“Tony 加入聊天室”
【Quintion的聊天会话】Tony:“大家好!”
【Devpoint的聊天会话】Tony:“大家好!”
17. 备忘录模式:Memento
备忘录模式将对象恢复到之前的状态。
备忘录模式是一种软件设计模式,它提供了将对象恢复到其先前状态的能力。备忘录模式由三个对象实现:发起者、看守者和备忘录。使用的场景是在不破坏封装性的前提下,捕获一个对象的内部状态,并在该对象之外保存这个状态。这样以后就可将该对象恢复到原先保存的状态。
实例
将以一个银行账户为例,其中存储之前的状态,并具有撤销功能。
// 备忘录
class Memento {
constructor(balance) {
this.balance = balance;
}
getBalance() {
return this.balance;
}
}
class BankAccount {
constructor(balance = 0) {
this.balance = balance;
}
deposit(amount) {
this.balance += amount;
return new Memento(this.balance);
}
restore(m) {
this.balance = m.balance;
}
toString() {
return `账户余额:${this.balance}`;
}
}
// 这里开始如何使用上面定义的类
const bankAccount = new BankAccount(1000);
const m1 = bankAccount.deposit(200);
console.log(bankAccount.toString()); // 当前账户余额为:1200
const m2 = bankAccount.deposit(200);
console.log(bankAccount.toString()); // 当前账户余额为:1400
// 恢复到m1
bankAccount.restore(m1);
console.log(bankAccount.toString()); // 账户余额:1200
// 恢复到m2
bankAccount.restore(m2);
console.log(bankAccount.toString()); // 账户余额:1400
写在最后
本文总结了行为型设计模式中的一部份,后面还将继续学习总结剩下的5种设计模式。
本文正在参加「金石计划 . 瓜分6万现金大奖」 ”