0

0

Javascript中的设计模式有哪些_如何用Javascript实现单例模式?

夢幻星辰

夢幻星辰

发布时间:2026-01-01 22:53:02

|

175人浏览过

|

来源于php中文网

原创

javascript中常见设计模式有单例、工厂、观察者、发布-订阅、代理、装饰器、策略和适配器模式;其中单例模式因“全局唯一实例”语义,广泛用于配置管理、日志器等场景,可用闭包或class+静态属性实现,但需注意多iframe、ssr及测试时的状态隔离问题。

javascript中的设计模式有哪些_如何用javascript实现单例模式?

JavaScript 里常见的设计模式有哪些

JavaScript 中没有类的强制约束,但设计模式依然高度适用——尤其在模块组织、状态管理、事件解耦等场景。实际项目中高频出现的有:单例模式工厂模式观察者模式发布-订阅模式代理模式装饰器模式(常配合 classdecorators 提案)、策略模式适配器模式。其中 单例模式 因其简单明确的“全局唯一实例”语义,在配置管理、日志器、状态仓库初始化等场景被反复使用。

用闭包实现最稳妥的单例模式

ES5/ES6 均可使用闭包 + 惰性初始化来保证严格单例。关键点不是“只 new 一次”,而是“无论调用多少次构造函数,返回的始终是同一个对象引用”。闭包能隐藏私有实例变量,避免外部篡改。

const Singleton = (function() {
  let instance = null;
  function createInstance() {
    return { timestamp: Date.now(), id: Math.random() };
  }
  return {
    getInstance() {
      if (!instance) {
        instance = createInstance();
      }
      return instance;
    }
  };
})();

// 使用
const a = Singleton.getInstance();
const b = Singleton.getInstance();
console.log(a === b); // true

注意:instance 变量被封闭在 IIFE 作用域内,无法从外部重置或覆盖,这是比直接挂载到全局对象更安全的做法。

用 class + 静态属性实现(ES6+)

如果偏好 class 语法,可用静态属性缓存实例。但需注意:静态属性可被外部修改(如 MySingleton.instance = null),必须配合防御性检查。

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

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

下载

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

class MySingleton {
  constructor() {
    if (MySingleton.instance) {
      return MySingleton.instance;
    }
    this.timestamp = Date.now();
    MySingleton.instance = this;
  }
}

// 使用
const x = new MySingleton();
const y = new MySingleton();
console.log(x === y); // true
  • constructor 内部做实例存在性判断,但仅对 new 调用有效;若有人直接访问 MySingleton.instance 并赋值,会破坏单例
  • 不推荐在构造函数中 return 对象字面量(会绕过原型链),上面写法依赖的是 this 绑定和静态属性复用
  • 若需支持参数初始化(如传入配置),应在首次调用时捕获参数并冻结后续调用逻辑

容易忽略的边界问题

单例模式在浏览器多 iframe 或 Web Worker 环境下天然失效——每个上下文都有独立的全局作用域和闭包环境。也就是说:iframe 中的 Singleton.getInstance() 和主页面的不是同一个实例。

  • 跨 iframe 通信需用 postMessage + 共享状态服务(如 IndexedDB 或 BroadcastChannel)模拟“跨上下文单例”
  • SSR(服务端渲染)中,Node.js 的模块缓存机制会让 require 同一文件多次返回同一 module.exports,但若用 ESM 的 import,在不同入口文件中仍可能触发多次初始化(取决于打包器行为)
  • 单元测试中,单例状态会污染测试用例,务必在每个 test case 后手动重置(如暴露 resetInstance() 方法)

真正难的从来不是“怎么写一个单例”,而是“怎么确认它在所有运行路径下都保持唯一且可控”。

热门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新特性的相关的文章、下载、课程内容,供大家免费下载体验。

197

2023.08.04

JavaScript ES6新特性
JavaScript ES6新特性

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

231

2025.12.24

c语言中null和NULL的区别
c语言中null和NULL的区别

c语言中null和NULL的区别是:null是C语言中的一个宏定义,通常用来表示一个空指针,可以用于初始化指针变量,或者在条件语句中判断指针是否为空;NULL是C语言中的一个预定义常量,通常用来表示一个空值,用于表示一个空的指针、空的指针数组或者空的结构体指针。

252

2023.09.22

java中null的用法
java中null的用法

在Java中,null表示一个引用类型的变量不指向任何对象。可以将null赋值给任何引用类型的变量,包括类、接口、数组、字符串等。想了解更多null的相关内容,可以阅读本专题下面的文章。

988

2024.03.01

require的用法
require的用法

require的用法有引入模块、导入类或方法、执行特定任务。想了解更多require的相关内容,可以阅读本专题下面的文章。

507

2023.11.27

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

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

768

2024.01.03

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

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

24

2025.12.06

Swift iOS架构设计与MVVM模式实战
Swift iOS架构设计与MVVM模式实战

本专题聚焦 Swift 在 iOS 应用架构设计中的实践,系统讲解 MVVM 模式的核心思想、数据绑定机制、模块拆分策略以及组件化开发方法。内容涵盖网络层封装、状态管理、依赖注入与性能优化技巧。通过完整项目案例,帮助开发者构建结构清晰、可维护性强的 iOS 应用架构体系。

3

2026.03.03

热门下载

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

精品课程

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

共58课时 | 5.7万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 3.3万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.5万人学习

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

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