javascript组合模式

在程序设计中,组合模式就是用小的子对象来构建更大的对象,而这些小的子对象本身也是由更小的对象组成的。这里只是组合,并没有从属关系。参考《javascript设计模式与开发实践》第十章

//宏命令的代码
var closeDoorCommand = {//作为叶对象
        execute: function(){
            console.log( '关门' );
        }
    };
    var openPcCommand = { //作为叶对象
        execute: function(){
            console.log( '开电脑' );
        }
    };
    var openQQCommand = {//作为叶对象
        execute: function(){
            console.log( '登录QQ' );
        }
    };
    //组合模式的根对象
    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(); //叶对象都有execute方法
                }
            }
        }
    };
    var macroCommand = MacroCommand();
    macroCommand.add( closeDoorCommand );//添加到根对象数组中
    macroCommand.add( openPcCommand );//同上
    macroCommand.add( openQQCommand );//同上
    macroCommand.execute();//执行根命令

两个要点:1.js对象引用可以作为数组元素加入到数组中。2. 叶对象都有一样的execute方法。在根对象执行的时候,可以使用leaf.execute的模式来调用对象的方法。

在叶对象中还可以继续扩展也对象,组合的深度继续加深。

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 );


//最终所有的叶对象的引用都添加到commandlist数组中,在根对象上执行
//execute方法时,会遍历所有的叶对象,并执行leaf.execute()方法。
//得到结果
最终还是使用了javascript的数组操作和对象操作的便利性。在javascript的模式设计中,基本都是在操作数组和对象。所有有必要还好在深刻理解一下数组对象的方法。

这个系列写了好几篇文章了。其实写的时候好多地方还不太懂,写着写着有些地方就明白了,所以还是要坚持写下去。现在觉得写的还不错,过半年可能觉得就很傻了。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 1. Java基础部分 基础部分的顺序:基本语法,类相关的语法,内部类的语法,继承相关的语法,异常的语法,线程的语...
    子非鱼_t_阅读 33,276评论 18 399
  • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 12,403评论 2 17
  • 第5章 引用类型(返回首页) 本章内容 使用对象 创建并操作数组 理解基本的JavaScript类型 使用基本类型...
    大学一百阅读 8,792评论 0 4
  • 我喜欢你――陪在我的身边就足够,我一无所有,所以有你就足够
    小大人的世界阅读 1,828评论 0 0
  • 和室友饭后出来散步,走到附近的公园,迎面而来的桂花飘香,甜腻甜腻的,一扫之前的疲倦之感,心情也跟着变好。这是属...
    玲酱不是酱阅读 1,760评论 0 0

友情链接更多精彩内容