JavaScript設計模式之命令模式
命令模式是JavaScript設計模式中行為型的一種設計模式；
定義：向某些對象發(fā)送請求，但是并不知道被請求的操作具體是什么，所以我們希望以一種松耦合的方式來設計程序，使得請求發(fā)送者和接收者之間能夠消除彼此之間的耦合關系；而我們的這種松耦合的方式就是命令模式；
白話解釋：假如你是你們公司研發(fā)部門團隊leader，這時你們領導分布給你一個任務，你粗略的看了一下，很簡單的需求比較容易實現；而你作為團隊leader，每天肯定會有很多事情，所以你準備把需求直接丟給組員去開發(fā)和實現；領導根本不在意是你做的還是你讓誰做的，領導要的只是最終成果！這里領導就是命令的發(fā)布者，而你就是命令的接收者；
代碼實現：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button id="button1">發(fā)布命令給前端</button>
<button id="button2">發(fā)布命令給后臺</button>
</body>
<script>
var button1 = document.getElementById("button1");
var button2 = document.getElementById("button2");
// 定義命令
var command = function(Executor,func){
Executor.onclick = func;
}
// 定義領導
var Leader = {};
Leader.teamleader = {
web:function(){
console.log("前端馬上完成");
},
java:function(){
console.log("后臺馬上完成")
}
}
command(button1,Leader.teamleader.web);
command(button2,Leader.teamleader.java);
</script>
</html>
運行結果：
這里的將命令對象單獨的定義為一個方法，根據參數執(zhí)行不同的任務。點擊不同按鈕的時候，執(zhí)行不同的命令；
宏命令：
宏命令是一組命令的集合，通過執(zhí)行宏命令的方式可以一次性執(zhí)行一批命令；
電腦開機自啟動項：現在很多軟件都默認添加了電腦開機自啟動，就是我們電腦開機之后默認啟動某些特定的軟件；這就是一種宏命令的場景；
var QQCommand = {
excute:function(){
console.log("自啟動QQ成功");
}
}
var weChatCommand = {
excute:function(){
console.log("自啟動微信成功");
}
}
var MacroCommand = function(){
return {
list:[],
add:function(command){
this.list.push(command);
},
excute:function(){
for(var i = 0,command;command = this.list[i++];){
command.excute();
}
}
}
}
var macroCommand = MacroCommand();
macroCommand.add(QQCommand);
macroCommand.add(weChatCommand);
macroCommand.excute();
上面的代碼中，我們在宏命令對象中定義了一個list數組，然后通過add方法進行添加到執(zhí)行隊列中，所謂的執(zhí)行隊列就是list這個數組，然后我們通過循環(huán)來依次執(zhí)行命令，這就產生了我們的宏命令，通過一個命令一鍵啟動多個任務；
命令模式其實就是定義一個命令對象，請求發(fā)布者通過參數化的形式傳入參數來進行執(zhí)行具體不同的操作，來達到請求發(fā)布者與接收者的解耦；
最后的話：
本系列一共寫了十篇常用的JavaScript設計模式的文章，參考了大量的資料加上自己的理解希望以最通俗易懂的方式來講給大家聽，由于本人水平和精力有限，理解有誤的地方請及時指出，設計模式系列文章暫時先擱置，后續(xù)再補充；下個月開始準備系統(tǒng)學習ES6，完成ES6系列文章；
以上就是JavaScript設計模式之命令模式的詳細內容，更多關于JavaScript設計模式的資料請關注腳本之家其它相關文章！
相關文章
JavaScript實現Tab標簽頁切換的最簡便方式(4種)
這篇文章主要介紹了JavaScript實現Tab標簽頁切換的最簡便方式(4種)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-06-06
MSN消息提示類...2006-09-09
按Ctrl+Enter發(fā)送，思路是監(jiān)聽textarea的onkeydown事件，當ctrl鍵被按下，并且，keycode為13（回車），時，調用發(fā)送表單的函數2014-09-09
js去除重復字符串在項目開發(fā)中很實用，接下來詳細介紹實現方法，感興趣的朋友可以參考下2013-01-01
這篇文章主要介紹了js之切換全屏和退出全屏實現代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-09-09
Javascript 解疑，需要的朋友可以參考下。2009-11-11
Javascript中扁平化數據結構與JSON樹形結構轉換詳解
之前朋友問過我一個問題,項目中遇到扁平化數據結構不知如何樹形化,下面這篇文章主要給大家介紹了關于Javascript中扁平化數據結構與JSON樹形結構轉換的相關資料,需要的朋友可以參考下2022-05-05
本文通過一段實例代碼給大家介紹了基于js實現點擊按鈕可編輯效果，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的的朋友參考下吧2018-07-07
閉包，指的是詞法表示包括不被計算的變量的函數，也就是說，函數可以使用函數之外定義的變量。2010-12-12
這篇文章主要介紹了JS實現checkbox互斥(單選)功能,涉及JavaScript針對頁面元素屬性的判斷及動態(tài)操作相關實現技巧,需要的朋友可以參考下2019-05-05