JavaScript设计模式之组合模式解析_js面向对象



怎么说呢？！就像是动物（组合对象）一样，当它生下后代（叶对象）时，它的后代就有了某种功能（比如：挖洞，听力好等等）；也像是一棵树，它有一个根（组合对象）然后是从这个棵树向外冒出的其他枝杆（组合对象）以及从这些枝杆又向外长的叶子（叶对象）。换句话说，就是当祖先已经有了，那么只要从这个祖先衍生出来的其他孩子（包括这个祖先下的其他组合对象）已经就具备了某种功能，看上去貌似又有些像是继承。“组合模式”在组合对象的层次体系中有两种类型的对象：叶对象和组合对象。组合模式擅长于对大批对象进行操作。
“组合模式”就是在做一个项目的时候，我们要把在这个项目中即将出现的方法都在组合对象中定义（包括叶对象中的方法），而它们的叶对象将会继承组合对象。当组合对象被实例化后其叶对象的方法也相应地被实例化了。可能我说的有些乱，下面就用一个例子来说明吧。
“组合模式”是一种专为创建Web上的动态用户界面而量身定制的模式。使用这种模式，可以用一条命令在多个对象上激发复杂的或递归的行为。
使用“组合模式”可以为我们带来两大好处：
1、可以用同样的方法处理对象的集合与其中的特定子对象。
2、可以用来把一批子对象组织成树形结构，并且使整棵树都可以被遍历。
只有同时具备以下两个条件进才适合使用组合模式：
1、存在一批组织成某处层次体系的对象（具体结构可能在开发期间无法知道）。
2、希望对这批对象或其中的一部分对象实话一个操作。
下面看一下示例：
具体要求是做一个图片库且可以有选择地隐藏或显示图片库的特定部分。这可能是单独图片，也可能是图片库。现在就需要两个类来完成这个功能：用作图片库的组合对象类和用于图片本身的叶对象类，代码如下：
在上面的代码中，首先定义的是组合对象类和叶对象类应该实现的接口。除了常规的组合远景一分钱上，这些类要怕硬欺软 操作只包括hide和show。接下来我们定义叶对象。叶对象实现hide和show，代码如下：
代码如下:
var Composite = new Interface('Composite', ['add', 'remove', 'getChild']); // 检查组合对象Composite应该具备的方法
var GalleryItem = new Interface('GalleryItem', ['hide', 'show']); // 检查组合对象GalleryItem应该具备的方法
// DynamicGallery Class
var DynamicGallery = function(id){ // 实现Composite，GalleryItem组合对象类
this.children = [];

this.element = document.createElement('div');
this.element.id = id;
this.element.className = 'dynamic-gallery';
}
DynamicGallery.prototype = {
// 实现Composite组合对象接口
add : function(child){
Interface.ensureImplements(child, Composite, DynamicGallery);
this.children.push(child);
this.element.appendChild(child.getElement());
},
remove : function(child){
for(var node, i = 0; node = this.getChild(i); i++){
if(node == child){
this.children.splice(i, 1);
break;
}
}
this.element.removeChild(child.getElement());
},
getChild : function(i){
return this.children[i];
},
// 实现DynamicGallery组合对象接口
hide : function(){
for(var node, i = 0; node = this.getChild(i); i++){
node.hide();
}
this.element.style.display = 'none';
},
show : functioln(){
this.element.style.display = 'block';
for(var node, i = 0; node = getChild(i); i++){
node.show();
}
},
// 帮助方法
getElement : function(){
return this.element;
}
}

以下是设置叶对象的相应方法：
代码如下:
// GalleryImage class
var GalleryImage = function(src){ // 实现Composite和GalleryItem组合对象中所定义的方法
this.element = document.createElement('img');
this.element.className = 'gallery-image';
this.element.src = src;
}
GalleryImage.prototype = {

// 实现Composite接口
// 这些是叶结点，所以我们不用实现这些方法，我们只需要定义即可
add : function(){},
remove : function(){},
getChild : function(){},
// 实现GalleryItem接口
hide : function(){
this.element.style.display = 'none';
},
show : function(){
this.element.style.display = '';
},
// 帮助方法
getElement : function(){
return this.element;
}
}

这是一个演示组合模式的工作方式的例子。每个类都很简单，但由于有了这样一种层次体系，我们就可以执行一些复杂操作。GalleryImage类的构造函数会创建一个image元素。这个类定义中的其余部分由空的组合对象方法（因为这是叶结点）和GalleryItem要求的操作组成。现在我们可以使用这两个类来管理图片：
代码如下:
var topGallery = new DynamicGallery('top-gallery');
topGallery.add(new GalleryImage('/img/image-1.jpg'));
topGallery.add(new GalleryImage('/img/image-2.jpg'));
topGallery.add(new GalleryImage('/img/image-3.jpg'));
var vacationPhotos = new DyamicGallery('vacation-photos');
for(var i = 0, i < 30; i++){
vacationPhotos.add(new GalleryImage('/img/vac/image-' + i + '.jpg'));
}
topGallery.add(vacationPhotos);
topGallery.show();
vacationPhotos.hide();

组合模式之利，使用组合模式，简单的操作也能产生复杂的结果。不必编写大师手工遍历数组或其他数据结构的粘合代码，只需对最顶层的对象执行操作，主每一个子对象自己传递这个操作即可。这对于那些再三执行的操作尤其有用。在组合模式中，各个对象之间的耦合非常松散。每当对顶层组合对象执行一个操作时，实际上是在对整个结构进行尝试优先的搜索以查找节点。
组合模式之弊，由于对组合模式调用的任何操作都会被颇佳北至 它的所有子对象，如果这个层次体系很大的话，系统的性能将会受到影响。

无忧教育还为您提供以下相关内容希望对您有帮助：

何为、有哪些及如何应用JavaScript设计模式(design patterns)

创造性设计模式：解决对象创建问题，如单例模式、工厂模式、抽象工厂模式和建造者模式。结构性设计模式：用于管理对象间的结构，如适配器模式、桥接模式、组合模式和外观模式。行为性设计模式：关注对象间的交互与责任分配，如命令模式、迭代器模式、备忘录模式和观察者模式。并发性设计模式：处理多线程和多任务问题，如活动对象模式、反应器

何为、有哪些及如何应用JavaScript设计模式(design patterns)

JavaScript设计模式为你提供了一种结构化的、可重复的方法来解决开发中经常出现的问题。它们是一系列可复用的解决方案，旨在处理特定的编程任务，如创建对象、管理对象结构、传递控制、管理并发等。设计模式由世界各地的开发者在实践中形成，并随着时间的推移，被标准化和广泛接受，成为解决常见问题的标准方法。

研究PHP面向对象编程中的组合模式

PHP面向对象编程中的组合模式是一种结构型设计模式，允许将对象组合成树形结构以表示“部分-整体”层次关系，使客户端代码能统一处理单个对象和复合对象。组合模式的核心结构包括以下角色：抽象构件（Component）定义叶子节点和复合节点的共同行为与属性，通常包含操作方法（如add、remove、display）。在PHP中通过...

设计模式辅助编写面向对象代码的实用指南

设计模式是解决常见代码问题的预定决方案，分为创建型、结构型和行为型三类。它们提供经过验证的代码结构，帮助编写易于理解、可维护和扩展的面向对象代码。创建型模式：用于创建对象，例如工厂方法和建造者模式。工厂方法模式定义创建对象的接口，但将实例化委托给子类，允许客户端只指定所需的产品类型，...

javascript参数太奔放了嘛

显式校验：通过typeof、instanceof或工具库（如TypeScript）校验参数。默认参数：为可选参数设置合理默认值。文档规范：使用JSDoc或类型注释明确参数预期。设计模式：采用柯里化或工厂函数参数传递方式。总结：JavaScript参数的“奔放”源于语言特性，合理利用可提升开发效率，但需通过代码规范和防御性编程...

组合和聚合分别是什么? - 专题开发/技术/项目 / 设计模式

组合和聚合都是面向对象编程中描述类之间关系的概念。组合： 定义：组合关系表示类之间整体和部分的关系，其中部分和整体具有统一的生存期。 特点：一旦整体对象不存在，部分对象也将不存在，即部分对象与整体对象之间具有共生死的关系。 示例：“国破家亡”，国灭了，家自然也没有了，这里的“国”和“...

面向对象的设计模式有什么原则?

在运用面向对象的思想进行软件设计时，需要遵循的原则一共有7个，他们是：1. 单一职责原则（Single Responsibility Principle）每一个类应该专注于做一件事情。2. 里氏替换原则（Liskov Substitution Principle）超类存在的地方，子类是可以替换的。3. 依赖倒置原则（Dependence Inversion Principle）实现尽量依赖...

深入浅析PHP中的组合模式

PHP中的组合模式是一种结构型设计模式，它通过将对象组合成树形结构来表示“部分-整体”的层次关系，使得用户可以统一处理单个对象和组合对象。核心特点：统一接口：组合模式通过抽象基类（如Component）定义统一接口，确保组合对象（如Composite）和叶子节点（如Leaf）具有一致的操作方法（如Operation()）。递归...

PHP 函数设计模式与面向对象编程模式的区别

PHP 函数设计模式与面向对象编程模式的核心区别在于代码组织方式、数据封装形式及适用场景。以下是具体分析：一、代码组织方式函数设计模式 扁平结构：由函数组成，函数间无直接关联或对象引用。例如，sum()函数直接处理输入并返回结果，与其他函数无交互。协作方式：通过函数调用链或参数传递实现协作，适合...

软件设计模式整理(I-概论)

组合模式：统一处理树形结构的单个对象与组合对象。行为型模式 目标：管理对象间交互与职责分配，优化复杂流程控制。示例：观察者模式：定义一对多依赖，实现事件通知。策略模式：封装算法族，支持动态切换。责任链模式：将请求沿处理链传递，直到有对象处理。图：设计模式按目的分类（创建型、结构型、行为型）...