JS - 设计模式持续学习中

通过例子持续学习JS设计模式中，接下来请跟随我的步伐走进我的学习世界~

什么是设计模式？我们为什么需要学习设计模式？

设计模式是可以更好解决问题的一种方案。

这意味着什么？如果你开发的项目的功能是固定的，永远不会调整业务，那么你就不需要使用设计模式等任何技巧。您只需要使用通常的方式编写代码并完成需求即可。

但是，我们的开发项目的需求是不断变化的，这就需要我们经常修改我们的代码。也就是说，我们现在写代码的时候，需要为未来业务需求可能发生的变化做好准备。

这时，你会发现使用设计模式可以让你的代码更具可扩展性。

1 命令模式

我的理解：定义一个类，里面写方法，用的时候引入这个类，调用类.方法()使用。
比较官方的说明：
在软件系统中，“行为请求者”与“行为实现者”通常呈现一种“紧耦合”。但在某些场合，比如要对行为进行“记录、撤销/重做、事务”等处理，这种无法抵御变化的紧耦合是不合适的。在这种情况下，如何将“行为请求者”与“行为实现者”解耦？将一组行为抽象为对象，实现二者之间的松耦合。这就是命令模式（Command Pattern）。

const btn1 = function () {};
const btn2 = function () {};

// 定义一个命令发布者(执行者)的类
class Executor {
    setCommand(btn, command) {
        btn.onclick = function() {
            command.execute()
        }
    }
}

// 定义一个命令接收者
class Menu {
    refresh() {
        console.log('刷新菜单')
    }

    addSubMenu() {
        console.log('增加子菜单')
    }
}

// 定义一个刷新菜单的命令对象的类
class RefreshMenu {
    constructor(receiver) {
        // 命令对象与接收者关联
        this.receiver = receiver
    }

    // 暴露出统一的接口给命令发布者Executor
    execute() {
        this.receiver.refresh()
    }
}

// 定义一个增加子菜单的命令对象的类
class AddSubMenu {
    constructor(receiver) {
        // 命令对象与接收者关联
        this.receiver = receiver
    }
    // 暴露出统一的接口给命令发布者Executor
    execute() {
        this.receiver.addSubMenu()
    }
}

var menu = new Menu()
var executor = new Executor()

var refreshMenu = new RefreshMenu(menu)
// 给按钮1添加刷新功能
executor.setCommand(btn1, refreshMenu)

var addSubMenu = new AddSubMenu(menu)
// 给按钮2添加增加子菜单功能
executor.setCommand(btn2, addSubMenu)

// 如果想给按钮3增加删除菜单的功能，就继续增加删除菜单的命令对象和接收者的具体删除方法，而不必修改命令对象
btn1.onclick();
btn2.onclick();

2 单例模式

3 策略模式