《javascript设计模式与开发实践》阅读笔记(10)—— 组合模式

时间:2023-03-08 16:51:29

组合模式:一些子对象组成一个父对象,子对象本身也可能是由一些孙对象组成。

有点类似树形结构的意思,这里举一个包含命令模式的例子

 var list=function(){   //创建接口对象的函数
return {
arr:[], //执行列表 用来存储需要执行的对象
add:function(obj){ //往执行列表里添加对象
this.arr.push(obj);
},
execute:function(){ //遍历执行列表,每个对象执行规定好的接口方法
for(var i=0,l=this.arr.length;i<l;i++){
this.arr[i].execute();
}
}
}
}; var menubar={ //一系列对象,每个对象都有一个相同的接口,便于同时调用
execute:function(){
console.log("刷新menubar")
}
} var headbar={
execute:function(){
console.log("刷新headbar")
}
} var footbar={
execute:function(){
console.log("刷新footbar")
}
} var move={
execute:function(){
console.log("加入动画")
}
} var picA={
execute:function(){
console.log("移除picA")
}
} var picB={
execute:function(){
console.log("移除picB")
}
} var refresh=list(); //负责刷新的接口对象
refresh.add( menubar ); //添加需要刷新的对象
refresh.add( headbar );
refresh.add( footbar ); var remove=list(); //负责移除的接口对象
remove.add( picA ); //需要移除的对象
remove.add( picB ); var start=list(); //负责所有事情的接口对象
start.add( refresh ); //添加负责刷新的组合对象
start.add( move ); //添加负责动画的对象
start.add( remove ); //添加负责移除的组合对象 start.execute(); //执行这个组合对象 /****执行结果**** 刷新menubar
刷新headbar
刷新footbar
加入动画
移除picA
移除picB
*/

感觉上有点像俄罗斯套娃,首先定义了一个接口对象,大家都是这个接口对象,只不过一层套一层,不断调用。

执行过程其实就是深度优先搜索

一些值得注意的地方

组合模式不是父子关系,而是更类似于一种委托关系。
适用场景:只有用一致的方式对待列表中的每个叶对象的时候,才适合使用组合模式。

总结

组合模式可以让我们使用树形方式创建对象的结构,我们可以把相同的操作应用在组合对象和单个对象上。