设计模式：提升代码质量和维护性的利器

YuXiang

引言

随着项目的不断扩大，代码的结构和维护性变得尤为重要。设计模式作为一种经验的总结与抽象，帮助我们以高效、可维护和可扩展的方式组织代码。我们在项目中开发中会用到很多设计模式去处理问题，但是很多前端同学一谈到设计模式就支支吾吾讲不出来，一方面是 JavaScript 并不完全遵循面向对象的设计思想，另一方面是平时过于专注业务代码而缺少了经验总结。看完本篇文章你就会恍然大悟，原来我平时一直都在用各种设计模式解决问题。

1.什么是设计模式？

设计模式是面向对象设计中常见问题的解决方案的总结。它们并不是现成的代码，而是经验的提炼和指导思想。通过设计模式，开发者可以用成熟的设计方案来解决常见的编程问题，从而提高代码的复用性、可维护性和可扩展性。

在前端开发中，尽管 JavaScript 并不完全遵循传统的面向对象设计思想，但许多设计模式仍然能够通过特定的实现方式得到应用。

2.常见的前端设计模式

单例模式（Singleton）

概念：确保某个类只有一个实例，并提供全局访问点。
应用场景 ：在前端开发中，单例模式常用于需要全局共享状态的场景，比如全局配置管理、日志记录等。通过单例模式，可以避免创建多个实例，从而减少内存消耗和状态管理混乱。
实例：在 JavaScript 中， localStorage 或 sessionStorage 管理用户数据时，可以将其封装为单例模式，保证同一数据的唯一实例。

class Singleton {
  constructor() {
    if (!Singleton.instance) {
      Singleton.instance = this;
    }
    return Singleton.instance;
  }
}

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

观察者模式（Observer）

概念：定义对象之间的一种一对多的依赖关系，当一个对象的状态发生变化时，所有依赖于它的对象都会自动得到通知并更新。
应用场景 ：在前端开发中，观察者模式非常适用于事件驱动编程。例如，Vue、React 等前端框架都在使用这种模式来管理数据变化与视图的更新。
实例：在处理用户输入时，使用观察者模式让多个组件根据用户操作动态更新。

class Subject {
  constructor() {
    this.observers = [];
  }

  addObserver(observer) {
    this.observers.push(observer);
  }

  notify() {
    this.observers.forEach((observer) => observer.update());
  }
}

class Observer {
  update() {
    console.log("状态已更新");
  }
}

const subject = new Subject();
const observer1 = new Observer();
subject.addObserver(observer1);
subject.notify(); // 输出：状态已更新

工厂模式（Factory）

概念：定义一个用于创建对象的接口，子类决定实例化哪一个类。工厂方法将对象的创建过程封装起来。
应用场景 ：工厂模式适用于创建复杂对象时。例如，当我们需要创建不同类型的组件（如按钮、输入框）时，可以使用工厂模式来统一处理组件的创建。
实例：在前端开发中，表单控件、图表库等模块常常使用工厂模式来构造不同类型的组件实例。

class Button {
  render() {
    console.log("渲染按钮");
  }
}

class Input {
  render() {
    console.log("渲染输入框");
  }
}

class ComponentFactory {
  static createComponent(type) {
    switch (type) {
      case "button":
        return new Button();
      case "input":
        return new Input();
      default:
        throw new Error("未知组件类型");
    }
  }
}

const button = ComponentFactory.createComponent("button");
button.render(); // 输出：渲染按钮

策略模式（Strategy）

概念：定义一系列算法，将每一个算法封装起来，并使它们可以互换。策略模式让算法独立于使用它的客户端独立变化。
应用场景 ：策略模式常用于需要动态选择算法或行为的场景。在前端开发中，常见的应用场景如排序、过滤等功能，可以通过策略模式进行管理。
实例：在前端分页时，不同的排序方式可以作为策略模式的不同策略。

class SortStrategy {
  sort(arr) {}
}

class BubbleSort extends SortStrategy {
  sort(arr) {
    console.log("使用冒泡排序");
    return arr.sort();
  }
}

class QuickSort extends SortStrategy {
  sort(arr) {
    console.log("使用快速排序");
    return arr.sort((a, b) => a - b);
  }
}

class SortContext {
  constructor(strategy) {
    this.strategy = strategy;
  }

  setStrategy(strategy) {
    this.strategy = strategy;
  }

  sort(arr) {
    return this.strategy.sort(arr);
  }
}

const context = new SortContext(new BubbleSort());
context.sort([5, 3, 8, 1]); // 输出：使用冒泡排序

命令模式（Command）

概念：将一个请求封装成一个对象，从而使您可以用不同的请求对客户进行参数化，将请求排队或者记录请求日志，以及支持可撤销的操作。
应用场景 ：命令模式适用于需要将请求调用者与接收者解耦的场景。在前端开发中，它常用于实现撤销与重做功能、按钮操作等场景。
实例：例如，当用户点击按钮时，创建不同的命令对象，然后执行或撤销该命令。

class Command {
  execute() {}
}

class LightOnCommand extends Command {
  constructor(light) {
    super();
    this.light = light;
  }

  execute() {
    this.light.turnOn();
  }
}

class Light {
  turnOn() {
    console.log("灯光打开");
  }

  turnOff() {
    console.log("灯光关闭");
  }
}

const light = new Light();
const lightOn = new LightOnCommand(light);
lightOn.execute(); // 输出：灯光打开

3.设计模式在工作中的应用

组件化开发 ：许多前端框架（如 React、Vue）本身就是基于设计模式构建的。例如，React 中的组件化设计可以看作是工厂模式的一个应用，而组件之间的状态管理则使用了观察者模式。
表单与输入验证 ：工厂模式和策略模式常用于处理多种类型的表单组件与验证方式的组合。
UI 动画控制 ：命令模式可以用于控制用户界面的动画效果，在不改变原始逻辑的情况下实现各种动画效果的切换。
API 请求管理 ：单例模式可以用于全局管理 API 请求，避免重复请求，并集中处理错误与重试机制。