JavaScript设计模式_javascript开发实战_技术教程

单例模式确保类仅有一个实例，通过闭包实现；观察者模式实现对象间松耦合通信，适用于事件系统；工厂模式封装对象创建，提升扩展性；装饰器模式动态扩展功能，利于调试与增强。合理选用可提升代码质量，避免过度设计。

JavaScript设计模式是提升代码可维护性与复用性的关键工具，尤其在复杂应用开发中尤为重要。掌握常用的设计模式能帮助开发者写出更清晰、更灵活的结构，有效应对需求变化。

单例模式：确保一个类只有一个实例

单例模式保证某个类在整个应用中仅被实例化一次，常用于配置管理、日志记录或全局状态控制。

实现方式通常通过闭包或模块模式来隐藏实例创建逻辑：

const Singleton = (function () {
  let instance;

  function createInstance() {
    return { name: 'Singleton Instance' };
  }

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

// 使用
const inst1 = Singleton.getInstance();
const inst2 = Singleton.getInstance();
console.log(inst1 === inst2); // true

这种写法避免了重复创建对象，节省资源并保持状态统一。

观察者模式：实现对象间的松耦合通信

观察者模式适用于事件驱动场景，比如用户交互、数据更新通知等。主体（Subject）维护一组观察者（Observer），当状态变化时自动通知所有订阅者。

示例实现：

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('Received:', data);
  }
}

// 使用
const subject = new Subject();
const obs1 = new Observer();
const obs2 = new Observer();

subject.subscribe(obs1);
subject.subscribe(obs2);
subject.notify('Hello Observers!'); // 两个观察者都会收到消息

这种模式广泛应用于前端框架中的事件系统和状态管理。

工厂模式：封装对象创建过程

工厂模式用于根据输入参数返回不同类型的对象，避免在代码中直接使用 new 操作符，提高扩展性。

例如创建不同类型的用户：

function UserFactory(type, name) {
  if (type === 'admin') {
    return {
      name,
      role: 'admin',
      canEdit: true
    };
  } else if (type === 'guest') {
    return {
      name,
      role: 'guest',
      canEdit: false
    };
  }
}

// 使用
const admin = UserFactory('admin', 'Alice');
const guest = UserFactory('guest', 'Bob');

当需要新增用户类型时，只需修改工厂函数，而不影响调用方代码。

装饰器模式：动态扩展功能

装饰器模式允许在不修改原对象的前提下为其添加新功能，适合逐步增强对象能力的场景。

JavaScript 中可通过高阶函数或 ESNext 装饰器语法实现：

function logDecorator(fn) {
  return function (...args) {
    console.log(`Calling ${fn.name} with`, args);
    const result = fn.apply(this, args);
    console.log(`Result:`, result);
    return result;
  };
}

function add(a, b) {
  return a + b;
}

const loggedAdd = logDecorator(add);
loggedAdd(2, 3); // 输出调用信息和结果

这种模式在调试、权限校验、缓存等场景非常实用。

基本上就这些。实际开发中结合业务选择合适模式，避免过度设计。理解本质比死记硬背更重要。不复杂但容易忽略。