深入浅出js单例模式
2020/2/28 5:15:36
本文主要是介绍深入浅出js单例模式,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
何为单例模式?顾名思义,单例模式就是保证一个类仅有一个实例,也就是创建出来的两个实例必须相等!
构造函数静态属性创建单例
function Singleton() { // 已有实例则返回该实例,没有则创建实例 if (typeof Singleton.instance === 'object') { return Singleton.instance } // 把自己绑定到insta静态属性上,保证每次创建相同实例 Singleton.instance = this } var sigle1 = new Singleton() var sigle2 = new Singleton() console.log(sigle1 === sigle2) // true 两个实例相等 sigle1.instance = 123 console.log(sigle2.instance) // 123
该方法的缺点是,instance属性暴露外面,改变一个实例的属性,另一个也会跟着改变! 实例sigle1.instance的改变的同时sigle2.instance也跟着同时也变化了,这不是我们希望要的结果!
构造函数创建不透明单例
const Singleton = function (name) { this.name = name this.instance = null } Singleton.getInstance = function (name) { // 单例已创建则返回,未创建则创建并返归 return this.instance || (this.instance = new Singleton(name)) } Singleton.prototype.getName = function () { return this.name } var instance1 = Singleton.getInstance('instance1') var instance2 = Singleton.getInstance('instance2') console.log(instance1 === instance2) // true 两个实例相等 console.log(instance1.getName(), instance2.getName()) // instance1 instance1
和上一个案例类似,利用构造函数的静态熟悉存储单例,但是该单例并不能改变instance属性。然而,该方法创建单例具有不透明性,需要具体告知用户如何使用。
利用闭包创建单例
function Singleton() { var Man = function (name) { this.name = name } var instance // 函数中返回函数,且返回函数中占用instance,形成闭包,instance唯一 return function (arg) { if (!instance) { instance = new Man(arg) } return instance } } var single = Singleton() console.log(single('tom') === single('jack')) // true 两个实例相等
和上面一个案例一样,用闭包创建单例具有不透明性,而且容易造成内存泄漏。好了说了这么多实现单例的方式,接下来说说单例在工作中的具体使用情况。
单例的实际使用
我们html页面中的提示遮罩框就可以使用单例来创建,因为创建一次,重复使用,没必要再次创建相同遮罩框。这边我就不写具体遮罩框的样式了,嘿嘿。
// 在html页面创建点击按钮 <button id="app">点我创建单例</button>
// 利用立即执行函数创建遮罩框layer var creatLayer = (function(innerHTML){ var layer return function(innerHTML){ if(!layer){ layer = document.createElement('div') layer.innerHTML = innerHTML layer.style.display = 'none' document.body.appendChild(layer) } return layer } })() // 点击按钮弹出遮罩框 document.getElementById('app').onclick = function(){ var layer = creatLayer('我是遮罩框') layer.style.display = 'block' }
无论按钮点击多少次,始终只有创建一个遮罩框,从而避免重复创建。不过边creatLayer函数中含有大量业务代码。遵循高内聚,低耦合的思想,我们进行改造!
// 把业务代码写到creatLayer函数 var creatLayer = function (innerHTML) { var layer = document.createElement('div') layer.innerHTML = innerHTML layer.style.display = 'none' document.body.appendChild(layer) return layer } // 单例单例判断交给getSingle函数,和业务逻辑分开 var getSingle = function (fn) { var div return function () { return div || (div = fn.apply(this, arguments)) } } var layer = getSingle(creatLayer) document.getElementById('app').onclick = function () { var div = layer('我是遮罩框') div.style.display = 'block' }
好了,单例模式具体介绍到这里了。如果想看更多的设计模式,可以看我晚期设计模式系列文章。如果觉得对你有帮助的话,记得给个赞哈😃
这篇关于深入浅出js单例模式的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-05HTML 颜色
- 2024-10-05HTML 颜色名
- 2024-10-01AntDesign-Form-rules学习:轻松入门教程
- 2024-10-01classnames学习:轻松掌握前端中的类名管理
- 2024-09-30前端案例资料:新手入门必读教程
- 2024-09-30前端编程资料:新手入门必备教程
- 2024-09-30前端培训资料:新手入门必读教程
- 2024-09-30滚动吸顶项目实战:从入门到上手
- 2024-09-29HTML学习:span标签教程详解
- 2024-09-29HTML基础:button标签教程