JavaScript设计模式：命令模式

最新推荐文章于 2024-08-26 20:22:12 发布

HaanLen

最新推荐文章于 2024-08-26 20:22:12 发布

阅读量330

点赞数

分类专栏： JavaScript设计模式与设计原则文章标签： javascript 命令模式设计模式

本文链接：https://blog.csdn.net/weixin_40119412/article/details/125964104

版权

JavaScript设计模式与设计原则专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文介绍了命令模式在软件设计中的应用，通过一个用户界面按钮的例子展示了如何利用命令模式将请求发送者与接收者解耦。命令模式允许在不关心执行操作的对象是谁的情况下，发送请求。文中还提到了命令模式的撤销与重做功能，以及宏命令的概念，展示了如何通过命令模式一次性执行多个命令。此外，内容涵盖了在JavaScript中实现命令模式的示例代码。

摘要由CSDN通过智能技术生成

命令模式

命令模式是最简单和优雅的模式之一，命令模式中的命令（command）指的是一个执行某些特定事情的指令。
命令模式最常见的应用场景是：有时候需要向某些对象发送请求，但是并不知道请求的接收者是谁，也不知道被请求的操作是什么。此时希望用一种松耦合的方式来设计程序，使得请求发送者和请求接收者能够消除彼此之间的耦合关系。

例子：
假设我们正在编写一个用户界面程序，该用户界面上至少有数十个Button按钮。因为项目比较复杂，所以我们决定让某个程序员负责绘制这些按钮，而另外一些程序员则负责编写点击按钮后的具体行为，这些行为都将被封装在对象里。

在大型项目开发中，这是很正常的分工。对于绘制按钮的程序员来说，他完全不知道某个按钮未来将用来做什么，可能用来刷新菜单界面，也可能用来增加一些子菜单，他只知道点击这个按钮会发生某些事情。那么当完成这个按钮的绘制之后，应该如何给它绑定onclick事件呢？

绘制button

<body>
    <button id="button1">点击按钮1</button>
    <button id="button2">点击按钮2</button>
    <button id="button3">点击按钮3</button>
</body>

<script>
    var button1 = document.getElementById( 'button1' ),
    var button2 = document.getElementById( 'button2' ),
    var button3 = document.getElementById( 'button3' );
</script>

设置按钮点击执行命令函数

var setCommand = function( button, command ){
    button.onclick = function(){
        command.execute();
    }
};

执行的命令功能

var MenuBar = {
    refresh: function(){
        console.log( '刷新菜单目录' );
    }
};


var SubMenu = {
    add: function(){
        console.log( '增加子菜单' );
    },
    del: function(){
        console.log( '删除子菜单' );
    }
};

将功能封装在类中

var RefreshMenuBarCommand = function( receiver ){
    this.receiver = receiver;
};

RefreshMenuBarCommand.prototype.execute = function(){
    this.receiver.refresh();
};

var AddSubMenuCommand = function( receiver ){
    this.receiver = receiver;
};

AddSubMenuCommand.prototype.execute = function(){
    this.receiver.add();
};

var DelSubMenuCommand = function( receiver ){
    this.receiver = receiver;
};

DelSubMenuCommand.prototype.execute = function(){
    console.log( '删除子菜单' );
};

赋予button不同的命令

var RefreshMenuBarCommand = function( receiver ){
    this.receiver = receiver;
};

RefreshMenuBarCommand.prototype.execute = function(){
    this.receiver.refresh();
};

var AddSubMenuCommand = function( receiver ){
    this.receiver = receiver;
};

AddSubMenuCommand.prototype.execute = function(){
    this.receiver.add();
};

var DelSubMenuCommand = function( receiver ){
    this.receiver = receiver;
};

DelSubMenuCommand.prototype.execute = function(){
    console.log( '删除子菜单' );
};

在面向对象设计中，命令模式的接收者被当成command对象的属性保存起来，同时约定执行命令的操作调用command.execute方法。在使用闭包的命令模式实现中，接收者被封闭在闭包产生的环境中，执行命令的操作可以更加简单，仅仅执行回调函数即可。无论接收者被保存为对象的属性，还是被封闭在闭包产生的环境中，在将来执行命令的时候，接收者都能被顺利访问。用闭包实现的命令模式如下代码所示：

var setCommand = function( button, func ){
    button.onclick = function(){
        func();
    }
};

var MenuBar = {
    refresh: function(){
        console.log( '刷新菜单界面' );
    }
};

var RefreshMenuBarCommand = function( receiver ){
    return function(){
        receiver.refresh();
    }
};

var refreshMenuBarCommand = RefreshMenuBarCommand( MenuBar );

setCommand( button1, refreshMenuBarCommand );

命令模式，处理执行execute还有撤销与重做命令。

var RefreshMenuBarCommand = function( receiver ){
    return {
        execute: function(){
            receiver.refresh();
        }
    }
};

var setCommand = function( button, command ){
    button.onclick = function(){
        command.execute();
    }
};

var refreshMenuBarCommand = RefreshMenuBarCommand( MenuBar );
setCommand( button1, refreshMenuBarCommand );