在程序設計中姑荷,組合模式就是用小的子對象來構建更大的對象秸仙,而這些小的子對象本身也是由更小的對象組成的卧土。這里只是組合,并沒有從屬關系滞诺。參考《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)在覺得寫的還不錯猖毫,過半年可能覺得就很傻了台谍。