你不知道的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的一种隐形模式。       小伙伴们今天的学习就到这里了，如果觉得本文对你有帮助的话，欢迎转发，评论，收藏，点赞！！！
       每天学习进步一点点，就是领先的开始。如果想继续提高，欢迎关注我，或者关注公众号”祯民讲前端“。大量前端技术文章，面试资料，技巧等助你更进一步！