javascript 设计模式之组合模式原理与应用详解

JavaScript设计模式之组合模式原理与应用详解

什么是组合模式

组合模式是一种结构型设计模式,它将对象组合成树形结构来表示“整体-部分”层次结构,让客户端能够统一地处理单个对象和对象组合。

组合模式对单个对象和组合对象的访问具有一致性,它定义了一个抽象类或接口以表示所有可被组合的对象的共同方法和属性,这个抽象类或接口可以为叶子节点和组合节点提供一个统一的方法。

组合模式的角色

组合模式由以下角色组成:

  • 组合类(Component):抽象类或接口,定义叶子节点和组合节点的公共接口,包括add、remove、getChild等方法。
  • 叶子类(Leaf):实现组合类接口,并且没有子元素的类。
  • 组合类(Composite):实现组合类接口,并且包含子元素的类。

组合模式的应用场景

组合模式适用于以下情况:

  • 当需求中存在一个对象和该对象的组成部分的关系时,可以使用组合模式。
  • 当希望统一地对待单个对象和对象集合时,可以使用组合模式。
  • 当发现多个对象之间存在相似之处,并且可以统一地管理这些对象时,可以使用组合模式。

组合模式的实现

以下是一个组合模式实现的示例代码:

class Component {
  add() {
    throw new Error('不支持添加操作');
  }
  remove() {
    throw new Error('不支持删除操作');
  }
  getChild() {
    throw new Error('不支持获取子元素操作');
  }
  operation() {
    console.log('执行操作');
  }
}

class Leaf extends Component {
  operation() {
    console.log('执行叶子节点操作');
  }
}

class Composite extends Component {
  constructor() {
    super();
    this.children = [];
  }
  add(child) {
    this.children.push(child);
  }
  remove(child) {
    const index = this.children.indexOf(child);
    if (index !== -1) {
      this.children.splice(index, 1);
    }
  }
  getChild(index) {
    return this.children[index];
  }
  operation() {
    console.log('执行组合对象操作');
    this.children.forEach(child => {
      child.operation()
    })
  }
}

在上面的示例中,我们实现了一个Component抽象类,以及叶子节点和组合节点的具体实现类。其中,叶子节点没有子元素,而组合节点可以包含多个子元素。调用组合对象的操作时,将执行组合对象本身以及子元素对象的操作。

如何应用组合模式

以下是一个使用组合模式的实际案例:

假设我们有一个公司组织结构,包括CEO、三个大区、每个大区下面都有两个部门和一些员工。我们可以使用组合模式来表示这个结构,如下所示:

// 公司结构组合树
const org = new Composite();
// 添加CEO
const ceo = new Leaf();
ceo.operation = () => {
  console.log('我是CEO');
};
org.add(ceo);
// 添加三个大区
const regionA = new Composite();
const regionB = new Composite();
const regionC = new Composite();
regionA.operation = () => {
  console.log('我是A大区');
};
regionB.operation = () => {
  console.log('我是B大区');
};
regionC.operation = () => {
  console.log('我是C大区');
};
org.add(regionA);
org.add(regionB);
org.add(regionC);
// 添加大区下面的部门
const departA1 = new Leaf();
const departA2 = new Leaf();
const departB1 = new Leaf();
const departB2 = new Leaf();
const departC1 = new Leaf();
const departC2 = new Leaf();
departA1.operation = () => {
  console.log('我是A大区部门1');
};
departA2.operation = () => {
  console.log('我是A大区部门2');
};
departB1.operation = () => {
  console.log('我是B大区部门1');
};
departB2.operation = () => {
  console.log('我是B大区部门2');
};
departC1.operation = () => {
  console.log('我是C大区部门1');
};
departC2.operation = () => {
  console.log('我是C大区部门2');
};
regionA.add(departA1);
regionA.add(departA2);
regionB.add(departB1);
regionB.add(departB2);
regionC.add(departC1);
regionC.add(departC2);
// 添加员工
const emp1 = new Leaf();
const emp2 = new Leaf();
const emp3 = new Leaf();
emp1.operation = () => {
  console.log('我是员工1');
};
emp2.operation = () => {
  console.log('我是员工2');
};
emp3.operation = () => {
  console.log('我是员工3');
};
departA1.add(emp1);
departA1.add(emp2);
departB1.add(emp3);

// 调用组合对象的操作
org.operation();

在上面的示例中,我们使用组合模式来表示公司的组织结构,CEO和每个大区是组合对象,部门和员工是叶子节点。当我们调用组合对象的operation方法时,将执行组合对象及其子元素的操作,从而顺次打印出整个公司组织结构。

总结

组合模式是一种常用的设计模式,它将对象组合成树形结构来表示“整体-部分”层次结构,统一处理单个对象和对象组合。组合模式在组织结构、目录结构、菜单等场景中得到广泛应用,开发人员可以根据需求结合业务场景,实现组合模式,提高代码复用性、可扩展性和可维护性。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:javascript 设计模式之组合模式原理与应用详解 - Python技术站

(0)
上一篇 2023年5月28日
下一篇 2023年5月28日

相关文章

  • js如何根据id删除数组中对象

    首先,要根据id删除数组中的对象,我们需要对该数组进行遍历,并找到该对象所在的索引位置。接下来,我们可以使用splice()函数删除该位置的对象。 具体步骤如下: 定义一个数组,包含多个对象,每个对象都有一个id属性。 let arr = [ {id: 1, name: ‘Tom’}, {id: 2, name: ‘Jerry’}, {id: 3, name…

    JavaScript 2023年6月11日
    00
  • 用js编写的简单的计算器代码程序

    为了编写一个简单的计算器程序,我们可采用HTML、CSS、JavaScript等技术。下面将分步骤讲解如何制作一个基于JS编写的简易计算器程序。 步骤一:创建基本的HTML代码 我们需要创建一个空白的HTML文件,并添加必要的元素,例如标题,文本输入框和按钮。通过以下HTML代码可以实现: <!DOCTYPE html> <html>…

    JavaScript 2023年5月27日
    00
  • JavaScript浏览器对象之一Window对象详解

    JavaScript浏览器对象之一Window对象详解 Window对象是JavaScript浏览器对象模型的核心之一,在浏览器开发中扮演着非常重要的角色。本文将主要介绍Window对象的使用方法和相关知识。 Window对象是什么 在JavaScript中,window对象表示浏览器中的窗口或框架,它是JavaScript访问浏览器窗口和框架中所有元素的接…

    JavaScript 2023年5月27日
    00
  • Three.js实现脸书元宇宙3D动态Logo效果

    下面就是详细讲解“Three.js实现脸书元宇宙3D动态Logo效果”的完整攻略。 1. 了解 Three.js Three.js 是一款使用 WebGL 技术实现的 JavaScript 3D 库,是基于WebGL的抽象封装实现库。 它可以很方便的创建、加载、修改3D 场景,包含了诸如相机、灯光、材质、物体、场景等等的封装。 2. 准备工作 先建立一个场景…

    JavaScript 2023年5月28日
    00
  • Javascript核心读书有感之表达式和运算符

    Javascript核心读书有感之表达式和运算符攻略 表达式和运算符的基本概念 在Javascript中,表达式是由变量、常量、运算符和函数调用等元素组成的组合,用于计算一个值。而运算符则是表达式中完成具体计算的部分。 运算符的分类 Javascript中的运算符可以分为以下几类: 算术运算符 用于数值运算,包括加减乘除、取余等,如:+、-、*、/、%。 示…

    JavaScript 2023年6月11日
    00
  • ES6新增的math,Number方法

    下面是ES6新增的math和Number方法的详细讲解: Math对象 Math.trunc() Math.trunc(x) 方法用于去除一个数的小数部分,返回整数部分。实现原理为直接舍去所有小数位。 示例代码: Math.trunc(4.9); //4 Math.trunc(-4.9); //-4 Math.sign() Math.sign(x)方法用来判…

    JavaScript 2023年6月10日
    00
  • 常常会用到的截取字符串substr()、substring()、slice()方法详解

    下面是关于常用的字符串截取方法 substr()、substring()、slice() 的详细讲解。 substr() 方法 substr() 方法用于截取一个字符串的部分内容,它接收两个参数,第一个参数是截取的起始位置,第二个参数是需要截取的字符个数。当第二个参数缺省时,则表示截取到字符串末尾。下面是一个例子: const str = "hel…

    JavaScript 2023年5月28日
    00
  • JavaScript闭包原理及作用详解

    下面我将为您详细讲解JavaScript闭包的原理及作用。 什么是JavaScript闭包? JavaScript闭包指的是在函数内部创建外部无法访问的内部函数,并将内部函数作为返回值返回的情景。闭包由两个部分组成:内部函数和外部函数。内部函数可以访问外部函数的变量和参数,而外部函数无法访问内部函数的变量和参数。 JavaScript闭包的原理是什么? 当函…

    JavaScript 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部