[[434039]]

本文轉(zhuǎn)載自微信公眾號「JS每日一題」，作者灰灰 。轉(zhuǎn)載本文請聯(lián)系JS每日一題公眾號。

一、是什么

命令模式是最簡單和優(yōu)雅的模式之一，命令模式中的命令指的是一個執(zhí)行某些特定事情的指令

該模式旨在將函數(shù)的調(diào)用、請求和操作封裝成為一個單一的對象

請求以命令的形式包裹在對象中，并傳給調(diào)用對象。調(diào)用對象尋找可以處理該命令的合適的對象，并把該命令傳給相應(yīng)的對象，該對象執(zhí)行命令

例如在一個快餐店，用戶向服務(wù)員點餐。服務(wù)員將用戶的需求記錄在清單上：

• 請求者點菜：參數(shù)是菜名(我要什么菜)，時間(什么時候要)，該需求封裝起來后，如果有變化我可以修改參數(shù)
• 命令模式將點餐內(nèi)容封裝成為命令對象，命令對象就是填寫的清單
• 用戶不知道接收者(廚師)是誰，也不知道廚師的炒菜方式與步驟
• 請求者可以要求修改命令執(zhí)行時間，例如晚1小時再要

二、實現(xiàn)

命令模式由三種角色構(gòu)成：

• 發(fā)布者 invoker(發(fā)出命令，調(diào)用命令對象，不知道如何執(zhí)行與誰執(zhí)行)
• 接收者 receiver (提供對應(yīng)接口處理請求，不知道誰發(fā)起請求)
• 命令對象 command(接收命令，調(diào)用接收者對應(yīng)接口處理發(fā)布者的請求)

實現(xiàn)代碼如下：

class Receiver {  // 接收者類 
  execute() { 
    console.log('接收者執(zhí)行請求'); 
  } 
} 
 
class Command {   // 命令對象類 
  constructor(receiver) { 
    this.receiver = receiver; 
  } 
  execute () {    // 調(diào)用接收者對應(yīng)接口執(zhí)行 
    console.log('命令對象->接收者->對應(yīng)接口執(zhí)行'); 
    this.receiver.execute(); 
  } 
} 
 
class Invoker {   // 發(fā)布者類 
  constructor(command) { 
    this.command = command; 
  } 
  invoke() {      // 發(fā)布請求，調(diào)用命令對象 
    console.log('發(fā)布者發(fā)布請求'); 
    this.command.execute(); 
  } 
} 
 
const warehouse = new Receiver();       // 廚師 
const order = new Command(warehouse);   // 訂單 
const client = new Invoker(order);      // 請求者 
client.invoke(); 

三、應(yīng)用場景

命令模式最常見的應(yīng)用場景是：有時候需要向某些對象發(fā)送請求，但是并不知道請求的接收者是誰，也不知道被請求的操作是什么。此時，希望用一種松耦合的方式來設(shè)計程序，使的請求發(fā)送者和請求接收者能夠消除彼此之間的耦合關(guān)系

菜單

現(xiàn)在我們需要實現(xiàn)一個界面，包含很多個按鈕。每個按鈕有不同的功能，我們利用命令模式來完成

<button id="button1"></button> 
<button id="button2"></button> 
<button id="button3"></button> 
 
<script> 
  var button1 = document.getElementById("button1"); 
  var button2 = document.getElementById("button2"); 
  var button3 = document.getElementById("button3"); 
</script> 

然后定義一個setCommand函數(shù)，負責將按鈕安裝命令，可以確定的是，點擊按鈕會執(zhí)行某個 command 命令，執(zhí)行命令的動作被約定為調(diào)用 command 對象的 execute() 方法。如下：

var button1 = document.getElementById('button1') 
var setCommand = function(button, conmmand) { 
  button.onclick = function() { 
    conmmand.execute() 
  } 
} 

點擊按鈕之后具體行為包括刷新菜單界面、增加子菜單和刪除子菜單等，這幾個功能被分布在 MenuBar 和 SubMenu 這兩個對象中：

var MenuBar = { 
  refresh: function() { 
    console.log('刷新菜單目錄') 
  } 
} 
var SubMenu = { 
  add: function() { 
    console.log('增加子菜單') 
  }, 
  del: function(){ 
    console.log('刪除子菜單'); 
  } 
} 

這些功能需要封裝在對應(yīng)的命令類中：

// 刷新菜單目錄命令類 
class RefreshMenuBarCommand { 
    constructor(receiver) { 
        this.receiver = receiver; 
    } 
 
    execute() { 
        this.receiver.refresh(); 
    } 
} 
 
// 增加子菜單命令類 
class AddSubMenuCommand { 
    constructor(receiver) { 
        this.receiver = receiver; 
    } 
 
    execute() { 
        this.receiver.refresh(); 
    } 
} 
 
// '刪除子菜單命令類 
class DelSubMenuCommand { 
    constructor(receiver) { 
        this.receiver = receiver; 
    } 
 
    execute() { 
        this.receiver.refresh(); 
    } 
} 

最后就是把命令接收者傳入到 command 對象中，并且把 command 對象安裝到 button 上面：

var refreshMenuBarCommand = new RefreshMenuBarCommand(MenuBar); 
var addSubMenuCommand = new AddSubMenuCommand(SubMenu); 
var delSubMenuCommand = new DelSubMenuCommand(SubMenu); 
 
setCommand(button1, refreshMenuBarCommand); 
setCommand(button2, addSubMenuCommand); 
setCommand(button3, delSubMenuCommand); 

撤銷

命令模式的作用不僅是封裝運算塊，而且可以很方便地給命令對象增加撤銷操作

頁面中有一個 input 文本框和一個 button 按鈕，文本框中可以輸入一些數(shù)字，表示小球移動后的水平位置，小球在用戶點擊按鈕后立刻開始移動，如下：

<div 
  id="ball" 
  style="position: absolute; background: #000; width: 50px; height: 50px" 
></div> 
輸入小球移動后的位置:<input id="pos" /> 
<button id="moveBtn">開始移動</button> 
<script> 
  var ball = document.getElementById("ball"); 
  var pos = document.getElementById("pos"); 
  var moveBtn = document.getElementById("moveBtn"); 
  moveBtn.onclick = function () { 
    var animate = new Animate(ball); 
    animate.start("left", pos.value, 1000, "strongEaseOut"); 
  }; 
</script> 

換成命令模式如下：

var ball = document.getElementById("ball"); 
var pos = document.getElementById("pos"); 
var moveBtn = document.getElementById("moveBtn"); 
var MoveCommand = function (receiver, pos) { 
  this.receiver = receiver; 
  this.pos = pos; 
}; 
MoveCommand.prototype.execute = function () { 
  this.receiver.start("left", this.pos, 1000, "strongEaseOut"); 
}; 
var moveCommand; 
moveBtn.onclick = function () { 
  var animate = new Animate(ball); 
  moveCommand = new MoveCommand(animate, pos.value); 
  moveCommand.execute(); 
}; 

撤銷操作的實現(xiàn)一般是給命令對象增加一個名為 unexecude 或者 undo的方法，在該方法里執(zhí)行 execute 的反向操作

在 command.execute 方法讓小球開始真正運動之前，需要先記錄小球的當前位置，在 unexecude 或者 undo 操作中，再讓小球回到剛剛記錄下的位置，代碼如下：

class MoveCommand { 
    constructor(receiver, pos) { 
        this.receiver = receiver; 
        this.pos = pos; 
        this.oldPos = null; 
    } 
 
    execute() { 
        this.receiver.start('left', this.pos, 1000, 'strongEaseOut'); 
        this.oldPos = this.receiver.dom.getBoundingClientRect()[this.receiver.propertyName];  // 記錄小球開始移動前的位置 
    } 
 
    undo() { 
        this.receiver.start('left', this.oldPos, 1000, 'strongEaseOut'); // 回到小球移動前記錄的位置 
    } 
} 
 
var moveCommand; 
moveBtn.onclick = function () { 
  var animate = new Animate(ball); 
  moveCommand = new MoveCommand(animate, pos.value); moveCommand.execute(); 
}; 
cancelBtn.onclick = function () { 
  moveCommand.undo();// 撤銷命令 
}; 

現(xiàn)在通過命令模式輕松地實現(xiàn)了撤銷功能。如果用普通方法調(diào)用來實現(xiàn)，也許需要每次都手工記錄小球的運動軌跡，才能讓它還原到之前的位置

而命令模式中小球的原始位置在小球開始移動前已經(jīng)作為 command 對象的屬性被保存起來，所以只需要再提供一個 undo 方法，并且在 undo方法中讓小球會到剛剛記錄的原始位置就可以

參考文獻

https://www.runoob.com/design-pattern/command-pattern.html

https://juejin.cn/post/6844903673697402888

https://juejin.cn/post/6995474681813811208