面試官：說說你對命令模式的理解？應(yīng)用場景？

作者：灰灰 2021-11-09 08:51:13

開發(fā) 前端

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

[[434039]]

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

一、是什么

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

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

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

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

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

二、實(shí)現(xiàn)

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

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

實(shí)現(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)用場景是：有時(shí)候需要向某些對象發(fā)送請求，但是并不知道請求的接收者是誰，也不知道被請求的操作是什么。此時(shí)，希望用一種松耦合的方式來設(shè)計(jì)程序，使的請求發(fā)送者和請求接收者能夠消除彼此之間的耦合關(guān)系

菜單

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

<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>

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

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

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

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);

撤銷

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

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

<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(); 
};

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

在 command.execute 方法讓小球開始真正運(yùn)動之前，需要先記錄小球的當(dāng)前位置，在 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();// 撤銷命令 
};