zoukankan      html  css  js  c++  java
  • JavaScript设计模式_07_组合模式

    组合模式将对象组合成树形结构,以表示“部分-整体”的层次结构。并通过对象的多态性表现,使得用户对单个对象和组合对象的使用具有一致性。

    /**
     * pre:组合模式
     */
    //--------- 示例1 ---------
    /* 更强大的宏命令
     */
    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 openDoorCmd = {
        execute: function() {
            console.log("开门.");
        }
    };
    var openPcCmd = {
        execute: function() {
            console.log("开电脑.");
        }
    };
    var loginQQCmd = {
        execute: function() {
            console.log("登录QQ.");
        }
    };
    var marcoCmd1 = MarcoCmd();
    marcoCmd1.add(openDoorCmd);
    marcoCmd1.add(openPcCmd);
    marcoCmd1.add(loginQQCmd);
    //第二组命令
    var openAcCmd = {
        execute: function() {
            console.log("打开空调.");
        }
    };
    var openTvCmd = {
        execute: function() {
            console.log("打开电视.");
        }
    };
    var openSoundCmd = {
        execute: function() {
            console.log("打开音箱.");
        }
    };
    var marcoCmd2 = MarcoCmd();
    marcoCmd2.add(openTvCmd);
    marcoCmd2.add(openSoundCmd);
    
    // 组合命令
    var marcoCmd = MarcoCmd();
    marcoCmd.add(openAcCmd);
    marcoCmd.add(marcoCmd1);
    marcoCmd.add(marcoCmd2);
    
    var setCommand = (function(command) {
        document.getElementById("controlBtn").onclick = function() {
            command.execute.apply(this);
        }
    })(marcoCmd);
    
    /*[注]:组合命令模式可以让客户不再顾忌节点是组合对象还是叶子对象,只要都拥有相同的execute方法 即可。
     * 但需要注意的是:
     *     1、组合模式不是父子关系,它们合作的关键是拥有相同的接口;
     *     2、除了有相同的接口,对一组叶子对象的操作要具有一致性;
     *     3、当一个叶子节点属于多个组的时候,相互引用比较复杂不适合组合模式,可使用中介者模式;
     */
  • 相关阅读:
    1.Basic Structure
    React生成组件类
    React遍历标签数组
    React遍历数组
    React节点插入内容
    -Dmaven.multiModuleProjectDirectory system property is not set
    Openstack_通用模块_Oslo_vmware 创建/删除 vCenter 虚拟机
    perl 安装AnyEvent::HTTP
    建立可视化决策平台,“数据化”首当其冲!
    建立可视化决策平台,“数据化”首当其冲!
  • 原文地址:https://www.cnblogs.com/stinchan/p/7049596.html
Copyright © 2011-2022 走看看