JavaScript設(shè)計模式之命令模式的示例分析

發(fā)布時間：2021-04-26 14:37:48 來源：億速云閱讀：155 作者：小新欄目：開發(fā)技術(shù)

小編給大家分享一下JavaScript設(shè)計模式之命令模式的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

javascript是一種什么語言

javascript是一種動態(tài)類型、弱類型的語言，基于對象和事件驅(qū)動并具有相對安全性并廣泛用于客戶端網(wǎng)頁開發(fā)的腳本語言，同時也是一種廣泛用于客戶端Web開發(fā)的腳本語言。它主要用來給HTML網(wǎng)頁添加動態(tài)功能，現(xiàn)在JavaScript也可被用于網(wǎng)絡(luò)服務(wù)器，如Node.js。

命令模式是JavaScript設(shè)計模式中行為型的一種設(shè)計模式；

定義：向某些對象發(fā)送請求，但是并不知道被請求的操作具體是什么，所以我們希望以一種松耦合的方式來設(shè)計程序，使得請求發(fā)送者和接收者之間能夠消除彼此之間的耦合關(guān)系；而我們的這種松耦合的方式就是命令模式；

白話解釋：假如你是你們公司研發(fā)部門團(tuán)隊leader，這時你們領(lǐng)導(dǎo)分布給你一個任務(wù)，你粗略的看了一下，很簡單的需求比較容易實(shí)現(xiàn)；而你作為團(tuán)隊leader，每天肯定會有很多事情，所以你準(zhǔn)備把需求直接丟給組員去開發(fā)和實(shí)現(xiàn)；領(lǐng)導(dǎo)根本不在意是你做的還是你讓誰做的，領(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ā)布命令給后臺</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("后臺馬上完成")
        }
    }

    command(button1,Leader.teamleader.web);
    command(button2,Leader.teamleader.java);
</script>
</html>

運(yùn)行結(jié)果：

JavaScript設(shè)計模式之命令模式的示例分析

這里的將命令對象單獨(dú)的定義為一個方法，根據(jù)參數(shù)執(zhí)行不同的任務(wù)。點(diǎn)擊不同按鈕的時候，執(zhí)行不同的命令；

宏命令：

宏命令是一組命令的集合，通過執(zhí)行宏命令的方式可以一次性執(zhí)行一批命令；

電腦開機(jī)自啟動項(xiàng)：現(xiàn)在很多軟件都默認(rèn)添加了電腦開機(jī)自啟動，就是我們電腦開機(jī)之后默認(rèn)啟動某些特定的軟件；這就是一種宏命令的場景；

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數(shù)組，然后通過add方法進(jìn)行添加到執(zhí)行隊列中，所謂的執(zhí)行隊列就是list這個數(shù)組，然后我們通過循環(huán)來依次執(zhí)行命令，這就產(chǎn)生了我們的宏命令，通過一個命令一鍵啟動多個任務(wù)；

命令模式其實(shí)就是定義一個命令對象，請求發(fā)布者通過參數(shù)化的形式傳入?yún)?shù)來進(jìn)行執(zhí)行具體不同的操作，來達(dá)到請求發(fā)布者與接收者的解耦；

以上是“JavaScript設(shè)計模式之命令模式的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

JavaScript設(shè)計模式之命令模式的示例分析

javascript是一種什么語言

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽