首页 > 文章 > 前端

JavaScript设计模式实战教程

时间：2025-10-23 09:59:50 321浏览收藏

欢迎各位小伙伴来到golang学习网，相聚于此都是缘哈哈哈！今天我给大家带来《JavaScript设计模式实战解析》，这篇文章主要讲到等等知识，如果你对文章相关的知识非常感兴趣或者正在自学，都可以关注我，我会持续更新相关文章！当然，有什么建议也欢迎在评论留言提出！一起学习！

单例模式确保全局唯一实例，适用于配置管理；观察者模式解耦事件发布与订阅，支撑响应式机制；工厂模式统一复杂对象创建，提升可维护性；装饰器模式动态扩展功能，避免修改原代码。这些模式从实例控制、事件通信、对象生成到行为增强提供系统化解决方案，显著提升代码结构与可扩展性。

JavaScript设计模式实战应用

JavaScript设计模式不是花架子，而是解决实际开发中重复问题的成熟方案。用好设计模式，能让代码更清晰、易维护、可扩展。下面结合常见场景，讲几个真正实用的设计模式及具体应用方式。

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

有些对象我们不希望反复创建，比如全局配置、日志管理器、弹窗控制器。单例保证整个应用生命周期中只存在一个实例，避免资源浪费和状态混乱。

实现方式是通过闭包或静态属性控制实例的创建：

class Logger {
  constructor() {
    if (Logger.instance) {
      return Logger.instance;
    }
    this.logs = [];
    Logger.instance = this;
    return this;
  }

  log(message) {
    this.logs.push(message);
    console.log(message);
  }
}

// 使用
const logger1 = new Logger();
const logger2 = new Logger();
console.log(logger1 === logger2); // true

这种写法在模块初始化、全局状态管理时特别有用，避免重复加载或冲突。

2. 观察者模式：实现事件机制与数据响应

前端开发中，页面状态变化需要通知多个组件更新。观察者模式解耦了发布者和订阅者，是实现响应式系统的核心。

比如自定义一个事件中心：

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

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

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

  off(event, callback) {
    if (this.events[event]) {
      this.events[event] = this.events[event].filter(cb => cb !== callback);
    }
  }
}

// 使用
const bus = new EventEmitter();
bus.on('userLogin', user => console.log('欢迎：' + user.name));
bus.emit('userLogin', { name: 'Alice' });

Vue 的双向绑定、React 的状态更新机制背后都有类似逻辑。自己实现时能更灵活控制事件流。

3. 工厂模式：统一创建复杂对象

当对象创建过程复杂，或者需要根据不同条件生成不同实例时，工厂模式能集中管理创建逻辑，避免散落在各处的 new 操作。

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

class EmailNotifier {
  send(msg) { console.log('发送邮件：' + msg); }
}

class SMSNotifier {
  send(msg) { console.log('发送短信：' + msg); }
}

class NotifierFactory {
  static create(type) {
    switch (type) {
      case 'email': return new EmailNotifier();
      case 'sms': return new SMSNotifier();
      default: throw new Error('不支持的类型');
    }
  }
}

// 使用
const notifier = NotifierFactory.create('email');
notifier.send('订单已提交');

后期新增通知方式只需修改工厂，调用方无需改动，符合开闭原则。

4. 装饰器模式：动态扩展功能而不修改原代码

想给已有函数添加日志、性能监控、权限校验等横切逻辑？装饰器模式可以在不侵入原函数的前提下增强行为。

利用 ES6 的高阶函数实现：

function withLog(fn) {
  return function(...args) {
    console.log(`调用 ${fn.name}，参数：`, args);
    const result = fn.apply(this, args);
    console.log(`结果：`, result);
    return result;
  };
}

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

const loggedAdd = withLog(add);
loggedAdd(2, 3); // 自动输出调用日志

这种模式在中间件、API 包装、调试工具中非常实用。

基本上就这些。设计模式的价值不在“炫技”，而在面对复杂需求时提供清晰的结构思路。掌握这几个模式，日常开发中的模块组织、状态管理、组件通信都会更从容。

终于介绍完啦！小伙伴们，这篇关于《JavaScript设计模式实战教程》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！

工厂模式单例模式装饰器模式观察者模式 JavaScript设计模式