JavaScript设计模式笔记（六）组合模式_前端组合模式-优快云博客

本文链接：https://blog.youkuaiyun.com/zemprogram/article/details/90111760

本文深入探讨了组合模式的概念，通过树形结构表示“部分-整体”的层次结构，展示了如何使用组合模式处理宏命令，并分析了其优缺点。文章还强调了组合模式与IS-A和HAS-A关系的区别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

组合模式的定义

组合模式将对象组合成树形结构，以表示“部分-整体”的层次结构。

曾探《JavaScript设计模式与开发实践》

组合模式用于处理组合对象的请求。

更强大的宏命令

关于宏命令的实现，我在命令模式的笔记中已经提及了。

在组合模式中，可以对宏命令做更好的处理，将一些小的宏命令合成大的宏命令，下面引用《JavaScript设计模式与开发实践》的代码来说明这点。

<html>

<body>
    <button id="button">按我</button>
    <script>
        var MacroCommand = function() {
            return {
                commandsList: [],
                add: function(command) {
                    this.commandsList.push(command)
                },
                execute: function() {
                    for (let 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);

        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>
</body>

</html>

结果