JavaScript 设计模式：全面概述-js教程-PHP中文网

JavaScript 设计模式：全面概述

花韻仙語

发布： 2024-12-18 15:06:58

原创

621人浏览过

javascript 设计模式：全面概述

JavaScript 设计模式详解

设计模式是针对常见软件设计问题的成熟解决方案，有助于编写更规范、易维护、易扩展的代码。JavaScript 中的设计模式主要分为创建型、结构型和行为型三大类。

1. 创建型设计模式

创建型模式关注对象的创建方式，提高对象的创建灵活性和复用性。

a) 单例模式

确保一个类只有一个实例，并提供全局访问点。

<code class="javascript">class Singleton {
  constructor() {
    if (Singleton.instance) return Singleton.instance;
    Singleton.instance = this;
  }
}

const instance1 = new Singleton();
const instance2 = new Singleton();
console.log(instance1 === instance2); // true</code>

登录后复制

b) 工厂模式

创建对象无需指定具体类。

立即学习“Java免费学习笔记（深入）”；

<code class="javascript">class CarFactory {
  static createCar(type) {
    switch (type) {
      case 'sedan': return { type: 'sedan', wheels: 4 };
      case 'suv': return { type: 'suv', wheels: 4 };
      default: return { type: 'unknown', wheels: 0 };
    }
  }
}

const car = CarFactory.createCar('suv');
console.log(car); // { type: 'suv', wheels: 4 }</code>

登录后复制

2. 结构型设计模式

结构型模式处理类和对象的组合，提升系统可维护性。

a) 模块模式

将代码封装到独立单元，只公开必要的方法。

美图设计室

5分钟在线高效完成平面设计，AI帮你做设计

查看详情

<code class="javascript">const Calculator = (() => {
  const add = (a, b) => a + b;
  const subtract = (a, b) => a - b;
  return { add, subtract };
})();

console.log(Calculator.add(2, 3)); // 5
console.log(Calculator.subtract(5, 2)); // 3</code>

登录后复制

b) 装饰器模式

动态地为对象添加额外功能。

<code class="javascript">function coffee() {
  return "coffee";
}

function withMilk(coffeeFn) {
  return `${coffeeFn()} + milk`;
}

console.log(withMilk(coffee)); // coffee + milk</code>

登录后复制

3. 行为型设计模式

行为型模式关注对象间的通信和交互。

a) 观察者模式

对象（主题）通知多个观察者其状态变化。

<code class="javascript">class Subject {
  constructor() {
    this.observers = [];
  }
  subscribe(observer) {
    this.observers.push(observer);
  }
  notify(data) {
    this.observers.forEach(observer => observer(data));
  }
}

const subject = new Subject();
subject.subscribe(data => console.log(`Observer 1: ${data}`));
subject.notify("事件发生！"); // Observer 1: 事件发生！</code>

登录后复制

b) 策略模式

允许选择多种算法。

<code class="javascript">class PaymentStrategy {
  pay(amount) {
    throw new Error("此方法必须被重写！");
  }
}

class CreditCardPayment extends PaymentStrategy {
  pay(amount) {
    console.log(`使用信用卡支付 ${amount}`);
  }
}

const payment = new CreditCardPayment();
payment.pay(100); // 使用信用卡支付 100</code>

登录后复制