一区二区三区在线-一区二区三区亚洲视频-一区二区三区亚洲-一区二区三区午夜-一区二区三区四区在线视频-一区二区三区四区在线免费观看

服務器之家:專注于服務器技術及軟件下載分享
分類導航

node.js|vue.js|jquery|angularjs|React|json|js教程|

服務器之家 - 編程語言 - JavaScript - js教程 - JavaScript設計模式之命令模式

JavaScript設計模式之命令模式

2022-03-10 16:31有夢想的咸魚前端 js教程

這篇文章主要介紹了JavaScript設計模式之命令模式,對設計模式感興趣的同學,可以參考下

命令模式是JavaScript設計模式中行為型的一種設計模式;

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

白話解釋:假如你是你們公司研發部門團隊leader,這時你們領導分布給你一個任務,你粗略的看了一下,很簡單的需求比較容易實現;而你作為團隊leader,每天肯定會有很多事情,所以你準備把需求直接丟給組員去開發和實現;領導根本不在意是你做的還是你讓誰做的,領導要的只是最終成果!這里領導就是命令的發布者,而你就是命令的接收者;

代碼實現:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!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">發布命令給前端</button>
        <button id="button2">發布命令給后臺</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>

運行結果:

JavaScript設計模式之命令模式

這里的將命令對象單獨的定義為一個方法,根據參數執行不同的任務。點擊不同按鈕的時候,執行不同的命令;

宏命令:

宏命令是一組命令的集合,通過執行宏命令的方式可以一次性執行一批命令;

電腦開機自啟動項:現在很多軟件都默認添加了電腦開機自啟動,就是我們電腦開機之后默認啟動某些特定的軟件;這就是一種宏命令的場景;

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
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方法進行添加到執行隊列中,所謂的執行隊列就是list這個數組,然后我們通過循環來依次執行命令,這就產生了我們的宏命令,通過一個命令一鍵啟動多個任務;

命令模式其實就是定義一個命令對象,請求發布者通過參數化的形式傳入參數來進行執行具體不同的操作,來達到請求發布者與接收者的解耦;

最后的話:

本系列一共寫了十篇常用的JavaScript設計模式的文章,參考了大量的資料加上自己的理解希望以最通俗易懂的方式來講給大家聽,由于本人水平和精力有限,理解有誤的地方請及時指出,設計模式系列文章暫時先擱置,后續再補充;下個月開始準備系統學習ES6,完成ES6系列文章;

以上就是JavaScript設計模式之命令模式的詳細內容,更多關于JavaScript設計模式的資料請關注服務器之家其它相關文章!

原文鏈接:https://www.cnblogs.com/dengyao-blogs/p/11736358.html

延伸 · 閱讀

精彩推薦
  • js教程基于JS簡單實現手持彈幕功能+文字抖動特效代碼

    基于JS簡單實現手持彈幕功能+文字抖動特效代碼

    這篇文章主要介紹了基于JS簡單實現手持彈幕功能+文字抖動特效代碼,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋...

    aimengmei4912022-02-22
  • js教程nestjs返回給前端數據格式的封裝實現

    nestjs返回給前端數據格式的封裝實現

    這篇文章主要介紹了nestjs返回給前端數據格式的封裝實現,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋...

    水痕018892022-01-22
  • js教程一起來了解一下JavaScript的預編譯(小結)

    一起來了解一下JavaScript的預編譯(小結)

    這篇文章主要介紹了一起來了解一下JavaScript的預編譯(小結),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的...

    前端布吉島12032022-01-25
  • js教程js閉包和垃圾回收機制示例詳解

    js閉包和垃圾回收機制示例詳解

    這篇文章主要給大家介紹了關于js閉包和垃圾回收機制的相關資料,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,...

    丶Serendipity丶8172022-01-24
  • js教程JavaScript實現篩選數組

    JavaScript實現篩選數組

    這篇文章主要為大家詳細介紹了JavaScript實現篩選數組,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下...

    崇志廣勤7422022-01-25
  • js教程js實現頭像上傳并且可預覽提交

    js實現頭像上傳并且可預覽提交

    這篇文章主要介紹了js如何實現頭像上傳并且可預覽提交,幫助大家更好的理解和使用js,感興趣的朋友可以了解下...

    harold10244242021-12-20
  • js教程微信小程序+mqtt,esp8266溫濕度讀取的實現方法

    微信小程序+mqtt,esp8266溫濕度讀取的實現方法

    這篇文章主要介紹了微信小程序+mqtt,esp8266溫濕度讀取的實現方法,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友...

    巴法云6172022-02-22
  • js教程javascript實現隨機抽獎功能

    javascript實現隨機抽獎功能

    這篇文章主要為大家詳細介紹了javascript實現隨機抽獎功能,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下...

    彴兗7152021-12-23
主站蜘蛛池模板: 6969精品视频在线观看 | 美女主播免费观看 | 精品视频一区二区三区 | 亚洲成年人免费网站 | 欧美3p大片在线观看完整版 | 麻豆网站视频国产在线观看 | 国产123区 | 亚洲欧美一区二区三区在线观看 | 国产精品成人一区二区 | 秋霞一级毛片 | 丁香六月色 | 国产伦精品一区二区三区免费迷 | 国产成人精品高清在线 | 亚洲品质自拍网站 | 国产这里有精品 | 国产亚洲福利一区二区免费看 | 女同全黄h全肉动漫 | 日韩精选视频 | 国产精品视频二区不卡 | 18free性欧美另类hd | 日一日操一操 | 香蕉国产成版人视频在线观看 | 男人女人日皮视频 | 国产巨大bbbb俄罗斯 | 91久久线看在观草草青青 | 青青在线香蕉国产精品 | 久青草国产观看在线视频 | 精品国产成人a区在线观看 精品国产91久久久久久久 | 亚洲国产精品自在在线观看 | 精品在线免费观看 | 欧美专区亚洲 | 日韩一区在线播放 | 精品国产成人高清在线 | 色综合久久九月婷婷色综合 | 亚洲国产在线视频中文字 | 激情三级做爰在线观看激情 | 青青青青在线视频 | 天天做天天爽天天谢 | 性色香蕉AV久久久天天网 | 91日本在线观看亚洲精品 | 国产在线看片网站 |