【面试题】 ES6 类聊 JavaScript 设计模式之行为型模式（二）

创建 TextProcessor 类

class TextProcessor {
    constructor(outputFormat) {
        this.buffer = [];
        this.setOutputFormat(outputFormat);
    }
 
    setOutputFormat(format) {
        switch (format) {
            case OutputFormat.markdown:
                this.listStrategy = new MarkdownListStrategy();
                break;
            case OutputFormat.html:
                this.listStrategy = new HtmlListStrategy();
                break;
        }
    }
 
    appendList(items) {
        this.listStrategy.start(this.buffer);
        for (const item of items) {
            this.listStrategy.addListItem(this.buffer, item);
        }
        this.listStrategy.end(this.buffer);
    }
 
    clear() {
        this.buffer = [];
    }
 
    toString() {
        return this.buffer.join("\n");
    }
}
复制代码

下面是使用方式：

console.log("==============Markdown===============")
const tp = new TextProcessor();
const arrayItems = ["第一条", "第二条", "第三条"];
tp.setOutputFormat(OutputFormat.markdown);
tp.appendList(arrayItems);
console.log(tp.toString());
 
console.log("==============HTML===============")
tp.clear();
tp.setOutputFormat(OutputFormat.html);
tp.appendList(arrayItems);
console.log(tp.toString());
复制代码

输出结果如下：

==============Markdown===============
 * 第一条
 * 第二条
 * 第三条
==============HTML===============
<ul>
   <li>第一条li>
   <li>第二条li>
   <li>第三条li>
ul>
复制代码

21. 状态模式：State

状态模式允许对象根据其内部状态的变化来改变其行为。状态模式类返回的对象似乎改变了它的类。它为一组有限的对象提供特定于状态的逻辑，其中每个对象类型代表一个特定的状态。

状态模式是一种行为软件设计模式，它允许对象在其内部状态发生变化时改变其行为。这种模式接近于有限状态机的概念。 —— 维基百科

实例

将举一个电灯开关的例子，打开或关闭开关，它的状态就会改变。

class State {
    constructor() {
        if (this.constructor === State) throw new Error("abstract!");
    }
 
    on(sw) {
        console.log("灯已打开！");
    }
 
    off(sw) {
        console.log("灯已关闭！");
    }
}
 
class OffState extends State {
    constructor() {
        super();
        console.log("关灯");
    }
 
    on(sw) {
        console.log("开灯中…");
        sw.state = new OnState();
    }
}
 
class OnState extends State {
    constructor() {
        super();
        console.log("开灯");
    }
 
    off(sw) {
        console.log("关灯中…");
        sw.state = new OffState();
    }
}
 
class Switch {
    constructor() {
        this.state = new OffState();
    }
 
    on() {
        this.state.on(this);
    }
 
    off() {
        this.state.off(this);
    }
}
复制代码

下面就是使用方法：

const switchHelper = new Switch();
switchHelper.on();
switchHelper.off();
复制代码

将在控制台上可以看到日志：

关灯
开灯中…
开灯
关灯中…
关灯
复制代码

22. 模板方法模式：Template Method

模板方法模式是一种基于定义算法骨架或操作实现的行为设计模式，但将一些步骤推迟到子类。它允许子类重新定义算法的某些步骤，而不改变算法的外部结构。

模板方法是超类中的一个方法，通常是一个抽象超类，并根据许多高级步骤定义了操作的框架。 —— 维基百科

实例

将以国际象棋游戏为例。

class Game {
    constructor(numberOfPlayers) {
        this.numberOfPlayers = numberOfPlayers;
        this.currentPlayer = 0;
    }
 
    run() {
        this.start();
        while (!this.haveWinner) {
            this.takeTurn();
        }
        console.log(`玩家【${this.winningPlayer}】赢了！`);
    }
    start() {}
    get haveWinner() {}
    takeTurn() {}
    get winningPlayer() {}
}
复制代码

接下来创建继承上面 Game 类的国际象棋 Class。上面的 Game 类就是一个游戏的骨架，下面的 Chess 类就是基于这个骨架来实现其方法。

class Chess extends Game {
    constructor() {
        super(2);
        this.maxTurns = 10;
        this.turn = 1;
    }
 
    start() {
        console.log(` ${this.numberOfPlayers} 玩家开始国际象棋游戏`);
    }
 
    get haveWinner() {
        return this.turn === this.maxTurns;
    }
 
    takeTurn() {
        console.log(
            `Turn ${this.turn++} taken by player ${this.currentPlayer}`
        );
        this.currentPlayer = (this.currentPlayer + 1) % this.numberOfPlayers;
    }
 
    get winningPlayer() {
        return this.currentPlayer;
    }
}
复制代码

使用的方式如下：

const chess = new Chess();
chess.run();
复制代码

总结

设计模式对软件工程至关重要，并且对于解决常见问题非常有帮助。通过这系列文章，加强对设计模式的理解。

给大家推荐一个实用面试题库

1、前端面试题库 （面试必备）            推荐：★★★★★

地址：前端面试题库