0

0

javascript设计模式有哪些_单例模式和观察者模式如何实现【教程】

夜晨

夜晨

发布时间:2026-01-29 12:06:40

|

655人浏览过

|

来源于php中文网

原创

单例模式用于全局唯一状态与延迟初始化,如日志器、配置管理器;观察者模式解决松耦合通知,需支持错误隔离与生命周期管理;二者组合时应职责分离,避免“上帝对象”。

javascript设计模式有哪些_单例模式和观察者模式如何实现【教程】

单例模式和观察者模式是 JavaScript 中最常用、也最容易被误用的两种设计模式;它们不是“必须用”,而是“在特定约束下最有解”。

什么时候该用单例模式?getInstance 不是装饰,是防重复实例的兜底

单例的核心诉求只有一个:全局唯一状态 + 延迟初始化。常见于日志器、配置管理器、全局事件总线(注意:这里和观察者不冲突,只是职责不同)。

容易踩的坑:

  • const instance = new MyClass() 直接导出 —— 模块缓存虽能保证“唯一”,但无法控制初始化时机,也无法做懒加载或条件初始化
  • 把单例写成带私有变量的闭包,却暴露了构造函数,导致别人仍可 new MyClass() 绕过控制
  • 在 SSR 环境中未区分服务端/客户端实例,造成状态污染

一个稳妥的实现(ES6+):

立即学习Java免费学习笔记(深入)”;

class Logger {
  constructor() {
    if (Logger.instance) return Logger.instance;
    this.logs = [];
    Logger.instance = this;
  }
  log(msg) { this.logs.push(msg); }
}
// 导出的是方法,不是实例
export const getLogger = () => Logger.instance || new Logger();

关键点:构造函数内拦截、导出函数而非实例、不暴露 new 能力。

观察者模式 ≠ addEventListener,它解决的是“松耦合通知”

浏览器原生事件机制是观察者的一种特例,但通用观察者要支持任意对象间通信,且不依赖 DOM。典型场景:状态变更通知多个无关模块(如 UI 更新、埋点上报、缓存失效)。

动态WEB网站中的PHP和MySQL:直观的QuickPro指南第2版
动态WEB网站中的PHP和MySQL:直观的QuickPro指南第2版

动态WEB网站中的PHP和MySQL详细反映实际程序的需求,仔细地探讨外部数据的验证(例如信用卡卡号的格式)、用户登录以及如何使用模板建立网页的标准外观。动态WEB网站中的PHP和MySQL的内容不仅仅是这些。书中还提到如何串联JavaScript与PHP让用户操作时更快、更方便。还有正确处理用户输入错误的方法,让网站看起来更专业。另外还引入大量来自PEAR外挂函数库的强大功能,对常用的、强大的包

下载

常见错误:

  • Array.push 存回调,但没做去重或生命周期管理,导致内存泄漏(尤其 React 组件反复挂载)
  • 通知时直接遍历执行,若某个观察者抛错,后续观察者中断 —— 缺少错误隔离
  • 把发布者和订阅者写死在同一个类里,失去解耦意义

轻量实现(无第三方依赖):

class EventEmitter {
  constructor() {
    this.events = new Map();
  }
  on(type, handler) {
    if (!this.events.has(type)) this.events.set(type, new Set());
    this.events.get(type).add(handler);
  }
  off(type, handler) {
    if (this.events.has(type)) {
      this.events.get(type).delete(handler);
    }
  }
  emit(type, ...args) {
    const handlers = this.events.get(type);
    if (handlers) {
      // 错误隔离:每个 handler 独立 try/catch
      handlers.forEach(h => { try { h(...args); } catch (e) { console.error(e); } });
    }
  }
}

使用时:emitter.on('user:login', updateHeader),谁注册谁注销,不强绑定生命周期。

单例 + 观察者组合用?小心“上帝对象”陷阱

比如写一个全局 Store 单例,并内置 on/emit —— 听起来合理,但很快会演变成所有逻辑都往里塞:API 请求、权限校验、本地缓存同步……最后变成难以测试、无法拆分的巨石。

更健康的分法:

  • 单例只管“状态容器”本身(如 class Store { state; setState() }
  • 观察者独立存在(const bus = new EventEmitter()),由上层协调:Store 变更后手动 bus.emit('store:changed', newState)
  • 或者用 Proxy + 自动触发(需谨慎:性能开销、不可控通知粒度)

复杂点从来不在“怎么写模式”,而在于“哪一层该承担哪部分责任”。模式是工具,不是架构说明书。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
es6新特性
es6新特性

es6新特性有:1、块级作用域变量;2、箭头函数;3、模板字符串;4、解构赋值;5、默认参数;6、 扩展运算符;7、 类和继承;8、Promise。本专题为大家提供es6新特性的相关的文章、下载、课程内容,供大家免费下载体验。

106

2023.07.17

es6新特性有哪些
es6新特性有哪些

es6的新特性有:1、块级作用域;2、箭头函数;3、解构赋值;4、默认参数;5、扩展运算符;6、模板字符串;7、类和模块;8、迭代器和生成器;9、Promise对象;10、模块化导入和导出等等。本专题为大家提供es6新特性的相关的文章、下载、课程内容,供大家免费下载体验。

195

2023.08.04

JavaScript ES6新特性
JavaScript ES6新特性

ES6是JavaScript的根本性升级,引入let/const实现块级作用域、箭头函数解决this绑定问题、解构赋值与模板字符串简化数据处理、对象简写与模块化提升代码可读性与组织性。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

222

2025.12.24

c语言const用法
c语言const用法

const是关键字,可以用于声明常量、函数参数中的const修饰符、const修饰函数返回值、const修饰指针。详细介绍:1、声明常量,const关键字可用于声明常量,常量的值在程序运行期间不可修改,常量可以是基本数据类型,如整数、浮点数、字符等,也可是自定义的数据类型;2、函数参数中的const修饰符,const关键字可用于函数的参数中,表示该参数在函数内部不可修改等等。

531

2023.09.20

class在c语言中的意思
class在c语言中的意思

在C语言中,"class" 是一个关键字,用于定义一个类。想了解更多class的相关内容,可以阅读本专题下面的文章。

469

2024.01.03

python中class的含义
python中class的含义

本专题整合了python中class的相关内容,阅读专题下面的文章了解更多详细内容。

13

2025.12.06

go语言闭包相关教程大全
go语言闭包相关教程大全

本专题整合了go语言闭包相关数据,阅读专题下面的文章了解更多相关内容。

137

2025.07.29

DOM是什么意思
DOM是什么意思

dom的英文全称是documentobjectmodel,表示文件对象模型,是w3c组织推荐的处理可扩展置标语言的标准编程接口;dom是html文档的内存中对象表示,它提供了使用javascript与网页交互的方式。想了解更多的相关内容,可以阅读本专题下面的文章。

3339

2024.08.14

java入门学习合集
java入门学习合集

本专题整合了java入门学习指南、初学者项目实战、入门到精通等等内容,阅读专题下面的文章了解更多详细学习方法。

1

2026.01.29

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 4.3万人学习

国外Web开发全栈课程全集
国外Web开发全栈课程全集

共12课时 | 1.0万人学习

React核心原理新老生命周期精讲
React核心原理新老生命周期精讲

共12课时 | 1万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号