Javascript设计模式之命令模式

247 阅读1分钟

前言:菜鸡也有梦想,而我的梦想就是进一个真正的互联网大厂。以前学习的时候没有系统的整理,从今天开始要保持每周写博客的习惯,希望自己可以有所成长。为了培养编程思维,决定从设计模式开始写起。我是通过读《Javascript设计模式与开发实践》来学习设计模式,并且将知识点和收获记录在博客中。

此文仅记录本人阅读《JavaScript设计模式与开发实践》的知识点与想法,感谢作者曾探大大写出这么好的一本书。如有冒犯,请联系本人:markcoder@outlook.com处理,请大家购买正版书籍。

1.命令模式介绍

命令模式最常见的应用场景是:有时候需要向某些对象发送请求,但是并不知道请求的接收者是谁,也不知道被请求的操作是什么。此时希望用一种松耦合的方式来设计程序,使得请求发送者和请求接收者能够消除彼此之间的耦合关系。

2.代码实现

setCommand方法为按钮指定了命令对象,命令对象为调用者(按钮)找到了接收者(btnFunc),并且执行了相关操作,而按钮本身并不需要关心接收者和接受操作。

let setCommand = (button, command) => {
    button.onclick = () => {
        command.execute();
    }
}

let btnFunc = {
    refresh () {
        console.log('点击按钮刷新页面');
    }
}

let RefreshCommand = (receiver) => {
    return {
        execute () {
            receiver.refresh();
        }
    }
}

let refreshCommand = RefreshCommand(btnFunc);
let button = document.querySelector("button");
setCommand(button, refreshCommand);

参考

《JavaScript设计模式与开发实践》—— 曾探