JavaScript组合模式Composite Pattern

组合模式（Composite Pattern），又叫部分整体模式，是用于把一组相似的对象当作一个单一的对象。

组合模式依据树形结构来组合对象，用来表示部分以及整体层次。这种类型的设计模式属于结构型模式，它创建了对象组的树形结构。

树对象和叶对象接口统一，树对象增加一个缓存数组，存储叶对象。执行树对象方法时，将请求传递给其下叶对象执行。

// 树对象 - 文件目录
class CFolder {
constructor(name) {
this.name = name;
this.files = [];
}
add(file) {
this.files.push(file);
}
scan() {
for (let file of this.files) {
file.scan();
}
}
}
// 叶对象 - 文件
class CFile {
constructor(name) {
this.name = name;
}
add(file) {
throw new Error('文件下面不能再添加文件');
}
scan() {
console.log(`开始扫描文件：${this.name}`);
}
}
let mediaFolder = new CFolder('娱乐');
let movieFolder = new CFolder('电影');
let musicFolder = new CFolder('音乐');
let file1 = new CFile('钢铁侠.mp4');
let file2 = new CFile('再谈记忆.mp3');
movieFolder.add(file1);
musicFolder.add(file2);
mediaFolder.add(movieFolder);
mediaFolder.add(musicFolder);
mediaFolder.scan();

输出:

开始扫描文件：钢铁侠.mp4
开始扫描文件：再谈记忆.mp3

​​CFolder​​与 ​​CFile​​ 接口保持一致。执行 ​​scan()​​ 时，若发现是树对象，则继续遍历其下的叶对象，执行 ​​scan()​​。

JavaScript 不同于其它静态编程语言，实现组合模式的难点是保持树对象与叶对象之间接口保持统一，可借助 TypeScript 定制接口规范，实现类型约束。

// 定义接口规范
interface Compose {
name: string,
add(file: CFile): void,
scan(): void
}
// 树对象 - 文件目录
class CFolder implements Compose {
fileList = [];
name: string;
constructor(name: string) {
this.name = name;
}
add(file: CFile) {
this.fileList.push(file);
}
scan() {
for (let file of this.fileList) {
file.scan();
}
}
}
// 叶对象 - 文件
class CFile implements Compose {
name: string;
constructor(name: string) {
this.name = name;
}
add(file: CFile) {
throw new Error('文件下面不能再添加文件');
}
scan() {
console.log(`开始扫描：${this.name}`)
}
}
let mediaFolder = new CFolder('娱乐');
let movieFolder = new CFolder('电影');
let musicFolder = new CFolder('音乐');
let file1 = new CFile('钢铁侠.mp4');
let file2 = new CFile('再谈记忆.mp3');
movieFolder.add(file1);
musicFolder.add(file2);
mediaFolder.add(movieFolder);
mediaFolder.add(musicFolder);
mediaFolder.scan();

输出:

开始扫描文件：钢铁侠.mp4
开始扫描文件：再谈记忆.mp3

需要注意的是：

  • 组合不是继承，树叶对象并不是父子对象
  • 叶对象操作保持一致性
  • 叶对象实现冒泡传递
  • 不只是简单的子集遍历

它的应用场景：

  • 优化处理递归或分级数据结构（文件系统 - 目录文件管理）；
  • 与其它设计模式联用，如与命令模式联用实现 “宏命令”。

它的优点：忽略组合对象和单个对象的差别，对外一致接口使用；解耦调用者与复杂元素之间的联系，处理方式变得简单。

它的缺点：树叶对象接口一致，无法区分，只有在运行时方可辨别；包裹对象创建太多，额外增加内存负担。

到此这篇关于学习理解JavaScript组合模式Composite Pattern的文章就介绍到这了,更多相关JS组合模式内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • JavaScript适配器模式原理与用法实例详解

    本文实例讲述了JavaScript适配器模式原理与用法.分享给大家供大家参考,具体如下: 适配模式可用来在现有接口和不兼容的类之间进行适配,使用这种模式的对象又叫包装器(wrapper),因为它们是在用一个新的接口包装另一个对象. 基本理论 适配器模式:将一个接口转换成客户端需要的接口而不需要去修改客户端代码,使得不兼容的代码可以一起工作. 适配器主要有3个角色组成: (1)客户端:调用接口的类 (2)适配器:用来连接客户端接口和提供服务的接口的类 (3)适配者:提供服务,但是却与客户端接口需求

  • JavaScript编程设计模式之观察者模式(Observer Pattern)实例详解

    本文实例讲述了JavaScript编程设计模式之观察者模式.分享给大家供大家参考,具体如下: 简介 简单的解释观察者模式,就是一个对象(subject)维护一个依赖他的对象(observers)列表,当自身状态发生变化时,自动通知所有观察者对象.当某个对象不需要获得通知时,可以从对象列表中删除掉. 从上面的解释中我们可以提炼出三个componet: Subject, ObserverList和Observer,用JS实现很简单: function ObserverList(){ this.obs

  • JavaScript适配器模式详解

    JavaScript适配器模式详解

    适配模式可用来在现有接口和不兼容的类之间进行适配,使用这种模式的对象又叫包装器(wrapper),因为它们是在用一个新的接口包装另一个对象. 基本理论 适配器模式:将一个接口转换成客户端需要的接口而不需要去修改客户端代码,使得不兼容的代码可以一起工作. 适配器主要有3个角色组成: (1)客户端:调用接口的类 (2)适配器:用来连接客户端接口和提供服务的接口的类 (3)适配者:提供服务,但是却与客户端接口需求不兼容服务类. 此处 有一个实例是关于两个数的加法的. 一.先有一个能够实现,两个数加法的

  • javascript设计模式 – 适配器模式原理与应用实例分析

    本文实例讲述了javascript设计模式 – 适配器模式原理与应用.分享给大家供大家参考,具体如下: 介绍:适配器模式的产生也来自具体的问题,拿mac来举例,我不能直接用mac链接VGA,不能直接连接网线接口,这是就需要提供一些转接头,来将一些特殊的接口与我们的火线口相链接. 在这个过程中转接头就相当于一类适配器,mac被转接头所扩展,所以mac称之为适配者.适配器的主要作用是将客户端的请求转化为对适配者接口的调用.好多场景下因为接口的不兼容, 多一个参数少一个参数,参数格式不正确,调用顺序等

  • JavaScript设计模式学习之适配器模式

    目录 概述 代码实现 总结 概述 适配器模式是设计模式行为型模式中的一种模式: 定义: 适配器用来解决两个已有接口之间不匹配的问题,它并不需要考虑接口是如何实现,也不用考虑将来该如何修改:适配器不需要修改已有接口,就可以使他们协同工作: 白话解释: 你买了某种电器产品,准备带回家好好感受该款产品的魅力:结果带回家之后准备通电使用的时候,发现该产品仅支持两孔插座,而你家里的电源插座都是三孔插座:这个时候你总不能又跑去电器专卖店退货吧:突然灵机一动,你想起来了家里还有多功能电源插座,而多功能电源插座

  • 理解JavaScript中的适配器模式Adapter Pattern

    说到:适配器,大家一定不会陌生,所有的充电头,就是适配器,用于适配电源插孔和需要充电的设备: 同理,适配器模式(Adapter Pattern)是作为两个不兼容的接口之间的桥梁.这种类型的设计模式属于[结构型模式],它结合了两个独立接口的功能. 代码示例也非常直观: class Adapter { specificRequest() { return '手机充电接口' } } class Target { constructor() { this.adapter = new Adapter()

  • javascript设计模式之Adapter模式【适配器模式】实现方法示例

    本文实例讲述了javascript设计模式之Adapter模式.分享给大家供大家参考,具体如下: 所谓Adapter模式就是适配器模式,主要是指使两个原本没有关联的类结合一起使用. JS实现Adapter模式示例如下: <!DOCTYPE html> <html> <head> <title></title> <script type="text/javascript" src="json.js"&g

  • NodeJS设计模式总结【单例模式,适配器模式,装饰模式,观察者模式】

    本文实例讲述了NodeJS设计模式.分享给大家供大家参考,具体如下: 1 . 单例模式 顾名思义,单例就是保证一个类只有一个实例,实现的方法是,先判断实例是否存在,如果存在则直接返回,若不存在,则创建实例对象,并将实例对象保存在静态变量中,当下次请求时,则可以直接返回这个对象实例,这就确保了一个类只有一个实例对象.举个例子吧~一间学校刚刚起建还没有图书馆,有的同学就向领导提意见:"hey! 哥们,能不能帮我们建一个图书馆? "(想要一个图书馆实例),然后领导说:"no pro

  • JavaScript组合模式Composite Pattern

    组合模式(Composite Pattern),又叫部分整体模式,是用于把一组相似的对象当作一个单一的对象. 组合模式依据树形结构来组合对象,用来表示部分以及整体层次.这种类型的设计模式属于结构型模式,它创建了对象组的树形结构. 树对象和叶对象接口统一,树对象增加一个缓存数组,存储叶对象.执行树对象方法时,将请求传递给其下叶对象执行. // 树对象 - 文件目录 class CFolder { constructor(name) { this.name = name; this.files =

  • JavaScript组合模式学习要点

    组合模式:将一组对象组合成树形结构,并统一对待组合对象和叶对象,忽略它们之间的不同(因为叶对象也可以也可以包含叶对象而成为组合对象),组合模式中的对象只能是一对多的关系,不能出现多对一. 基本单元:一个组合对象包含多个叶对象.每个基本单元又可以是别的组合对象的叶对象类似文件夹与它里面的内容的关系网,一个文件夹或文件又可以是其它文件夹的内容,但一个文件夹或文件不能同时属于多个上级文件夹. 在JavaScript中实现组合模式时,要保证组合对象和叶对象拥有相同的接口方法,对同一组叶对象的操作必须具有

  • PHP设计模式（七）组合模式Composite实例详解【结构型】

    本文实例讲述了PHP设计模式:组合模式Composite.分享给大家供大家参考,具体如下: 1. 概述 在数据结构里面,树结构是很重要,我们可以把树的结构应用到设计模式里面. 例子1:就是多级树形菜单. 例子2:文件和文件夹目录 2.问题 我们可以使用简单的对象组合成复杂的对象,而这个复杂对象有可以组合成更大的对象.我们可以把简单这些对象定义成类,然后定义一些容器类来存储这些简单对象.客户端代码必须区别对象简单对象和容器对象,而实际上大多数情况下用户认为它们是一样的.对这些类区别使用,使得程序更

  • JavaScript组合模式---引入案例分析

    本文实例讲述了JavaScript组合模式.分享给大家供大家参考,具体如下: 首先: 使用一个例子来引入组合模式,需求为 (1)有一个学校有2个班(一班,二班) (2)每个班级分2个小组(一班一组,一班二组,二班一组,二班二组) (3)学校计算机教室有限,每一个小组分着来上课 然后:根据需求我们可以简单看出这里面涉及到   学校,班级,组,和学生总共4个类 使用程序模拟  这4个类为, (1)学校类 var school=function (name) { this.name=name; var

  • java设计模式之组合模式(Composite)

    java设计模式之组合模式(Composite)

    概述 是一种结构型模式,将对象以树形结构组织起来,以表示"部分 - 整体"的层次结构,使得客户端对单个对象和组合对象的使用具有唯一性. UML类图 上面的类图包含的角色: Component:为参加组合的对象声明一个公共的接口,不管是组合还是叶节点. Leaf:在组合中表示叶子结点对象,叶子结点没有子结点. Composite:表示参加组合的有子对象的对象,并给出树枝构建的行为: 代码示例 import java.util.ArrayList; import java.util.Lis

  • C++设计模式之组合模式(Composite)

    组合模式为了描述分支包含关系,也就是我们说的树形关系,其对象分为枝和叶,每一枝可包含枝和叶,直到全部为叶节点.我们对枝和叶进行行为抽象,可认为枝和叶都是Component,而叶是最小的操作单元,其下不存在枝和叶,而枝作为Composite里面存有其下枝和叶的组件列表. 作用 将对象组合成树形结构以表示"部分-整体"的层次结构,使得用户对单个对象和组合对象的使用具有一致性 类视图 实现 #include <iostream> #include <list> #in

  • C#复合模式(Composite Pattern)实例教程

    C#复合模式(Composite Pattern)实例教程

    本文以一个简单实例的形式讲述了C#复合模式.分享给大家供大家参考.具体实现方法如下: 一般在显示树形结构时,复合模式有很好的体现.本文实例显示如下部门结构: 如上图所示,有的节点包含子节点,有的节点不包含子节点.不管是什么节点,每个节点就代表一个部门. 首先设计一个关于部门的抽象基类. public abstract class DepartmentComponent { public string Name { private set; get; } public DepartmentComp

  • 《javascript设计模式》学习笔记七：Javascript面向对象程序设计组合模式详解

    本文实例讲述了Javascript面向对象程序设计组合模式.分享给大家供大家参考,具体如下: 概述 关于组合模式的定义:组合模式(Composite Pattern)有时候又叫做部分-整体模式,它使我们树型结构的问题中,模糊了简单元素和复杂元素的概念,客户程序可以向处理简单元素一样来处理复杂元素,从而使得客户程序与复杂元素的内部结构解耦.来自百度百科:http://baike.baidu.com/view/3591789.htm 其实从面向对象之五之后,与javascript本身关系不是很大,更

  • Python设计模式之组合模式原理与用法实例分析

    Python设计模式之组合模式原理与用法实例分析

    本文实例讲述了Python设计模式之组合模式原理与用法.分享给大家供大家参考,具体如下: 组合模式(Composite Pattern):将对象组合成成树形结构以表示"部分-整体"的层次结构,组合模式使得用户对单个对象和组合对象的使用具有一致性. 下面是一个组合模式的demo: #!/usr/bin/env python # -*- coding:utf-8 -*- __author__ = 'Andy' """ 大话设计模式 设计模式--组合模式 组合模

  • 设计模式系列之组合模式及其在JDK和MyBatis源码中的运用详解

    组合模式及其在JDK源码中的运用 前言组合和聚合什么是组合模式示例透明组合模式透明组合模式的缺陷安全组合模式 组合模式角色组合模式在JDK源码中的体现组合模式应用场景享元模式优缺点总结 前言 本文主要会讲述组合模式的用法,并会结合在JDK和MyBatis源码中的运用来进一步理解组合模式. 在编码原则中,有一条是:多用组合,少用继承.当然这里的组合和我们今天要讲的组合模式并不等价,这里的组合其实就是一种聚合,那么聚合和组合有什么区别呢? 组合和聚合 人在一起叫团伙,心在一起叫团队.用这句话来诠释组

随机推荐