javascript組合模式

在程序設計中姑荷,組合模式就是用小的子對象來構建更大的對象秸仙,而這些小的子對象本身也是由更小的對象組成的卧土。這里只是組合,并沒有從屬關系滞诺。參考《javascript設計模式與開發(fā)實踐》第十章

//宏命令的代碼
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 ){//葉對象作為數(shù)組的元素傳遞到
            //數(shù)組中
                this.commandsList.push( command );
            },
            execute: function(){ //執(zhí)行組合命令
                for ( var i = 0, command; command = this.commandsList[ i++ ]; ){
                    command.execute(); //葉對象都有execute方法
                }
            }
        }
    };
    var macroCommand = MacroCommand();
    macroCommand.add( closeDoorCommand );//添加到根對象數(shù)組中
    macroCommand.add( openPcCommand );//同上
    macroCommand.add( openQQCommand );//同上
    macroCommand.execute();//執(zhí)行根命令

兩個要點:1.js對象引用可以作為數(shù)組元素加入到數(shù)組中司草。2. 葉對象都有一樣的execute方法计寇。在根對象執(zhí)行的時候扩淀,可以使用leaf.execute的模式來調(diào)用對象的方法吠撮。

在葉對象中還可以繼續(xù)擴展也對象伊滋,組合的深度繼續(xù)加深洋幻。

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( '打開空調(diào)' );
        }
    };
/**********家里的電視和音響是連接在一起的郁轻,所以可以用一個宏命令來組合打開電視和打開音響的命令
*********/
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 );
/*********現(xiàn)在把所有的命令組合成一個“超級命令”**********/
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數(shù)組中文留,在根對象上執(zhí)行
//execute方法時好唯,會遍歷所有的葉對象,并執(zhí)行l(wèi)eaf.execute()方法燥翅。
//得到結果
最終還是使用了javascript的數(shù)組操作和對象操作的便利性骑篙。在javascript的模式設計中,基本都是在操作數(shù)組和對象森书。所有有必要還好在深刻理解一下數(shù)組對象的方法靶端。

這個系列寫了好幾篇文章了。其實寫的時候好多地方還不太懂凛膏,寫著寫著有些地方就明白了杨名,所以還是要堅持寫下去。現(xiàn)在覺得寫的還不錯猖毫,過半年可能覺得就很傻了台谍。

最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市鄙麦,隨后出現(xiàn)的幾起案子典唇,更是在濱河造成了極大的恐慌镊折,老刑警劉巖胯府,帶你破解...
    沈念sama閱讀 216,544評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異恨胚,居然都是意外死亡骂因,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,430評論 3 392
  • 文/潘曉璐 我一進店門赃泡,熙熙樓的掌柜王于貴愁眉苦臉地迎上來寒波,“玉大人,你說我怎么就攤上這事升熊《硭福” “怎么了?”我有些...
    開封第一講書人閱讀 162,764評論 0 353
  • 文/不壞的土叔 我叫張陵级野,是天一觀的道長页屠。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么辰企? 我笑而不...
    開封第一講書人閱讀 58,193評論 1 292
  • 正文 為了忘掉前任风纠,我火速辦了婚禮,結果婚禮上牢贸,老公的妹妹穿的比我還像新娘竹观。我一直安慰自己,他們只是感情好潜索,可當我...
    茶點故事閱讀 67,216評論 6 388
  • 文/花漫 我一把揭開白布臭增。 她就那樣靜靜地躺著,像睡著了一般竹习。 火紅的嫁衣襯著肌膚如雪速址。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,182評論 1 299
  • 那天由驹,我揣著相機與錄音芍锚,去河邊找鬼。 笑死蔓榄,一個胖子當著我的面吹牛并炮,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播甥郑,決...
    沈念sama閱讀 40,063評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼逃魄,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了澜搅?” 一聲冷哼從身側響起伍俘,我...
    開封第一講書人閱讀 38,917評論 0 274
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎勉躺,沒想到半個月后癌瘾,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,329評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡饵溅,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,543評論 2 332
  • 正文 我和宋清朗相戀三年妨退,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片蜕企。...
    茶點故事閱讀 39,722評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡咬荷,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出轻掩,到底是詐尸還是另有隱情幸乒,我是刑警寧澤,帶...
    沈念sama閱讀 35,425評論 5 343
  • 正文 年R本政府宣布唇牧,位于F島的核電站罕扎,受9級特大地震影響基茵,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜壳影,卻給世界環(huán)境...
    茶點故事閱讀 41,019評論 3 326
  • 文/蒙蒙 一拱层、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧宴咧,春花似錦根灯、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,671評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至氧卧,卻和暖如春桃笙,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背沙绝。 一陣腳步聲響...
    開封第一講書人閱讀 32,825評論 1 269
  • 我被黑心中介騙來泰國打工搏明, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人闪檬。 一個月前我還...
    沈念sama閱讀 47,729評論 2 368
  • 正文 我出身青樓星著,卻偏偏與公主長得像,于是被迫代替她去往敵國和親粗悯。 傳聞我的和親對象是個殘疾皇子虚循,可洞房花燭夜當晚...
    茶點故事閱讀 44,614評論 2 353

推薦閱讀更多精彩內(nèi)容

  • 1. Java基礎部分 基礎部分的順序:基本語法,類相關的語法样傍,內(nèi)部類的語法横缔,繼承相關的語法,異常的語法衫哥,線程的語...
    子非魚_t_閱讀 31,623評論 18 399
  • 工廠模式類似于現(xiàn)實生活中的工廠可以產(chǎn)生大量相似的商品茎刚,去做同樣的事情,實現(xiàn)同樣的效果;這時候需要使用工廠模式炕檩。簡單...
    舟漁行舟閱讀 7,750評論 2 17
  • 第5章 引用類型(返回首頁) 本章內(nèi)容 使用對象 創(chuàng)建并操作數(shù)組 理解基本的JavaScript類型 使用基本類型...
    大學一百閱讀 3,233評論 0 4
  • 我喜歡你――陪在我的身邊就足夠斗蒋,我一無所有,所以有你就足夠
    小大人的世界閱讀 192評論 0 0
  • 我們在制作PPT的過程中笛质,為了更好的表現(xiàn)我們的文字,對文字進行分條表示捞蚂,但是我們使用的項目符號大多只是一個黑點妇押,今...
    張某某在辦公閱讀 1,224評論 0 1