JS中的四种必学设计模式

设计模式是一种代码问题的解决方案，或称解决特定问题的“最佳实践”。设计模式可以帮助我们编写更易读、更易维护、更具可扩展性的代码。

JavaScript是一种非常灵活的语言，它可以实现各种各样的设计模式。本文将使用JavaScript实现四种最常见的设计模式：对象模式、组合模式、适配器模式和装饰者模式。

对象模式

对象模式是一种将数据和行为封装在一起的设计模式。在JavaScript中，对象可以使用对象字面量或构造函数来创建。

// 使用对象字面量创建对象
const person = {
  name: 'John Doe',
  age: 30,
  greet: function() {
    console.log(`Hello, my name is ${this.name}!`);
  }
};

// 使用构造函数创建对象
function Person(name, age) {
  this.name = name;
  this.age = age;
  this.greet = function() {
    console.log(`Hello, my name is ${this.name}!`);
  };
}

const john = new Person('John Doe', 30);

组合模式

组合模式是一种将对象组合在一起形成树形结构的设计模式。在JavaScript中，我们可以使用数组或对象来实现组合模式。

// 使用数组实现组合模式
const tree = [
  {
    name: 'Root',
    children: [
      {
        name: 'Branch 1',
        children: [
          {
            name: 'Leaf 1'
          },
          {
            name: 'Leaf 2'
          }
        ]
      },
      {
        name: 'Branch 2',
        children: [
          {
            name: 'Leaf 3'
          },
          {
            name: 'Leaf 4'
          }
        ]
      }
    ]
  }
];

// 使用对象实现组合模式
const tree = {
  name: 'Root',
  children: {
    'Branch 1': {
      children: {
        'Leaf 1': {},
        'Leaf 2': {}
      }
    },
    'Branch 2': {
      children: {
        'Leaf 3': {},
        'Leaf 4': {}
      }
    }
  }
};

适配器模式

适配器模式是一种将一个类的接口转换成另一个类的接口，以便它们可以协同工作的设计模式。在JavaScript中，我们可以使用继承或组合来实现适配器模式。

// 使用继承实现适配器模式
class Adaptee {
  specificRequest() {
    console.log('Specific request.');
  }
}

class Adapter extends Adaptee {
  request() {
    this.specificRequest();
  }
}

const adapter = new Adapter();
adapter.request(); // 输出：Specific request.

// 使用组合实现适配器模式
class Adaptee {
  specificRequest() {
    console.log('Specific request.');
  }
}

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

  request() {
    this.adaptee.specificRequest();
  }
}

const adaptee = new Adaptee();
const adapter = new Adapter(adaptee);
adapter.request(); // 输出：Specific request.

装饰器模式

装饰器模式是一种在不改变对象的情况下，向对象添加新功能的设计模式。在JavaScript中，我们可以使用继承或组合来实现装饰器模式。

// 使用继承实现装饰器模式
class Component {
  operation() {
    console.log('Component operation.');
  }
}

class Decorator extends Component {
  constructor(component) {
    super();
    this.component = component;
  }

  operation() {
    this.component.operation();
    console.log('Decorator operation.');
  }
}

const component = new Component();
const decorator = new Decorator(component);
decorator.operation(); // 输出：Component operation. Decorator operation.

// 使用组合实现装饰器模式
class Component {
  operation() {
    console.log('Component operation.');
  }
}

class Decorator {
  constructor(component) {
    this.component = component;
  }

  operation() {
    this.component.operation();
    console.log('Decorator operation.');
  }
}

const component = new Component();
const decorator = new Decorator(component);
decorator.operation(); // 输出：Component operation. Decorator operation.

以上四种设计模式只是JavaScript中众多设计模式中的一小部分。掌握这些设计模式可以帮助我们编写更易读、更易维护、更具可扩展性的代码。