zoukankan      html  css  js  c++  java
  • JavaScript设计模式_06_命令模式

    命令模式是比较简答的设计模式,它最常应用于以下场景:有时候需要向某些对象发送请求,但是并不知道请求接收者是谁,也不知道被请求的操作是什么。这时希望用一种松耦合的方式来设计程序,使得请求发送者和接受者能消除彼此之间的耦合关系。

    /**
     * pre: 命令模式
     * 
     */
    //-------------- 示例1 ---------------
    /**
     * 例如页面上有三个按钮,对应的功能分别是:刷新菜单、增加子菜单和删除子菜单,
     * 我们将三个功能用命令的模式实现:
     * 
     */
    var btn1 = document.getElementById("btn1");
    var btn2 = document.getElementById("btn2");
    var btn3 = document.getElementById("btn3");
    
    var setCommand = function(button, command) {
        button.onclick = function() {
            command.execute();
        };
    };
    var menuBar = {
        refresh: function() {
            console.log("刷新菜单栏目录.");
        }
    };
    var subMenu = {
        add: function() {
            console.log("增加子菜单.");
        },
        del: function() {
            console.log("删除子菜单.");
        }
    };
    var refreshMenuBarCmd = function(receiver) {
        this.receiver = receiver;
        return {
            execute: function() {
                receiver.refresh();
            }
        }
    };
    var addSubMenuCmd = function(receiver) {
        this.receiver = receiver;
        return {
            execute: function() {
                receiver.add();
            }
        }
    };
    var delSubMenuCmd = function(receiver) {
        this.receiver = receiver;
        return {
            execute: function() {
                receiver.del();
            }
        }
    };
    setCommand(btn1, refreshMenuBarCmd(menuBar));
    setCommand(btn2, addSubMenuCmd(subMenu));
    setCommand(btn3, delSubMenuCmd(subMenu));
    /*
     * 命令模式的好处:将过程式的请求调用封装在command对象的execute方法中,可四处传递,客户端不需关系如何执行。
     */
    
    //--------------- 示例2 -------------
    /* 宏命令:一组命令集合
     *   比如到家开门后,自动打开电脑,登录QQ,
     * 我们将这一系列动作组合起来执行。
     */
    var openDoorCmd = {
        execute: function() {
            console.log("开门.");
        }
    };
    var openPcCmd = {
        execute: function() {
            console.log("开电脑.");
        }
    };
    var loginQQCmd = {
        execute: function() {
            console.log("登录QQ.");
        }
    };
    var MarcoCmd = function() {
        var cmdList = [],
            add, execute;
        add = function(obj) {
            cmdList.push(obj);
        };
        execute = function() {
            if(!cmdList.length == 0) {
                for(var obj of cmdList) {
                    obj.execute.apply(this);
                }
            }
        };
        return {
            add: add,
            execute: execute
        }
    };
    var marcoCmd = MarcoCmd();
    marcoCmd.add(openDoorCmd);
    marcoCmd.add(openPcCmd);
    marcoCmd.add(loginQQCmd);
    marcoCmd.execute();
  • 相关阅读:
    37.js----浅谈js原型的理解
    iOS
    iOS
    iOS
    python3
    ios
    iOS
    python3
    python3
    iOS
  • 原文地址:https://www.cnblogs.com/stinchan/p/7049536.html
Copyright © 2011-2022 走看看