javascript设计模式与开发实践阅读笔记（10）—— 组合模式

Posted 2020-08-30 出世Sunny

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

 

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

 1 var list=function(){   //创建接口对象的函数
 2     return {
 3         arr:[],     //执行列表  用来存储需要执行的对象
 4         add:function(obj){       //往执行列表里添加对象
 5             this.arr.push(obj);   
 6         },
 7         execute:function(){    //遍历执行列表，每个对象执行规定好的接口方法
 8             for(var i=0,l=this.arr.length;i<l;i++){
 9                 this.arr[i].execute();
10             }
11         }
12     }
13 };
14 
15 var menubar={                          //一系列对象，每个对象都有一个相同的接口，便于同时调用
16     execute:function(){
17         console.log("刷新menubar")
18     }
19 }
20 
21 var headbar={
22     execute:function(){
23         console.log("刷新headbar")
24     }
25 }
26 
27 var footbar={
28     execute:function(){
29         console.log("刷新footbar")
30     }
31 }
32 
33 var move={
34     execute:function(){
35         console.log("加入动画")
36     }
37 }
38 
39 var picA={
40     execute:function(){
41         console.log("移除picA")
42     }
43 }
44 
45 var picB={
46     execute:function(){
47         console.log("移除picB")
48     }
49 }
50 
51 
52 var refresh=list();   //负责刷新的接口对象
53 refresh.add( menubar );  //添加需要刷新的对象
54 refresh.add( headbar );
55 refresh.add( footbar );
56 
57 
58 var remove=list();   //负责移除的接口对象
59 remove.add( picA );  //需要移除的对象
60 remove.add( picB );
61 
62 var start=list();  //负责所有事情的接口对象
63 start.add( refresh );   //添加负责刷新的组合对象
64 start.add( move );     //添加负责动画的对象
65 start.add( remove );     //添加负责移除的组合对象
66 
67 start.execute();  //执行这个组合对象
68 
69 /****执行结果****
70 
71   刷新menubar
72   刷新headbar
73   刷新footbar
74   加入动画
75   移除picA
76   移除picB
77 */

 

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

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

 

一些值得注意的地方

 

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

 

总结

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