JavaScript 设计模式之单例模式
在 JavaScript 开展的过程中,前行者们从实践中总结出了许多特定问题的解决办法。简便来说,设计模式就是在某种场合下对特定问题的简约而又文雅的解决方案
在之后的一段时间,我将记载 JavaScript 中各种常见的设计模式。或许你对此已经轻车熟路,或许平常已在使用,但是对其概念并不是特殊熟知,又或许只是对此有一些含糊的概念。那么,信赖这个系列必然会带给你些许收成
在理解这些常见的模式此前,默许你已经至少把握
this
闭包
高阶函数
原型和原型链
理解它们,会让你愈加清楚的认识一个模式。当然,或许我此前所记载的有关这方面的东西能够给你些许帮忙 传送门
假如文章中有显现纰漏、错误之处,还请看到的小伙伴很多指教,先行谢过
下面,就让我们从它开端吧 -- 单例模式
概念
望文生义,只要一个实例
定义:包管一个类仅有一个实例,并供给一个拜访它的全局拜访点
看到这样的定义,你的脑海中可否会冒出 全局变量 的概念呢。不成否认,全局变量是相符单例模式的概念的。但是,我们平常不会也不该该将它作为一个单例来使用,缘由有以下两点:
全局命名污染
不易保护,容易被重写覆盖
在 ES6 此前,我们平常会使用一个结构函数来模拟一个类,此刻我们也可以直接使用 class 关键字来创立一个类,虽然其本质也是原型
想要包管一个类仅有一个实例,我们需要供给一个变量来标记当前可否已经为一个类创立过实例。所以,单例模式的中心就是:确保只要一个实例,并供给全局拜访
环绕这个中心,我们也就根本分明了单例模式的实现方式
实现
根基版
按照单例模式的定义,我们可以用以下方式简便实现
var Singleton = function(name){ this.name = name } Singleton.instance = null // 初始化一个变量Singleton.getInstance = function(name) {// 推断这个变量可否已经被赋值,假如没有就使之为结构函数的实例化对象// 假如已经被赋值了就直接返回 if(!this.instance) { this.instance = new Singleton(name) } return this.instance } var a = Singleton.getInstance('Tadpole') var b = Singleton.getInstance('Amy') a === b // true
以上代码,清楚的反映出了单例模式的定义。通过一个中心变量的方式,只初始化一个实例,所以终究 a 和 b 是完全相等的
我们也可以用 ES6 的 class 关键字来实现
class Singleton { constructor(name){ this.name = name this.instance = null } // 供给一个接口对类停止实例化 static getInstance(name) { if(!this.instance) { this.instance = new Singleton(name) } return this.instance } }
不难发明,ES6 的实现方式和我们通过结构函数的方式实现根本是一致的
存在问题:
不足 透亮,我们需要束缚类实例化的调取方式
耦合度过高,功效业务代码耦合在一起不利于后期保护
结构函数
让我们对上面的方式做一个简便的修改
// 将变量直接挂在结构函数上面,终究将其返回 function Singleton(name) { if(typeof Singleton.instance === 'object'){ return Singleton.instance } this.name = name return Singleton.instance = this } // 正常创立实例 var a = new Singleton('Tadpole') var b = new Singleton('Amy')
解决了根基版类不足 透亮 的问题,可以使用 new 关键字来初始化实例,但同时也存在着新的问题
推断 Single.instance 类型来返回,大概得不到预测结果
耦合度过高
这种方式也可以通过 ES6 方式来实现
// 将 constructor 改写为单例模式的结构器 class Singleton { constructor(name) { this.name = name if(!Singleton.instance) { Singleton.instance = this } return Singleton.instance } }
闭包
通过单例模式的定义,想要包管只要一个实例并且可以供给全局拜访。那么,闭包必定也是可以实现这样的需求
var Singleton = (function () { var SingleClass = function () {}; var instance; return function () { if (!instance) { instance = new SingleClass() // 假如不存在 则new一个 } return instance; } })()
通过闭包的特性,留存一个变量并终究将其返回,供给全局拜访
一样的,以上的代码还是没有解决耦合度的问题
让我们细心视察这一段代码,假如我们将其中结构函数的部分提取到外部,可否就实现了功效的别离呢
代理实现
修改一下上面的代码
function Singleton(name) { this.name = name } var proxySingle = (function(){ var instance return function(name) { if(!instance) { instance = new Singleton(name) } return instance } })()
将创立函数的步骤从函数中提取出来,把负责治理单例的逻辑移到了代理类 proxySingle 中。这样做的目的就是将 Singleton 这个类变成一个一般的类,我们就可以在其中独自编写一些业务逻辑,到达了逻辑别离的结果
我们此刻已经到达了逻辑别离的结果,并且也不 透亮 了。但是,这个负责代理的类可否已经完全相符我们的要求呢,答案可否定的。设想一下,假如我们的结构函数有多个参数,我们是不是也应当在代理类中表现出来呢
那么,有没有更通用一些的实现方式呢
通用惰性单例
在前面的几个回合,我们已经根本完成了单例模式的创立。此刻,我们需要追求一种更通用的方式解决此前留下来的问题
试想一下,假如我们将函数作为一个参数呢
// 将函数作为一个参数传递 var Singleton = function(fn) { var instance return function() { // 通过apply的方式收集参数并施行传入的参数将结果返回 return instance || (instance = fn.apply(this, arguments)) } }
这种方式最大的长处就是相当于缓存了我们想要的结果,并且在我们需要的时候才去调取它,相符封装的简单职责
利用
前面有说过,所有的模式都是从实践中总结而来,下面就让我们来看看它在实际开发中都是什么利用吧
通过单例模式的定义我们不难想出它在实际开发中的用处,比方:全局遮罩层
一个全局的遮罩层我们不成能每一次调取的时候都去创立它,最好的方式就是让它只创立一次,之后用一个变量将它留存起来,再次调取的时候直接返回结果即可
单例模式就很相符我们这样的需求
// 模拟一个遮罩层var createDiv = function () { var div = document.createElement('div') div.style.width = '100vw' div.style.height = '100vh' div.style.backgroundColor = 'red' document.body.appendChild(div) return div }// 创立出这个元素var createSingleLayer = Singleton(createDiv)document.getElementById('btn').onclick = function () { // 只要在调取的时候才展现 var divLayer = createSingleLayer() }
当然,在实际利用中还是有许多适用处景的,比方登录框,还有我们大概会使用到的 Vux 之类的状态治理工具,它们实际上都是契合单例模式的
跋文
单例模式是一种简便而又有用的模式,通过创立对象和治理单例的两个办法,我们就可以制造出许多有用且文雅的利用。当然,它也有本身的缺陷,比方只要一个实例~
合理使用才能发挥出它的最大威力
最后,引荐一波前端学习过程,感乐趣的小伙伴可以 点击这里 ,也可以扫描下方二维码关注我的微信公众号,查看往期更多内容,欢迎 star 关注
引荐教程:《JS教程》
以上就是JavaScript 设计模式之单例模式的具体内容,更多请关注百分百源码网其它相关文章!