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

策略模式是一种行为软件设计模式，可以在运行时选择算法。代码不是直接实现单个算法，而是接收运行时指令，以确定要使用一系列算法中的哪一个。 —— 维基百科

实例

将举一个例子，有一个文本处理器，将根据策略（HTML 或 Markdown）输出列表数据格式。

const OutputFormat = Object.freeze({
    markdown: 0,
    html: 1,
});

class ListStrategy {
    start(buffer) {}
    end(buffer) {}
    addListItem(buffer, item) {}
}

class MarkdownListStrategy extends ListStrategy {
    addListItem(buffer, item) {
        buffer.push(` * ${item}`);
    }
}

class HtmlListStrategy extends ListStrategy {
    start(buffer) {
        buffer.push("<ul>");
    }
    end(buffer) {
        buffer.push("</ul>");
    }
    addListItem(buffer, item) {
        buffer.push(`   <li>${item}</li>`);
    }
}
复制代码

创建 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();
复制代码

前端面试题汇总

JavaScript

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

性能

linux

前端资料汇总