ES6 揭秘：结构型模式的 JavaScript 设计模式

前端

2023-09-10 05:16:49

ES6 中的结构型设计模式：提升你的 JavaScript 技能

结构型设计模式：定义和意义

在现代 JavaScript 开发中，结构型设计模式扮演着至关重要的角色。这些模式专注于类和对象的组织和组合，利用继承来创建灵活且可扩展的代码。

ES6 中的结构型模式

ES6 通过引入类、扩展和接口等特性，极大地增强了 JavaScript 的结构化能力。这些特性为构建复杂的设计模式提供了坚实的基础。

1. 适配器模式

适配器模式允许不兼容的接口协同工作。它充当一个桥梁，将一个类的接口转换为另一个类所需的接口。

代码示例：

class TargetInterface {
  operation() {}
}

class Adaptee {
  specificOperation() {}
}

class Adapter extends TargetInterface {
  constructor(adaptee) {
    super();
    this.adaptee = adaptee;
  }

  operation() {
    this.adaptee.specificOperation();
  }
}

2. 桥接模式

桥接模式将一个类的接口与其实现分离。这允许你独立地修改接口和实现，从而提高代码的灵活性。

代码示例：

class Abstraction {
  constructor(implementor) {
    this.implementor = implementor;
  }

  operation() {
    this.implementor.operationImpl();
  }
}

class ConcreteImplementorA {
  operationImpl() {
    console.log("Concrete Implementor A");
  }
}

class ConcreteImplementorB {
  operationImpl() {
    console.log("Concrete Implementor B");
  }
}

3. 组合模式

组合模式将对象组织成树状结构，允许你对它们进行递归操作。它类似于 Composite 模式，但适用于 JavaScript。

代码示例：

class Component {
  operation() {}
}

class Leaf extends Component {
  operation() {
    console.log("Leaf operation");
  }
}

class Composite extends Component {
  constructor() {
    super();
    this.children = [];
  }

  add(component) {
    this.children.push(component);
  }

  operation() {
    for (let child of this.children) {
      child.operation();
    }
  }
}