【学习笔记javascript设计模式与开发实践（组合模式）10】

第10章 组合模式

在程序设计中&＃xff0c;也有一些和“事物是由相似的子事物构成”类似的思想。组合模式就是肜小的子对象来构建更大的对象&＃xff0c;而这些小的子对象本身也许是由更小的“孙对象”构成的。

10.1 回顾宏命令

我们在第9章命令模式中讲解过宏命令的结构和作用。宏命令对象包含了一组个体的子命令对象&＃xff0c;不管是宏命令对象&＃xff0c;还是子命令对象&＃xff0c;都有一个execute方法负责执行命令。现在回顾下这段安装在万遥控器上的宏命令代码&＃xff1a;

var closeDoorCommand&＃61;{execute:function(){console.log(&＃39;关门&＃39;);}
};
var openPcCommand&＃61;{execute:function(){console.log(&＃39;开电脑&＃39;);}
};
var openQQCommand&＃61;{execute:function(){console.log(&＃39;登录QQ&＃39;);}
};var MacroCommand&＃61;function(){return {commandsList:[],add:function(command){this.commandsList.push(command);},execute:function(){for(vari&＃61;0,command;command&＃61;this.commandsList[i&＃43;&＃43;];){command.execute();}}}
};varmacroCommand&＃61;MacroCommand();
macroCommand.add(closeDoorCommand);
macroCommand.add(openPcCommand);
macroCommand.add(openQQCommand);
macroCommand.execute();

通过观察这段代码&＃xff0c;我们很容易发现&＃xff0c;宏命令中包含了一组子命令&＃xff0c;它们组成了一个树形结构&＃xff0c;这里是一棵非常简单的树。

其中&＃xff0c;marcoCommand被称为组合对象&＃xff0c;closeDoorCommand、openPcCommand、openQQCommand都是叶对象。在macroCommand的execute方法里&＃xff0c;并不执行真正的操作&＃xff0c;而是遍历它所包含的叶对象&＃xff0c;把真正的execute请求委托给这些叶对象。

macroCommand表现得像一个命令&＃xff0c;但它实际上只是一组真正命令的“代理”。并非真正的代理&＃xff0c;虽然结构上相似&＃xff0c;但macroCommand只负责传递请求给叶对象&＃xff0c;它的目的不在于控制对叶对象的访问。

10.2 组合模式的用途

组合模式将对象组合成树形结构&＃xff0c;以表示“部分—整体”的层次结构。除了用来表示树形结构之外&＃xff0c;组合模式的另一个好处是通过对象的多态性表现&＃xff0c;使得用户对单个对象和组合对象的使用一致性&＃xff0c;

l   表示树形结构。通过回顾上面的例子&＃xff0c;我们很容易找到组合模式的一个优点&＃xff1a;提供一种遍历树形结构的方案&＃xff0c;通过调用组合对象的execute方法&＃xff0c;程序会递归调用组合对象下面的叶对象的execute方法&＃xff0c;所以我们的万能遥控器只需要一次操作&＃xff0c;便可以依次完成关门、打开电脑、登录QQ这几件事。组合模式可以非常方便地描述对象部分—整体层次结构

l   利用对象的多态性统一对待组合对象和单个对象。利用对象的多态性表现&＃xff0c;可以使客户端忽略组合对象和单个对象的不同。在组合模式中&＃xff0c;客户将统一地使用组合结构中的所有对象&＃xff0c;而不需要关心它究竟是组合对象还是单个对象。

这在实际开发中给客户带来相当大的方便&＃xff0c;当我们往万能遥控器里面添加一个命令的时候&＃xff0c;并不关心这个命令是宏命令还是普通子命令。这点对于我们不重要&＃xff0c;我们只需要确定它是一个命令&＃xff0c;并且这个命令拥有可执行的execute方法&＃xff0c;那么这个命令就可以被添加进万能遥控器。

当宏命令和普通子命令接收到执行execute方法的请求时&＃xff0c;宏命令和普通子命令都会做它们各自认为正确的事情。这些差异是隐藏在客户背后的&＃xff0c;在客户看来&＃xff0c;这种透明性可以让我们非常自由地扩展这个万能遥控器。

10.3 请求在树中传递的过程

在组合模式中&＃xff0c;请示在树中传递过程总是遵循一种逻辑。

以宏命令为例&＃xff0c;请求从树最顶端的对象往下传递&＃xff0c;如果当前处理请求的对象是叶对象&＃xff0c;叶对象自身会对请求作出相应的处理&＃xff1b;如果当前处理请求的对象是组合对象&＃xff08;宏命令&＃xff09;,组合对象则会遍历它属下的子节点&＃xff0c;将请求继续传递给这些子节点。

总而言之&＃xff0c;如果子节点是叶对象&＃xff0c;叶对象自身会处理这个请求&＃xff0c;而如果子节点还是组合对象&＃xff0c;请求会继续往下传递。叶对象下面不会再有其他子节点&＃xff0c;一个叶对象就是树的这条枝叶的尽头&＃xff0c;组合对象下面可能还会有子节点。请求从上到下没着树进行传递&＃xff0c;直到树的尽头。

10.4 更强大的宏命令

目前的万能遥控器&＃xff0c;包含了关门、开电脑、登录QQ这3个命令。现在我们需要一个“超级万能遥控器”可以控制家里所有的电器&＃xff0c;这个遥控器拥有以下功能&＃xff1a;

n   打开空调

n   打开电视和音响

n   关门、开电脑、登录QQ

首先在节点中放置一个按钮button来表示这个超级万能遥控器&＃xff0c;超级万能遥控器上安装了一个宏命令&＃xff0c;当执行宏命令时&＃xff0c;会依次遍历执行它所包含的子命令&＃xff1a;

按我


从这个例子中可以看到&＃xff0c;基本对象可以被组合成更复杂的组合对象&＃xff0c;组合对象又可以被组合&＃xff0c;这样不断递归下去&＃xff0c;这棵树的结构可以支持任意多的复杂度。在树最终被构造完成之后&＃xff0c;让整颗树最终运转起来的步骤非常简单&＃xff0c;只需要调用最上层对象的execute方法。而创建组合对象的程序员并不关心这些内在的细节&＃xff0c;往这棵树里添加一些新的节点对象是非常容易的事情。

10.5 抽象类在组合模式中的作用

前端说到&＃xff0c;组合模式最大的优点在于可以致地对待组合对象和基本对象。客户不需要知道当前处理的是宏命令还是普通命令&＃xff0c;只要它是一个命令&＃xff0c;并且有execute方法&＃xff0c;这个命令就可以被添加到树中。

这种透明性带来的便利&＃xff0c;在静态类型语言中体现得尤为明显。比如在java中&＃xff0c;实现组合模式的关键是Composite类和Leaf类都必须继承自一个Compenent抽象类既代表组合对象&＃xff0c;又代表叶子对象&＃xff0c;它也能够保证组合对象和叶对象拥有同样的名字的方法&＃xff0c;从而可以对同一消息都做出反馈。组合对象和叶对象的具体类型被隐藏在Compenent抽象类身后。

针对Compenent抽象类来编写程序&＃xff0c;客户操作的始终是Compenent对象&＃xff0c;而不用去区分到底是组合对象还是叶对象。所以我们往同一个对象里的add方法&＃xff0c;即可以添加组合对象&＃xff0c;也可以添加叶对象如下:

java代码&＃xff1a;

public abstract class Component {public void add(Compenent child){}public void remove(Compenent child){}
}public class Composite extends Component {public void add(Componentchild){};public voidremove(Component child){};
}public class Leaf extends Component{public void add(Component child){throw new UnsupportedOperationException() //叶子节点不能添加子节点}public void remove(Component child){}}

}public class client(){public static void main(String args[]){Component root &＃61; new Composite();Component c1 &＃61; new Composite();Component c2 &＃61; new Composite();Component leaf1 &＃61; new Leaf();Component leaf12&＃61; new Leaf();root.add(c1);root.add(c2);c1.add(leaf1);c2.add(leaf2);}
}

然而在Javascript这种动态类型语言中&＃xff0c;对象的多态性是与生俱来的&＃xff0c;也没有编译器检查变量的类型&＃xff0c;所以我们通常不会去模拟一个“怪异”的抽象类&＃xff0c;Javascript中实现组合模式的难点在于要保证组合对象和叶子对象拥有相同的方法&＃xff0c;这通常需要用鸭子类型的思想对它们进行接口检查。

在js中实现组合模式&＃xff0c;看起来缺乏一些严谨性&＃xff0c;我们的代码算不上安全&＃xff0c;但能更快速和自由地开发&＃xff0c;这既是Javascript的缺点&＃xff0c;也是它的优点。

10.6 透明性带来的安全问题

组合模式的透明性使得发起请求的客户不用去顾忌树中组合对象和叶对象的区别&＃xff0c;但它们在本质上是有区别的。

组合对象可以拥有子节点、叶对象下面就没有子节点&＃xff0c;所以我们也许会发生一些误操作&＃xff0c;比如试图往叶子中添加子节点。解决方案通常是给叶子对象也增加add方法&＃xff0c;并且在调用这个方法时&＃xff0c;抛出一个异常来及时提醒客户&＃xff0c;如下&＃xff1a;

var MacroCommand &＃61; function(){return {commandsList:[],add:function(command){this.commandsList.push(command);},execute:function(){for(var i&＃61; 0,command;command &＃61; this.commandsList[i&＃43;&＃43;]){command.execute();}}}
};//*******************
var openTvCommand&＃61;{execute:function(){console.log(&＃39;打开电视&＃39;);},add:function(){throw new Error(&＃39;叶对象不能添加子节点&＃39;);}
}var macroCommand &＃61; MacroCommand();
macroCommand.add(openTvCommand);
openTvCommand.add(macroCommand); //throwerror


 

10.7 组合模式的例子---扫描文件夹

文件和文件夹之间的关系&＃xff0c;非常适合用组合模式来描述。文件夹里既可以包含文件&＃xff0c;又可以包含其他文件夹&＃xff0c;最终可能组合成一棵树&＃xff0c;组合模式在文件夹的应用中有以下两层好处。

n   例如&＃xff0c;我在同事的移动硬盘里找到一些电子书&＃xff0c;我想把它们复制到F盘中的学习资料文件夹。在复制这些电子书的时候&＃xff0c;我并不需要考虑这批文件的类型&＃xff0c;不管它们是单独的电子书还是被放在了文件夹中。组合模式让Ctrl&＃43;V、Ctrl&＃43;C成为了一个统一的操作。

n   当我用杀毒软件扫描文件夹时。往往不会关心里面有多少文件和子文件夹&＃xff0c;组合模式使得我们只需要操作最外层的文件夹时行扫描。

现在我们来编写代码&＃xff0c;首先分别定义好文件夹Folder和文件File这两个类。见如下代码&＃xff1a;

var Folder &＃61; function(name){this.name &＃61; name;this.files&＃61;[];
}Folder.prototype.add &＃61; function(file){this.files.push(file);
}
Folder.prototype.scan &＃61; function(){console.log(&＃39;开始扫描文件夹:&＃39;&＃43;this.name);for(var i&＃61; 0,file,files &＃61;this.files;file &＃61; files[i&＃43;&＃43;];){file.scan();}
}/***** File ******/
var File &＃61; function(name){this.name &＃61; name;
}
File.prototype.add &＃61; function(){throw new Error(&＃39;文件下面不能再添加文件&＃39;);
}File.prototype.scan &＃61; function(){console.log(&＃39;开始扫描文件:&＃39;&＃43;this.name);
}

接下来创建一些文件和文件夹对象&＃xff0c;并且让它们组合成一棵树&＃xff0c;这棵树就是我们F盘里的现有文件目录结构。

var folder &＃61; new Folder(‘学习资料’);
var folder1 &＃61; new Folder(‘Javascript’);
var folder2 &＃61; new Folder(‘jQuery’);var file1 &＃61; new File(‘Javascript设计模式与开发实践’);
var file2 &＃61; new File(‘精通jQuery’);
var file3 &＃61; new File(‘重构与模式’);folder1.add(file1);
folder2.add(file2);
folder.add(folder1);
folder.add(folder2);
folder.add(file3);

现在的需求是把移动硬盘里的文件和文件夹都复制到这棵树中&＃xff0c;假设我们已经得到了这些文件对象&＃xff1a;

var folder3 &＃61; new Folder(‘Node.js’);

var file4 &＃61; new File(‘深入浅出Node.js’);

var file5 &＃61; new File(‘Javascript语言精髓与编辑实践’);

接下来把这些文件添加到原有的树中&＃xff1a;

folder.add(folder3);

folder.add(file5);

通过这个例子&＃xff0c;我们再次看到客户是如何对待组合对象和叶对象。在添加一批文件的操作过程中&＃xff0c;客户不用分辩它们到底是文件还是文件夹。新增加的文件和文件夹能够很容易地添加到原来的树结构中&＃xff0c;和树中已有的对象一起工作。

10.8 一些值得注意的地方

在使用组合模式的时候&＃xff0c;还有以下几个值得我们注意的地方。

1.    组合模式的树型结构容易让人误以为组合对象和叶对象是父子关系&＃xff0c;这是不正确的。

组合模式就是一种HAS-A的关系。组合对象包含一组叶对象&＃xff0c;但Leaf并不是Composite的子类。组合对象把请求委托给它所包含的所有叶对象&＃xff0c;它们能够合作关键是拥有相同的接口。

2.    对叶对象操作的一致性

组合模式除了要示组合对象和叶对象拥有相同的接口之外&＃xff0c;还有一个必要条件&＃xff0c;就是对一组叶对象的操作必须具有一致性。

比如公司要给全体员工发放元旦的过节费1000块&＃xff0c;这个场景可以运用组合模式&＃xff0c;但如果公司给今天过生日的员工发送一封生日祝福的邮件&＃xff0c;组合模式就没有用武之地了&＃xff0c;除非先把今天过生日的员工挑选出来。只用一致的方式对待列表中的每个叶子对象的时候&＃xff0c;才适合使用组合模式。

3.    双向映射关系

发放过节费的通知步骤是从公司到各个部门&＃xff0c;再到各个小组&＃xff0c;最后到每个员工的邮箱里。这本身是一个组合模式的好例子&＃xff0c;但要考虑的一种情况是&＃xff0c;也许某些员工属于多个组织架构。比如某位架构师既隶属于开发组&＃xff0c;又隶属于架构组&＃xff0c;对象之间的关系并不是严格意义上的层次结构&＃xff0c;在这种情况下&＃xff0c;是不适合使用组合模式&＃xff0c;该架构师很可能会收到两份过节费。

这种复合情况下我们必须给父节点和子节点建立双向映射关系&＃xff0c;一个简单的方法是给小组和员工对象都增加集合来保存对方的引用。但是这种相互间的引用相当复杂&＃xff0c;而且对象之间产生了过多的耦合性&＃xff0c;修改或删除一个对象都变得困难&＃xff0c;此时我们可以引入中介者模式来管理这些对象

4.    用职责链模式提高组合模式性能

在组合模式中&＃xff0c;如果树的结构比较复杂&＃xff0c;节点数量很多&＃xff0c;在遍历树的过程中&＃xff0c;性能方面也许表现得不够理想。有时候我们确实可以借助一些技巧&＃xff0c;在实际操作中避免遍历整棵树&＃xff0c;有一种现成的方案就是借助职责链模式。职责链模式一般需要我们手动去设置链条&＃xff0c;但在组合模式中&＃xff0c;父对象和子对象之间实际上形成了天然的职责链。让请求顺着链条从父对象往子对象传递。或反过来从子对象到父对象传递&＃xff0c;直到遇到可以处理该请求的对象为止。

10.9 引用父对象

上节中的例子&＃xff0c;组合对象保存了它下面的子节点的引用&＃xff0c;这是组合模式的特点&＃xff0c;此时树结构是从上至下的。但有时候我们需要在子节点上保持对父节点的引用&＃xff0c;比如在组合模式中使用职责链时&＃xff0c;有可能需要让请求从子节点往父节点上冒泡传递。还有当我们删除某个文件时&＃xff0c;实际上是从这个文件所在的上层文件夹中删除该文件的。

现在来改写扫描文件夹的代码&＃xff0c;使得在扫描整个文件夹之前&＃xff0c;我们可以先移除某一个具体的文件。

首先改写Folder和File类&＃xff0c;在这两个类的构造函数中&＃xff0c;增加this.parent属性&＃xff0c;并且在调用add方法的时候&＃xff0c;正确设置文件或者文件夹的父节点&＃xff1a;

var Folder&＃61; function(name){this.name &＃61; name;this.files &＃61; [];this.parent &＃61; null;
}Folder.prototype.add &＃61; function(file){file.parent &＃61; this;this.files.push(file);
}
Folder.prototype.scan &＃61; function(){console.log(‘开始扫描文件夹&＃xff1a;’&＃43;this.name;for(vari&＃61; 0,file,files &＃61; this.files;file &＃61; files[i&＃43;&＃43;];){file.scan();}
}

接下来增加Folder.prototype.remove方法&＃xff0c;表示移除该文件夹:

Folder.prototype.remove &＃61; function(){if(!this.parent){return ;}if(var files &＃61; this.parent.files,l&＃61;files.length-1;l>&＃61;0;l--){var file &＃61;files[l];if(file&＃61;&＃61;&＃61;this){files.splice(l,1);}}
}

File类的实现基本一致&＃xff1a;

var File &＃61; function(name){this.name &＃61; name;this.parent &＃61; null;
}File.prototype.add &＃61; function(){throw new Error(‘不能添加在文件下面’);
}File.prototype.scan &＃61; function(){console.log(‘开始扫描文件&＃xff1a;’&＃43;this.name);
}File.prototype.remove &＃61; function(){if(!this.parent){return ; //根结点或为游离节点}for(var files &＃61;this.parent.files,l &＃61; files.length-1;l>&＃61;0;l--){var file &＃61; files[l];if(file&＃61;&＃61;&＃61;this){files.splice(l,1);}}
}


测试一下&＃xff1a;

var folder &＃61; new Folder(‘学习资料’);
var folder1 &＃61; new Folder(‘Javascript’);
var file1 &＃61; new Folder(‘深入浅出Node.js’);
folder1.add(new Filde(‘Javascript设计模式与开发实践’))
folder.add(folder1);
folder.add(file1);
foder1.remove();
folder.scan();

10.10 何时使用

表示对象的部分—整体层次结构

客户希望统一对待树中的所有对象