7、组合模式

web行路人

于 2019-07-13 10:01:29 发布

阅读量142

点赞数

分类专栏： js常见设计模式 js设计模式

本文链接：https://blog.csdn.net/qishuixian/article/details/95726944

版权

js设计模式同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

js常见设计模式

13 篇文章 0 订阅

订阅专栏

1、特点

组合模式是用小的子对象来构建更大的对象，而这些小的子对象本身也许是由更小的“孙对象”构成的。

2、demo

目前的万能遥控器，包含了关门、开电脑、登录QQ 这3 个命令。现在我们需要一个“超级万能遥控器”，可以控制家里所有的电器，这个遥控器拥有以下功能：
a、打开空调
b、打开电视和音响
c、关门、开电脑、登录QQ

<html>

<body>
    <button id="button">按我</button>
</body>
<script>
    var MacroCommand = function() {
        return {
            commandsList: [],
            add: function(command) {
                this.commandsList.push(command);
            },
            execute: function() {
                for (var i = 0, command; command = this.commandsList[i++];) {
                    command.execute();
                }
            }
        }
    };

    var openAcCommand = {
        execute: function() {
            console.log('打开空调');
        }
    };

    /**********家里的电视和音响是连接在一起的，所以可以用一个宏命令来组合打开电视和打开音响的命令
     *********/
    var openTvCommand = {
        execute: function() {
            console.log('打开电视');
        }
    };

    var openSoundCommand = {
        execute: function() {
            console.log('打开音响');
        }
    };

    var macroCommand1 = MacroCommand();
    macroCommand1.add(openTvCommand);
    macroCommand1.add(openSoundCommand);
    /*********关门、打开电脑和打登录QQ 的命令****************/
    var closeDoorCommand = {
        execute: function() {
            console.log('关门');
        }
    };

    var openPcCommand = {
        execute: function() {
            console.log('开电脑');
        }
    };

    var openQQCommand = {
        execute: function() {
            console.log('登录QQ');
        }
    };

    var macroCommand2 = MacroCommand();
    macroCommand2.add(closeDoorCommand);
    macroCommand2.add(openPcCommand);
    macroCommand2.add(openQQCommand);

    /*********现在把所有的命令组合成一个“超级命令”**********/
    var macroCommand = MacroCommand();
    macroCommand.add(openAcCommand);
    macroCommand.add(macroCommand1);
    macroCommand.add(macroCommand2);

    /*********最后给遥控器绑定“超级命令”**********/
    var setCommand = (function(command) {
        document.getElementById('button').onclick = function() {
            command.execute();
        }
    })(macroCommand);
</script>

</html>

参考文献：参考文献：《JavaScript设计模式与开发实践》