JavaScript設(shè)計(jì)模式之命令模式
命令模式是JavaScript設(shè)計(jì)模式中行為型的一種設(shè)計(jì)模式；
定義：向某些對(duì)象發(fā)送請(qǐng)求，但是并不知道被請(qǐng)求的操作具體是什么，所以我們希望以一種松耦合的方式來(lái)設(shè)計(jì)程序，使得請(qǐng)求發(fā)送者和接收者之間能夠消除彼此之間的耦合關(guān)系；而我們的這種松耦合的方式就是命令模式；
白話解釋：假如你是你們公司研發(fā)部門(mén)團(tuán)隊(duì)leader，這時(shí)你們領(lǐng)導(dǎo)分布給你一個(gè)任務(wù)，你粗略的看了一下，很簡(jiǎn)單的需求比較容易實(shí)現(xiàn)；而你作為團(tuán)隊(duì)leader，每天肯定會(huì)有很多事情，所以你準(zhǔn)備把需求直接丟給組員去開(kāi)發(fā)和實(shí)現(xiàn)；領(lǐng)導(dǎo)根本不在意是你做的還是你讓誰(shuí)做的，領(lǐng)導(dǎo)要的只是最終成果！這里領(lǐng)導(dǎo)就是命令的發(fā)布者，而你就是命令的接收者；
代碼實(shí)現(xiàn)：
<!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ā)布命令給后臺(tái)</button></body><script> var button1 = document.getElementById('button1'); var button2 = document.getElementById('button2'); // 定義命令 var command = function(Executor,func){Executor.onclick = func; } // 定義領(lǐng)導(dǎo) var Leader = {};Leader.teamleader = {web:function(){ console.log('前端馬上完成');},java:function(){console.log('后臺(tái)馬上完成')} } command(button1,Leader.teamleader.web); command(button2,Leader.teamleader.java);</script></html>
運(yùn)行結(jié)果：
這里的將命令對(duì)象單獨(dú)的定義為一個(gè)方法，根據(jù)參數(shù)執(zhí)行不同的任務(wù)。點(diǎn)擊不同按鈕的時(shí)候，執(zhí)行不同的命令；
宏命令：
宏命令是一組命令的集合，通過(guò)執(zhí)行宏命令的方式可以一次性執(zhí)行一批命令；
電腦開(kāi)機(jī)自啟動(dòng)項(xiàng)：現(xiàn)在很多軟件都默認(rèn)添加了電腦開(kāi)機(jī)自啟動(dòng)，就是我們電腦開(kāi)機(jī)之后默認(rèn)啟動(dòng)某些特定的軟件；這就是一種宏命令的場(chǎng)景；
var QQCommand = { excute:function(){console.log('自啟動(dòng)QQ成功'); }}var weChatCommand = { excute:function(){console.log('自啟動(dòng)微信成功'); }}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();
上面的代碼中，我們?cè)诤昝顚?duì)象中定義了一個(gè)list數(shù)組，然后通過(guò)add方法進(jìn)行添加到執(zhí)行隊(duì)列中，所謂的執(zhí)行隊(duì)列就是list這個(gè)數(shù)組，然后我們通過(guò)循環(huán)來(lái)依次執(zhí)行命令，這就產(chǎn)生了我們的宏命令，通過(guò)一個(gè)命令一鍵啟動(dòng)多個(gè)任務(wù)；
命令模式其實(shí)就是定義一個(gè)命令對(duì)象，請(qǐng)求發(fā)布者通過(guò)參數(shù)化的形式傳入?yún)?shù)來(lái)進(jìn)行執(zhí)行具體不同的操作，來(lái)達(dá)到請(qǐng)求發(fā)布者與接收者的解耦；
最后的話：
本系列一共寫(xiě)了十篇常用的JavaScript設(shè)計(jì)模式的文章，參考了大量的資料加上自己的理解希望以最通俗易懂的方式來(lái)講給大家聽(tīng)，由于本人水平和精力有限，理解有誤的地方請(qǐng)及時(shí)指出，設(shè)計(jì)模式系列文章暫時(shí)先擱置，后續(xù)再補(bǔ)充；下個(gè)月開(kāi)始準(zhǔn)備系統(tǒng)學(xué)習(xí)ES6，完成ES6系列文章；
以上就是JavaScript設(shè)計(jì)模式之命令模式的詳細(xì)內(nèi)容，更多關(guān)于JavaScript設(shè)計(jì)模式的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！
相關(guān)文章：
1. JavaScript數(shù)據(jù)類型對(duì)函數(shù)式編程的影響示例解析2. vue實(shí)現(xiàn)將自己網(wǎng)站(h5鏈接)分享到微信中形成小卡片的超詳細(xì)教程3. 使用css實(shí)現(xiàn)全兼容tooltip提示框4. div的offsetLeft與style.left區(qū)別5. html清除浮動(dòng)的6種方法示例6. CSS3實(shí)例分享之多重背景的實(shí)現(xiàn)(Multiple backgrounds)7. CSS代碼檢查工具stylelint的使用方法詳解8. 不要在HTML中濫用div9. 利用CSS3新特性創(chuàng)建透明邊框三角10. 詳解CSS偽元素的妙用單標(biāo)簽之美
網(wǎng)公網(wǎng)安備