js设计模式怎么用

JavaScript设计模式是开发过程中用于解决常见问题的模板和最佳实践。这些模式有助于提高代码的可读性、可维护性和可扩展性。常见的JavaScript设计模式包括：单例模式、工厂模式、观察者模式、装饰器模式。其中，单例模式在开发中非常常用，主要用于限制一个类只能有一个实例，并提供全局访问点。单例模式在应用程序配置对象、日志记录对象等场景中非常有用。

一、单例模式

单例模式（Singleton Pattern）确保一个类只有一个实例，并提供一个访问它的全局访问点。这种模式对于管理共享资源或全局状态非常有用。例如，在一个应用程序中，我们可能只需要一个数据库连接实例或一个配置对象。

实现单例模式

JavaScript中实现单例模式有多种方法，最常见的一种是使用闭包和立即执行函数表达式（IIFE）。

const Singleton = (function () {
  let instance;
  function createInstance() {
    const object = new Object("I am the instance");
    return object;
  }
  return {
    getInstance: function () {
      if (!instance) {
        instance = createInstance();
      }
      return instance;
    },
  };
})();
const instance1 = Singleton.getInstance();
const instance2 = Singleton.getInstance();
console.log(instance1 === instance2); // true

在上述代码中，createInstance 函数创建了一个实例，而 getInstance 函数确保只有一个实例被创建。

二、工厂模式

工厂模式（Factory Pattern）是一种创建对象的设计模式，它允许在不指定具体类的情况下创建对象。工厂模式提供了一种将对象创建与对象使用分离的方式，使得代码更加灵活和可扩展。

实现工厂模式

工厂模式通常通过定义一个工厂类或工厂方法来创建对象。

class Car {
  constructor(model) {
    this.model = model;
  }
  drive() {
    console.log(`Driving a ${this.model}`);
  }
}
class CarFactory {
  static createCar(model) {
    return new Car(model);
  }
}
const bmw = CarFactory.createCar("BMW");
bmw.drive(); // Driving a BMW

在上述代码中，CarFactory 类的 createCar 方法负责创建 Car 对象。这样，我们可以方便地创建不同类型的 Car 对象，而无需直接实例化 Car 类。

三、观察者模式

观察者模式（Observer Pattern）是一种设计模式，它定义了对象之间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都会自动收到通知并更新。这种模式常用于事件处理系统和数据绑定。

实现观察者模式

在JavaScript中，我们可以使用类和数组来实现观察者模式。

class Subject {
  constructor() {
    this.observers = [];
  }
  subscribe(observer) {
    this.observers.push(observer);
  }
  unsubscribe(observer) {
    this.observers = this.observers.filter(obs => obs !== observer);
  }
  notify(data) {
    this.observers.forEach(observer => observer.update(data));
  }
}
class Observer {
  update(data) {
    console.log(`Observer received data: ${data}`);
  }
}
const subject = new Subject();
const observer1 = new Observer();
const observer2 = new Observer();
subject.subscribe(observer1);
subject.subscribe(observer2);
subject.notify("Hello Observers!"); // Observer received data: Hello Observers!

在上述代码中，Subject 类管理订阅者（观察者），并在其状态改变时通知所有订阅者。

四、装饰器模式

装饰器模式（Decorator Pattern）是一种结构型设计模式，它允许在不改变原始对象的情况下，动态地为对象添加新的行为或功能。装饰器模式通过将对象放入一个装饰器对象中，使得装饰器对象可以扩展原始对象的行为。

实现装饰器模式

在JavaScript中，我们可以使用类和函数来实现装饰器模式。

class Coffee {
  cost() {
    return 5;
  }
}
class MilkDecorator {
  constructor(coffee) {
    this.coffee = coffee;
  }
  cost() {
    return this.coffee.cost() + 1;
  }
}
class SugarDecorator {
  constructor(coffee) {
    this.coffee = coffee;
  }
  cost() {
    return this.coffee.cost() + 0.5;
  }
}
let myCoffee = new Coffee();
myCoffee = new MilkDecorator(myCoffee);
myCoffee = new SugarDecorator(myCoffee);
console.log(myCoffee.cost()); // 6.5

在上述代码中，MilkDecorator 和 SugarDecorator 类装饰了 Coffee 对象，并动态地为其添加了新的行为。

五、模块模式

模块模式（Module Pattern）是一种设计模式，它使用闭包和立即执行函数表达式（IIFE）来创建私有作用域，从而实现数据的私有和封装。模块模式常用于创建自包含的代码单元，使得代码更加模块化和可维护。

实现模块模式

在JavaScript中，我们可以使用IIFE来实现模块模式。

const Module = (function () {
  let privateVariable = "I am private";
  function privateMethod() {
    console.log(privateVariable);
  }
  return {
    publicMethod: function () {
      privateMethod();
    },
  };
})();
Module.publicMethod(); // I am private

在上述代码中，privateVariable 和 privateMethod 都是私有的，只能通过 Module 对象的 publicMethod 访问。

六、策略模式

策略模式（Strategy Pattern）是一种行为型设计模式，它定义了一系列算法，将每个算法封装起来，并使它们可以互换。策略模式使得算法可以独立于使用它的客户端而变化。策略模式常用于替代多重条件语句，使代码更加灵活和可扩展。

实现策略模式

在JavaScript中，我们可以使用类和对象来实现策略模式。

class StrategyA {
  execute() {
    console.log("Executing Strategy A");
  }
}
class StrategyB {
  execute() {
    console.log("Executing Strategy B");
  }
}
class Context {
  setStrategy(strategy) {
    this.strategy = strategy;
  }
  executeStrategy() {
    this.strategy.execute();
  }
}
const context = new Context();
const strategyA = new StrategyA();
const strategyB = new StrategyB();
context.setStrategy(strategyA);
context.executeStrategy(); // Executing Strategy A
context.setStrategy(strategyB);
context.executeStrategy(); // Executing Strategy B

在上述代码中，Context 类使用 setStrategy 方法设置当前策略，并通过 executeStrategy 方法执行当前策略的算法。

七、命令模式

命令模式（Command Pattern）是一种行为型设计模式，它将请求封装为一个对象，从而使我们可以用不同的请求对客户进行参数化，对请求排队或记录请求日志，以及支持可撤销的操作。命令模式常用于实现撤销操作、任务队列等场景。

实现命令模式

在JavaScript中，我们可以使用类和函数来实现命令模式。

class Command {
  execute() {}
  undo() {}
}
class LightOnCommand extends Command {
  constructor(light) {
    super();
    this.light = light;
  }
  execute() {
    this.light.on();
  }
  undo() {
    this.light.off();
  }
}
class LightOffCommand extends Command {
  constructor(light) {
    super();
    this.light = light;
  }
  execute() {
    this.light.off();
  }
  undo() {
    this.light.on();
  }
}
class Light {
  on() {
    console.log("Light is ON");
  }
  off() {
    console.log("Light is OFF");
  }
}
class RemoteControl {
  setCommand(command) {
    this.command = command;
  }
  pressButton() {
    this.command.execute();
  }
  pressUndo() {
    this.command.undo();
  }
}
const light = new Light();
const lightOnCommand = new LightOnCommand(light);
const lightOffCommand = new LightOffCommand(light);
const remoteControl = new RemoteControl();
remoteControl.setCommand(lightOnCommand);
remoteControl.pressButton(); // Light is ON
remoteControl.pressUndo(); // Light is OFF
remoteControl.setCommand(lightOffCommand);
remoteControl.pressButton(); // Light is OFF
remoteControl.pressUndo(); // Light is ON

在上述代码中，LightOnCommand 和 LightOffCommand 类封装了开灯和关灯的请求，而 RemoteControl 类负责调用这些命令对象的方法。

八、适配器模式

适配器模式（Adapter Pattern）是一种结构型设计模式，它允许将一个类的接口转换为另一个接口，以便兼容那些原本因接口不兼容而无法在一起工作的类。适配器模式常用于将现有的类与其他类集成在一起。

实现适配器模式

在JavaScript中，我们可以使用类和对象来实现适配器模式。

class OldPrinter {
  print(text) {
    console.log(`Printing: ${text}`);
  }
}
class NewPrinter {
  printDocument(text) {
    console.log(`Document: ${text}`);
  }
}
class PrinterAdapter {
  constructor(newPrinter) {
    this.newPrinter = newPrinter;
  }
  print(text) {
    this.newPrinter.printDocument(text);
  }
}
const oldPrinter = new OldPrinter();
oldPrinter.print("Hello, World!"); // Printing: Hello, World!
const newPrinter = new NewPrinter();
const adapter = new PrinterAdapter(newPrinter);
adapter.print("Hello, World!"); // Document: Hello, World!

在上述代码中，PrinterAdapter 类将 NewPrinter 类的接口转换为 OldPrinter 类的接口，使其可以与现有代码兼容。

九、代理模式

代理模式（Proxy Pattern）是一种结构型设计模式，它为其他对象提供一种代理，以控制对这个对象的访问。代理模式常用于延迟对象的创建、控制对对象的访问以及在访问前后进行额外的操作。

实现代理模式

在JavaScript中，我们可以使用类和函数来实现代理模式。

class RealSubject {
  request() {
    console.log("RealSubject: Handling request.");
  }
}
class Proxy {
  constructor(realSubject) {
    this.realSubject = realSubject;
  }
  request() {
    if (this.checkAccess()) {
      this.realSubject.request();
      this.logAccess();
    }
  }
  checkAccess() {
    console.log("Proxy: Checking access prior to firing a real request.");
    return true;
  }
  logAccess() {
    console.log("Proxy: Logging the time of request.");
  }
}
const realSubject = new RealSubject();
const proxy = new Proxy(realSubject);
proxy.request();

在上述代码中，Proxy 类控制对 RealSubject 类的访问，并在访问前后执行额外的操作。

十、组合模式

组合模式（Composite Pattern）是一种结构型设计模式，它允许你将对象组合成树形结构来表示"部分-整体"的层次结构。组合模式使得用户对单个对象和组合对象的使用具有一致性。

实现组合模式

在JavaScript中，我们可以使用类和递归来实现组合模式。

class Component {
  add(component) {}
  remove(component) {}
  getChild(index) {}
  operation() {}
}
class Leaf extends Component {
  operation() {
    console.log("Leaf: Performing operation.");
  }
}
class Composite extends Component {
  constructor() {
    super();
    this.children = [];
  }
  add(component) {
    this.children.push(component);
  }
  remove(component) {
    this.children = this.children.filter(child => child !== component);
  }
  getChild(index) {
    return this.children[index];
  }
  operation() {
    console.log("Composite: Performing operation.");
    this.children.forEach(child => child.operation());
  }
}
const leaf1 = new Leaf();
const leaf2 = new Leaf();
const composite = new Composite();
composite.add(leaf1);
composite.add(leaf2);
composite.operation();

在上述代码中，Composite 类包含多个 Leaf 对象，并且可以执行它们的操作。

通过以上示例，我们可以看到不同设计模式在JavaScript中的具体实现方式。每种设计模式都有其特定的使用场景和优势，选择合适的设计模式可以显著提高代码的质量和可维护性。希望这些内容能帮助你更好地理解和运用JavaScript设计模式。