前端用的到的设计模式
写于2023年05月24日

设计模式是指在软件设计过程中，经过总结和分类的一些经验和技巧。这些经验和技巧能够帮助我们更好地组织代码、提高代码的可维护性和可扩展性。虽然设计模式主要用于后端开发，但在前端开发中也有很多场景可以使用设计模式来解决问题。

今天我来给大家介绍一些在前端开发中常用的设计模式，并且详细的展示如何使用这些设计模式来解决实际的问题。

1. 发布订阅模式

发布订阅模式是一种常用的事件处理模式，它将事件的发布者和订阅者解耦，使得它们可以独立地进行开发和维护。在前端开发中，发布订阅模式通常用于事件的处理和数据的同步。
以下是一个简单的发布订阅模式示例，用于处理按钮的点击事件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
class Button {
  constructor() {
    this.handlers = [];
  }
  // 添加订阅者
  addHandler(handler) {
    this.handlers.push(handler);
  }
  // 触发事件
  click() {
    this.handlers.forEach(handler => handler());
  }
}
// 订阅者：负责响应事件
const button = new Button();
button.addHandler(() => console.log('Button clicked!'));
// 触发事件
button.click(); // 输出: Button clicked!

在这个示例中，Button类作为发布者，负责发布事件，并通过addHandler方法来添加订阅者。订阅者可以通过匿名函数或具名函数的方式来响应事件。当事件触发时，发布者会遍历所有订阅者，并调用它们的响应函数。

2. 单例模式

单例模式是一种常用的设计模式，它保证一个类只有一个实例，并提供一个全局访问点。在前端开发中，单例模式通常用于管理全局状态和共享资源。
以下是一个简单的单例模式示例，用于管理全局状态：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
class AppState {
  constructor() {
    if (AppState.instance) {
      return AppState.instance;
    }
    this.state = {};
    AppState.instance = this;
  }
  // 获取状态
  getState(key) {
    return this.state[key];
  }
  // 设置状态
  setState(key, value) {
    this.state[key] = value;
  }
}
// 使用单例类管理全局状态
const appState = new AppState();
appState.setState('theme', 'dark');
// 在其他模块中访问全局状态
console.log(appState.getState('theme')); // 输出: dark

在这个示例中，AppState类作为单例类，负责管理全局状态。在第一次使用实例时，它会创建一个新的实例，并将其保存到静态变量instance中。当再次使用实例时，它会返回已经存在的实例，保证AppState类只有一个实例存在。

3. 工厂模式

工厂模式是一种常用的创建型模式，它将对象的创建过程封装在工厂类中，使得对象的创建和使用解耦。在前端开发中，工厂模式通常用于创建动态组件、动态样式和动态数据等。
以下是一个简单的工厂模式示例，用于创建不同类型的按钮：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
class ButtonFactory {
  static create(type) {
    switch (type) {
      case 'primary':
        return new PrimaryButton();
      case 'secondary':
        return new SecondaryButton();
      default:
        throw new Error('Invalid button type!');
    }
  }
}
// 主按钮
class PrimaryButton {
  render() {
    return '<button class="btn btn-primary"></button>';
  }
}
// 次按钮
class SecondaryButton {
  render() {
    return '<button class="btn btn-secondary"></button>';
  }
}
// 使用按钮工厂创建不同类型的按钮
const primaryButton = ButtonFactory.create('primary');
const secondaryButton = ButtonFactory.create('secondary');
// 在页面中渲染按钮
document.body.innerHTML = primaryButton.render() + secondaryButton.render();

在这个示例中，ButtonFactory类作为工厂类，负责创建不同类型的按钮。它根据传入的参数(type)来判断需要创建的对象类型，并返回相应的实例。不同类型的按钮可以有不同的渲染方式(render方法)，但是它们都继承自同一个父类或实现了同一个接口。

4. 策略模式

策略模式是一种常用的行为型模式，它封装了一系列的算法，并将其作为一组可相互替换的策略来使用。在前端开发中，策略模式通常用于封装复杂的业务逻辑和数据计算。
以下是一个简单的策略模式示例，用于计算不同商品的折扣价格：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
class Discount {
  calculate(price) {}
}
// VIP用户优惠
class VIPDiscount extends Discount {
  calculate(price) {
    return price * 0.9;
  }
}
// 满减优惠
class SaleDiscount extends Discount {
  calculate(price) {
    return price >= 100 ? price - 20 : price;
  }
}
// 没有优惠
class NoDiscount extends Discount {
  calculate(price) {
    return price;
  }
}

// 商品类：包含名称和价格
class Product {
  constructor(name, price) {
    this.name = name;
    this.price = price;
  }
}

// 使用优惠策略计算不同商品的折扣价格
const laptop = new Product('Laptop', 1000);
const shirt = new Product('Shirt', 50);
const vipDiscount = new VIPDiscount();
const saleDiscount = new SaleDiscount();
const noDiscount = new NoDiscount();

console.log(laptop.name, 'VIP Price:', vipDiscount.calculate(laptop.price));
console.log(laptop.name, 'Sale Price:', saleDiscount.calculate(laptop.price));
console.log(laptop.name, 'No Discount Price:', noDiscount.calculate(laptop.price));

console.log(shirt.name, 'VIP Price:', vipDiscount.calculate(shirt.price));
console.log(shirt.name, 'Sale Price:', saleDiscount.calculate(shirt.price));
console.log(shirt.name, 'No Discount Price:', noDiscount.calculate(shirt.price));

在这个示例中，Discount类作为优惠策略接口，定义了不同类型的优惠策略。它们都实现了calculate方法，并分别表示VIP用户优惠、满减优惠和没有优惠。商品类(Product)包含商品的名称和价格。在使用时，我们可以通过实例化不同的优惠策略类来计算商品的折扣价格，并用console.log来输出计算结果。

结论

以上是前端开发中常用的几种设计模式，包括发布订阅模式、单例模式、工厂模式和策略模式，并且提供了详细的使用示例。当然，设计模式并不是万能的，需要根据具体的场景和需求来选择最合适的模式。希望这篇文章能够帮助你更好地理解和应用设计模式，提高前端开发水平。