开发人员都应该知道的 JavaScript 设计模式

关注【索引目录】服务号，更多精彩内容等你来探索！

在构建可扩展、可维护且高效的 JavaScript 应用程序时，理解设计模式至关重要。这些模式为常见的编码问题提供了行之有效的解决方案，并帮助开发者编写更简洁、模块化且可复用的代码。无论您是初学者还是经验丰富的开发者，学习 JavaScript 设计模式都能显著提升您的代码结构。

在本文中，我们将探讨每个开发人员都应该知道的最重要的 JavaScript 设计模式。

1.单例模式

单例模式确保一个类只有一个实例并提供对它的全局访问点。

用例：管理全局应用程序状态、配置对象或数据库连接。

const AppConfig = (function () {
  let instance;

  function createInstance() {
    return { theme: 'dark', version: '1.0' };
  }

  return {
    getInstance: function () {
      if (!instance) instance = createInstance();
      return instance;
    }
  };
})();

const config1 = AppConfig.getInstance();
const config2 = AppConfig.getInstance();
console.log(config1 === config2); // true

2.模块模式

模块模式使用闭包将相关代码封装到单个单元中，并仅公开必要的代码。

用例：封装逻辑以保持全局范围清洁。

const CounterModule = (function () {
  let count = 0;

  return {
    increment() {
      count++;
      return count;
    },
    reset() {
      count = 0;
      return count;
    }
  };
})();

CounterModule.increment(); // 1
CounterModule.increment(); // 2
CounterModule.reset();     // 0

3.工厂模式

工厂模式允许创建对象，而无需向客户端公开创建逻辑。

用例：根据输入条件创建不同类型的对象。

function CarFactory(type) {
  switch (type) {
    case 'sedan':
      return { wheels: 4, doors: 4, type: 'sedan' };
    case 'truck':
      return { wheels: 6, doors: 2, type: 'truck' };
    default:
      return { wheels: 4, doors: 4, type: 'default' };
  }
}

const car = CarFactory('truck');
console.log(car); // { wheels: 6, doors: 2, type: 'truck' }

4.观察者模式

观察者模式定义了一种订阅机制来通知多个对象有关事件的信息。

用例：事件驱动架构或反应式 UI。

class EventEmitter {
  constructor() {
    this.events = {};
  }

  on(event, listener) {
    if (!this.events[event]) this.events[event] = [];
    this.events[event].push(listener);
  }

  emit(event, data) {
    if (this.events[event]) {
      this.events[event].forEach(listener => listener(data));
    }
  }
}

const emitter = new EventEmitter();
emitter.on('save', (data) => console.log(`Data saved: ${data}`));
emitter.emit('save', 'Project Info');

5.原型模式

原型模式允许您根据现有对象的蓝图创建新对象。

用例： JavaScript 中的高效内存使用和对象继承。

const vehicle = {
  wheels: 4,
  start() {
    console.log('Vehicle started');
  }
};

const car = Object.create(vehicle);
car.start(); // Vehicle started

6.命令模式

命令模式将请求封装为对象，允许参数化和排队。

用例：撤消/重做功能、任务队列。

function commandReceiver() {
  return {
    execute(action) {
      console.log(`Executing ${action}`);
    }
  };
}

const receiver = commandReceiver();
const command = { execute: () => receiver.execute('Save Document') };
command.execute();

最后的想法

掌握这些 JavaScript 设计模式有助于您构建更易于维护、更可扩展的应用程序。无论您是在开发大型 Web 应用还是个人项目，这些模式都能为您的代码库提供结构化和清晰度。