- Java锁的逻辑(结合对象头和ObjectMonitor)
- 还在用饼状图?来瞧瞧这些炫酷的百分比可视化新图形(附代码实现)⛵
- 自动注册实体类到EntityFrameworkCore上下文,并适配ABP及ABPVNext
- 基于Sklearn机器学习代码实战
单例模式(Singleton Pattern) ,也称单体模式,就是全局(或某一作用域范围)唯一实例,大家共享、复用一个实例对象,也可减少内存开销。单例模式应该是最基础、也最常见的设计模式了.
✅常见场景 :
- 全局状态vuex,Jquery中的全局对象
$
,浏览器中的window、document 都算是单例。- 公共的服务、全局配置、缓存、登录框等,全局复用一个对象。
所以实现单例模式的关键就是保障对象实例只创建一次,后续的引用都是同一个实例对象。相比于Java、C#等语言,JavaScript单线程,也没有类,单例实现还是比较容易,基于JS语言特性,有多种实现思路.
实现方式 | 说明 |
---|---|
全局对象 | 全局环境下的var变量,或者直接挂载到全局对象 window 上。使用简单,但会存在全局污染,也不优雅,🚫不推荐! |
构造函数.静态方法getInstance | 使用构造函数的静态方法 getInstance() 来获取实例,唯一实例对象存储在构造函数的 instance 上。 |
虽有一定耦合,Class版本还是一种不错的方式 | |
闭包-new | 利用JS的闭包(万恶的闭包)来保存那个唯一对象实例,这样就可以 new 来获取唯一实例对象了 |
ES6模块Module | ES6的模块其实就是单例模式,模块中导出的对象就是单例的,多次导入其实是同一个引用。 |
创建一个全局对象,浏览器中全局对象一般挂载在Window上,如JQuery、loadsh就是如此实现的.
var
字面量申明一个对象,利用了var的变量提升 + 全局属性的特点(全局环境下的var变量会自动成为全局属性),所以慎用 var
。
window.jQuery = window.$ = jQuery;
window._ = lodash;
// 全局环境下的var变量会自动成为全局属性
var singleUser = {
name: 'sam',
id: 1001
}
// 使用
console.log(singleUser.name) // sam
console.log(window.singleUser.name) // sam
统一一个入口获取对象实例,入口就是为构造函数的静态方法 getInstance() (当然命名随意),在该函数中判断(静态)对象 instance 是否初始化,没有则创建,有则直接返回。所以实际上的唯一实例是作为静态属性,保存在构造器的 instance 属性上,类似 Math.PI .
function GlobalUser(name) {
this.name = name
this.id = 1002
}
// 基于构造函数的静态函数作为统一入口,Constructor.getInstance()
GlobalUser.getInstance = function(name) {
// 注意这里的this指向的是构造函数GlobalUser
if (this.instance) return this.instance
// 第一次没有创建
return this.instance = new GlobalUser(name)
}
console.log(GlobalUser.getInstance('张三').name) // 张三
console.log(GlobalUser.getInstance('李四').name) // 张三,依然是张三,复用了第一次创建的实例
console.log(GlobalUser.getInstance() === GlobalUser.getInstance()) // true
ES6的Class 版本的,原理和上面一样,因为Class本质上也是基于原型的构造函数,但实现起来更优雅一些,推荐使用.
class GlobalUser {
constructor(name) {
this.name = name
this.id = 1002
}
static getInstance(name) {
//静态方法属于类本身,这里的this也就指向类本身
if (!this.instance)
this.instance = new GlobalUser(name)
return this.instance;
}
}
console.log(GlobalUser.getInstance('张三').name) // 张三
console.log(GlobalUser.getInstance('李四').name) // 张三,依然是张三,复用了第一次创建的实例
console.log(GlobalUser.getInstance() === GlobalUser.getInstance()) // true
核心思路就是利用JS的闭包(万恶的闭包)来保存那个唯一对象实例,这样就可以 new 来获取唯一实例对象了!基于闭包的实现方式是比较多的,下面示例只是其中一种,但基本原理都是利用闭包来保存那个“唯一实例”.
let GlobalUser = (function() {
let instance // 闭包保存的唯一实例对象
return function(name) {
if (instance) return instance
// (首次)创建实例
instance = { name: '张三', id: 1003 }
return instance
}
})() // 立即执行,外层函数的价值就是他的闭包变量instance
console.log(new GlobalUser('张三').name) // 张三
console.log(new GlobalUser('李四').name) // 张三,依然是张三,复用了第一次创建的实例
console.log(new GlobalUser() === new GlobalUser()) // true
断点输出一下日志可以看到 GlobalUser 的构造函数闭包 。
闭包版本还可以继续改进下,做成一个通用版本的单例工厂:把具体的对象示例构造器封装一下.
// 一个通用单例工厂,参数为构造器函数、Class类
let Singleton = function(Constructor) {
let instance
return function(...args) {
if (instance) return instance
// (首次)创建实例
instance = new Constructor(...args)
return instance
}
}
// 构造函数
function User(name) {
this.name = name
}
class Config {
constructor(title) {
this.title = title
}
}
// 使用
let SingleUser = Singleton(User)
let u1 = new SingleUser('sam')
let u2 = new SingleUser('zhangsan')
console.log(u1 === u2, u1, u2) //true User {name: 'sam'} User {name: 'sam'}
let GlobalConfig = Singleton(Config)
console.log(new GlobalConfig('设计') === new GlobalConfig('模式')) // true
ES6的模块其实就是单例模式,模块中导出的对象就是单例的,多次导入其实是同一个引用.
回顾一下ESM:参考《 ESModule模块化 》 。
- 📢 Singleton 模式:
import
模块的代码只会执行一次,同一个url文件只会第一次导入时执行代码。后续任何地方import
都不会执行模块代码了,也就是说,import
语句是 Singleton 模式的。- 📢 只读-共享 :模块导入的接口的是只读的,不能修改。当然引用对象的属性值是可以修改的,不建议这么干, 注意 模块是共享的,导出的是一个引用,修改后其他方也会生效。
因此用ESM实现单例就比较简单了:
// 模块申明 config.js
export default {
title: '设计模式'
}
// 使用
import config from './config.js'
console.log(config) // {title: '设计模式'}
config.title = '修改一下'
import config2 from './config.js'
console.log(config, config2) // {title: '修改一下'} {title: '修改一下'}
©️版权申明 :版权所有@安木夕,本文内容仅供学习,欢迎指正、交流,转载请注明出处! 原文编辑地址-语雀 。
最后此篇关于前端设计模式:单例模式(Singleton)的文章就讲到这里了,如果你想了解更多关于前端设计模式:单例模式(Singleton)的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。
单向链表 单向链表比顺序结构的线性表最大的好处就是不用保证存放的位置,它只需要用指针去指向下一个元素就能搞定。 单链表图解 图画的比较粗糙,简单的讲解一下: 上面四个长方形,每个长方
使用TCP,我正在设计一些类似于next的程序。 客户端在许多线程中的接收正在等待一台服务器的发送消息。但是,这是有条件的。 recv正在等待特定的发送消息。 例如 客户 thread 1: recv
我正在编写正则表达式来验证电子邮件。唯一让我困惑的是: 顶级域名可以使用单个字符吗?(例如:lockevn.c) 背景:我知道顶级域名可以是 2 个字符到任意字符(.uk、.us 到 .canon、.
是否可以在单个定义中定义同一 Controller 的多个路由? 例如: 我想要一个单一的定义 /, /about, /privacy-policy 使用类似的东西 _home: pat
我正在使用 objective-c开发针对 11.4 iOS 的单 View 应用程序,以及 Xcode版本是 9.4.1。 创建后有Main.storyboard和LaunchScreen.stor
我一直在尝试在 shell 程序中实现管道结构,如果我执行简单的命令(例如“hello | rev”),它就可以工作 但是当我尝试执行“head -c 1000000/dev/urandom | wc
此表包含主机和接口(interface)列UNIQUE 组合* 编辑:这个表也有一个自动递增的唯一 ID,抱歉我应该在之前提到这个 ** | host.... | interface..... |
我想将具有固定补丁大小的“std filter”应用于单 channel 图像。 也就是说,我希望 out[i,j] 等于 img[i,j] 附近的像素值的标准值。 对于那些熟悉 Matlab 的人,
假设我想进行网络调用并使用 rx.Single,因为我希望只有一个值。 我如何应用replay().autoConnect() 这样的东西,这样当我从多个来源订阅时网络调用就不会发生多次?我应该使用
我将图像从 rgb 转换为 YUV。现在我想单独找到亮度 channel 的平均值。你能告诉我如何实现这一目标吗?此外,有没有办法确定图像由多少个 channel 组成? 最佳答案 你可以这样做: #
在比较Go和Scala的语句结束检测时,我发现Scala的规则更丰富,即: A line ending is treated as a semicolon unless one of the foll
在IEEE 1800-2005或更高版本中,&和&&二进制运算符有什么区别?它们相等吗? 我注意到,当a和b的类型为bit时,这些coverpoint定义的行为相同: cp: coverpoint a
我正在使用Flutter的provider软件包。我要实现的是为一个 View 或页面提供一个简单的提供程序。因此,我在小部件中尝试了以下操作: Widget build(BuildContext c
我正在尝试在 cython 中使用 openmp。我需要在 cython 中做两件事: i) 在我的 cython 代码中使用 #pragma omp single{} 作用域。 ii) 使用#pra
我正在尝试从转义字符字符串中删除单引号和双引号。它对单引号 ' 或双自动 " 不起作用。 请问有人可以帮忙吗? var mysting = escapedStr.replace(/^%22/g, '
我正在尝试在 cython 中使用 openmp。我需要在 cython 中做两件事: i) 在我的 cython 代码中使用 #pragma omp single{} 作用域。 ii) 使用#pra
我正在使用 ANT+ 协议(protocol),将智能手机与 ANT+ USB 加密狗连接,该加密狗通过 SimulANT+ 连接到 PC。 SimulANT+ 正在模拟一个心率传感器,它将数据发送到
有人可以解释/理解单/多线程模式下计算结果的不同吗? 这是一个大约的例子。圆周率的计算: #include #include #include const int itera(100000000
我编写了一个粗略的阴影映射实现,它使用 6 个不同的 View 矩阵渲染场景 6 次以创建立方体贴图。 作为优化,我正在尝试使用几何着色器升级到单 channel 方法,但很难从我的着色器获得任何输出
尝试使用 Single-Spa 构建一些东西并面临添加到应用程序 AngularJS 的问题。 Angular2 和 ReactJs 工作完美,但如果添加 AngularJS 并尝试为此应用程序使用
我是一名优秀的程序员,十分优秀!