JavaScript设计模式_javascript开发实战-js教程-PHP中文网

JavaScript设计模式_javascript开发实战

幻影之瞳

发布： 2025-12-05 20:39:01

原创

753人浏览过

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

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

登录后复制

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

立即学习“Java免费学习笔记（深入）”；

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

观察者模式适用于事件驱动场景，比如用户交互、数据更新通知等。主体（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!'); // 两个观察者都会收到消息

登录后复制

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

v3.0 S-CMS企业建站系统(含小程序)

S-CMS政府建站系统是淄博闪灵网络科技有限公司开发的一款专门为企业建站提供解决方案的产品，前端模板样式主打HTML5模板，以动画效果好、页面流畅、响应式布局为特色，程序主体采用ASP+ACCESS/MSSQL构架，拥有独立自主开发的一整套函数、标签系统，具有极强的可扩展性，设计师可以非常简单的开发出漂亮实用的模板。系统自2015年发布第一个版本以来，至今已积累上万用户群，为上万企业提供最优质的建

258

查看详情

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

工厂模式用于根据输入参数返回不同类型的对象，避免在代码中直接使用 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); // 输出调用信息和结果

登录后复制

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

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

以上就是JavaScript设计模式_javascript开发实战的详细内容，更多请关注php中文网其它相关文章！