命令模式是一種行為設(shè)計(jì)模式，其目的是將請求發(fā)送者和接收者解耦，從而允許發(fā)送者發(fā)送請求，而無需知道請求的具體處理方式。在命令模式中，請求被封裝為一個對象，這個對象包含了執(zhí)行請求所需的所有信息，包括調(diào)用方法、參數(shù)等。這樣，請求的發(fā)送者只需知道如何發(fā)送命令對象，而不需要關(guān)心命令的具體執(zhí)行。
關(guān)鍵角色和概念：
命令接口（Command）： 聲明了執(zhí)行命令的方法 execute()，以及可能的撤銷方法 undo() 和重做方法 redo()。這個接口可以有多個具體實(shí)現(xiàn)類，每個類代表不同的命令。
具體命令（ConcreteCommand）： 實(shí)現(xiàn)了命令接口，負(fù)責(zé)執(zhí)行具體的操作。它通常包含一個接收者對象，通過調(diào)用接收者的方法來完成實(shí)際的工作。
調(diào)用者（Invoker）： 請求的發(fā)送者，負(fù)責(zé)將命令發(fā)送給接收者。它并不知道命令的具體執(zhí)行細(xì)節(jié)，只是負(fù)責(zé)發(fā)送請求。
接收者（Receiver）： 實(shí)際執(zhí)行命令操作的對象。命令對象通常會包含一個接收者，通過調(diào)用接收者的方法來完成命令的執(zhí)行。
客戶端（Client）： 創(chuàng)建命令對象、接收者對象以及調(diào)用者對象的地方。客戶端將命令對象與調(diào)用者關(guān)聯(lián)，并發(fā)送請求。
命令模式的優(yōu)點(diǎn)包括：
解耦請求發(fā)送者和接收者： 命令模式將請求的發(fā)送者和接收者解耦，使得它們不需要直接了解對方。這提高了系統(tǒng)的靈活性和可維護(hù)性。
支持撤銷和重做： 通過在命令對象中添加 undo() 和 redo() 方法，可以輕松實(shí)現(xiàn)撤銷和重做操作。
容易擴(kuò)展： 可以輕松添加新的命令類，無需修改現(xiàn)有的代碼。
命令模式通常在需要對請求進(jìn)行參數(shù)化、排隊(duì)、記錄日志、支持撤銷和重做等場景中發(fā)揮作用。文章來源：http://www.zghlxwxcb.cn/news/detail-822803.html
簡易命令模式示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Command Pattern Demo</title>
</head>
<body>
<!-- 頁面標(biāo)題 -->
<h1>Command Pattern Demo</h1>
<!-- 按鈕觸發(fā)燈的開關(guān)命令 -->
<button onclick="pressLightButton()">Toggle Light</button>
<!-- 按鈕觸發(fā)風(fēng)扇的開關(guān)命令 -->
<button onclick="pressFanButton()">Toggle Fan</button>
<!-- 按鈕觸發(fā)撤銷操作 -->
<button onclick="undo()">Undo</button>
<!-- 按鈕觸發(fā)重做操作 -->
<button onclick="redo()">Redo</button>
<!-- 圖片顯示燈和風(fēng)扇狀態(tài) -->
<div>
<img
id="light"
src="./light.png"
height="90"
style="filter: grayscale(100%)"
/>
<img
id="fan"
src="./fan.png"
height="90"
style="filter: grayscale(100%)"
/>
</div>
<!-- 顯示命令執(zhí)行信息的區(qū)域 -->
<div id="output"></div>
<script>
// 命令接口
class Command {
execute() {}
undo() {}
redo() {}
}
// 具體命令 - 打開燈
class LightOnCommand extends Command {
constructor(light) {
super();
this.light = light;
}
execute() {
this.light.turnOn();
addCommandToHistory(this);
}
undo() {
this.light.turnOff();
}
redo() {
this.light.turnOn();
}
}
// 具體命令 - 關(guān)閉燈
class LightOffCommand extends Command {
constructor(light) {
super();
this.light = light;
}
execute() {
this.light.turnOff();
addCommandToHistory(this);
}
undo() {
this.light.turnOn();
}
redo() {
this.light.turnOff();
}
}
// 具體命令 - 打開風(fēng)扇
class FanOnCommand extends Command {
constructor(fan) {
super();
this.fan = fan;
}
execute() {
this.fan.turnOn();
addCommandToHistory(this);
}
undo() {
this.fan.turnOff();
}
redo() {
this.fan.turnOn();
}
}
// 具體命令 - 關(guān)閉風(fēng)扇
class FanOffCommand extends Command {
constructor(fan) {
super();
this.fan = fan;
}
execute() {
this.fan.turnOff();
addCommandToHistory(this);
}
undo() {
this.fan.turnOn();
}
redo() {
this.fan.turnOff();
}
}
// 接收者 - 燈
class Light {
constructor() {
this.isOn = false;
}
turnOn() {
this.isOn = true;
// 獲取燈的 DOM 元素并設(shè)置為彩色（非灰度）
const dom = document.getElementById("light");
dom.style.filter = "grayscale(0%)";
// 更新信息
updateOutput("燈被打開了");
}
turnOff() {
this.isOn = false;
// 獲取燈的 DOM 元素并設(shè)置為灰度
const dom = document.getElementById("light");
dom.style.filter = "grayscale(100%)";
// 更新信息
updateOutput("燈被關(guān)閉了");
}
}
// 接收者 - 風(fēng)扇
class Fan {
constructor() {
this.isOn = false;
}
turnOn() {
this.isOn = true;
// 獲取風(fēng)扇的 DOM 元素并設(shè)置為彩色（非灰度）
const dom = document.getElementById("fan");
dom.style.filter = "grayscale(0%)";
// 更新信息
updateOutput("風(fēng)扇被打開了");
}
turnOff() {
this.isOn = false;
// 獲取風(fēng)扇的 DOM 元素并設(shè)置為灰度
const dom = document.getElementById("fan");
dom.style.filter = "grayscale(100%)";
// 更新信息
updateOutput("風(fēng)扇被關(guān)閉了");
}
}
// 創(chuàng)建燈和風(fēng)扇的實(shí)例
const light = new Light();
const fan = new Fan();
// 創(chuàng)建具體命令實(shí)例
const lightOnCommand = new LightOnCommand(light);
const lightOffCommand = new LightOffCommand(light);
const fanOnCommand = new FanOnCommand(fan);
const fanOffCommand = new FanOffCommand(fan);
// 命令歷史記錄和索引
let commandHistory = [];
let historyIndex = -1;
// 將命令添加到歷史記錄
function addCommandToHistory(command) {
if (commandHistory.length >= 100) commandHistory.shift();
commandHistory.push(command);
historyIndex = commandHistory.length - 1;
}
// 撤銷操作
function undo() {
if (historyIndex >= 0) {
// 執(zhí)行當(dāng)前索引對應(yīng)的命令的撤銷操作
commandHistory[historyIndex].undo();
historyIndex--;
}
}
// 重做操作
function redo() {
if (historyIndex < commandHistory.length - 1) {
// 增加歷史索引并執(zhí)行對應(yīng)命令的操作
historyIndex++;
commandHistory[historyIndex].redo();
}
}
// 按鈕點(diǎn)擊觸發(fā)燈的開關(guān)命令
function pressLightButton() {
if (light.isOn) {
lightOffCommand.execute();
} else {
lightOnCommand.execute();
}
}
// 按鈕點(diǎn)擊觸發(fā)風(fēng)扇的開關(guān)命令
function pressFanButton() {
if (fan.isOn) {
fanOffCommand.execute();
} else {
fanOnCommand.execute();
}
}
// 更新頁面上顯示命令執(zhí)行信息的區(qū)域
function updateOutput(message) {
const outputDiv = document.getElementById("output");
outputDiv.innerHTML = `<p>${message}</p>`;
}
</script>
</body>
</html>
運(yùn)行演示：
文章來源地址http://www.zghlxwxcb.cn/news/detail-822803.html
到了這里，關(guān)于掌握設(shè)計(jì)模式：深入了解命令模式的優(yōu)雅調(diào)度與行為解耦的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
