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种设计模式。