你不知道的javascript设计模式(九) ---- 命令模式

素颜马尾好姑娘i 2022-11-14 14:53 133阅读 0赞

### 文章目录 ###

*  前言
 *  正文
 *   *  什么是命令模式
     *  命令模式的实现
     *  javascript中的命令模式
     *  宏命令
 *  小结

# 前言 #

上一章我们介绍了设计模式中的发布-订阅模式，通过分离发布者和订阅者之间的逻辑，来减少两者间的耦合性，以应用于异步等场景。今天我们要介绍的就是设计模式中的命令模式

# 正文 #

## 什么是命令模式 ##

什么是命令模式呢？比如你去餐厅点菜，服务员把点好的菜给厨师，你不用关心是哪位厨师或者厨师是怎么做的，你只需要点好菜，就会有做好的菜端过来给你吃，这就是命令模式的一种体现。  
        命令模式是最简单以及最优雅的设计模式之一，命令模式最常见的应用场景是：有时候需要向某些对象发送请求，但是并不知道请求的接受者和具体操作，就像你不知道做菜的厨师和菜是怎么做的，你只是想吃这道菜，这时候就需要使用命令模式去降低命令者与执行者之间的耦合性

## 命令模式的实现 ##

和以前惯例一样，在实现之前我们先来看一个场景，假设一个很大的系统，需要定制几十个button，那我们就不好就每个button去直接绑定事件了，因为这样的话，这些button的事件可能就会不那么好维护，这里我们就可以考虑使用命令模式去实现了。因为目前来说我们还并不知道按钮接收者是谁，又要具体怎么做去实现到最后预期的一个目的

// 命令者
    var setCommand = function(button, command) {
    	button.onclick = function() {
    		command.execute();
    	}
    }
    // 执行命令者
    var doCommand = function(command) {
    	this.command = command;
    }
    doCommand.prototype.execute = function(){
    	this.command.finishCommand();
    }
    // 命令对象
    var command = {
    	finishCommand: function() {
    		console.log(' 执行命令');
    	}
    }

这样我们就只需要定制对应的按钮命令传给命令者也就是setCommand函数就可以了

## javascript中的命令模式 ##

之前我们已经说过很多次，javascript与传统语言的不同之处，javascript不需要基于类去实现相关的设计模式，函数是它的第一对象，基于相关高阶函数可以使得命令模式的实现更加优雅

//  命令者
    var setCommand = function(button, func) {
    	button.onclick = function () {
    		func();
    	}
    }
    // 执行命令者
    var doCommand = function(command) {
    	return function () {
    		command.finishCommand();
    	}
    }
    // 命令对象
    var command = {
    	finishCommand: function() {
    		console.log(' 执行命令');
    	}
    }

## 宏命令 ##

宏命令指的是一组命令的集合，通过执行宏命令的方式，可以一次执行一批命令。举一个场景的例子，假设我们买了一个新的咖啡机，我们只需要按一下开关，它就会执行装入咖啡豆，磨碎咖啡豆，加入热水以及倒入牛奶的命令，我们用命令模式尝试实现一下。

// 装入咖啡豆的命令
    loadCoffeeBean = function() {
    	console.log('装入咖啡豆’);
    }
    // 磨碎咖啡豆的命令
    smashCoffeeBean = function() {
    	console.log('磨碎咖啡豆');
    }
    // 加入热水
    loadHotWater = function() {
    	console.log('加入热水');
    }
    // 加入牛奶
    loadMilk = function() {
    	console.log('加入牛奶');
    }
    var macroCommand = function() {
    	return {
    		commandList: [],
    		add: function(command) {
    			this.commandList.push(command);
    		},
    		execute: function() {
    			for(var i = 0; i < this.commandList.length; i++) {
    				this.commandList[i]();
    			}
    		}
    	}
    }

这样我们就封装好了，只需要把4个命令函数传入macroCommand，就可以执行宏命令，其实就是使用一个数组对象去存储宏对象中的对象，然后在执行的时候遍历执行即可

# 小结 #

这一章我们介绍了命令模式，可能大家发现使用js实现命令模式是很简单的，的确是这样，使用js的高阶函数可以很轻松地实现命令模式，只需要把函数作为参数传入，再在执行函数中调用回调函数就可以了，可以说，命令模式是js的一种隐形模式。       小伙伴们今天的学习就到这里了，如果觉得本文对你有帮助的话，欢迎转发，评论，收藏，点赞！！！  
       每天学习进步一点点，就是领先的开始。如果想继续提高，欢迎关注我，或者关注公众号”祯民讲前端“。大量前端技术文章，面试资料，技巧等助你更进一步！  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhb2ZhbmRlZGFpbWE_size_16_color_FFFFFF_t_70_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhb2ZhbmRlZGFpbWE_size_16_color_FFFFFF_t_70_pic_center]: /images/20221022/f28fb394ffb74f03984d4a8d5811fd16.png