利用ES6实现单例模式及其应用详解

时间:2021-05-25

前言

在传统开发工程师眼里,单例就是保证一个类只有一个实例,实现的方法一般是先判断实例存在与否,如果存在直接返回,如果不存在就创建了再返回,这就确保了一个类只有一个实例对象。在JavaScript里,单例作为一个命名空间提供者,从全局命名空间里提供一个唯一的访问点来访问该对象。

单例模式的定义是:保证一个类仅有一个一个实例,并提供一个访问它的全局访问点。

单例模式能在合适的时候创建对象,并且创建唯一的一个。

代码接近于生活,很有意思。比如一个网站的登录,点击登录后弹出一个登录弹框,即使再次点击,也不会再出现一个相同的弹框。又或者一个音乐播放程序,如果用户打开了一个音乐,又想打开一个音乐,那么之前的播放界面就会自动关闭,切换到当前的播放界面。这些都是单例模式的应用场景。

要实现一个单例模式,一个经典的方式是创建一个类,类中又一个方法能创建该类的实例对象,还有一个标记,记录是否已经创了过了实例对象。如果对象已经存在,就返回第一次实例化对象的引用。

单例模式的实现

es5实现方式

var Singleton = function(name) { this.name = name; //一个标记,用来判断是否已将创建了该类的实例 this.instance = null;}// 提供了一个静态方法,用户可以直接在类上调用Singleton.getInstance = function(name) { // 没有实例化的时候创建一个该类的实例 if(!this.instance) { this.instance = new Singleton(name); } // 已经实例化了,返回第一次实例化对象的引用 return this.instance;}

用户可以通过一个广为人知的接口,对该实例进行访问。

我们尝试对该对象进行两次实例化,观察两次实例化结果是否指向同一个对象。

var a = Singleton.getInstance('sven1');var b = Singleton.getInstance('sven2');// 指向的是唯一实例化的对象console.log(a === b);

返回结果是:true。说明a、b之间是引用关系。

es6实现方式

创建Singleton类。class关键字和静态函数都是es6新增的。

class Singleton { constructor(name) { this.name = name; this.instance = null; } // 构造一个广为人知的接口,供用户对该类进行实例化 static getInstance(name) { if(!this.instance) { this.instance = new Singleton(name); } return this.instance; }}

单例模式应用实例

我们用一个生活中常见的一个场景来说明单例模式的应用。

任意一个网站,点击登录按钮,只会弹出有且仅有一个登录框,即使后面再点击登录按钮,也不会再弹出多一个弹框。这就是单例模式的典型应用。接下来我们实现它。为了注重单例模式的展示,我们把登录框简化吧😜

在页面上设置一个按钮

<button id="loginBtn">登录</button>

为这个按钮添加点击事件

const btn = document.getElementById('loginBtn');btn.addEventListener('click', function() { loginLayer.getInstance();}, false);

我们先给一个初始化方法init,在点击按钮之后,在页面上添加一个框框(权当登录框了)

init() { var div = document.createElement('div'); div.classList.add('login-layer'); div.innerHTML = "我是登录浮窗"; document.body.appendChild(div);}

那么接下来要用单例模式实现,点击按钮出现有且仅有一个浮窗,方法就是在构造函数中创建一个标记,第一次点击时创建一个浮窗,用改变标记的状态,再次点击按钮时,根据标记的状态判断是否要再创建一个浮窗。

上源码:

class loginLayer { constructor() { // 判断页面是否已有浮窗的标记 this.instance = null; this.init(); } init() { var div = document.createElement('div'); div.classList.add('login-layer'); div.innerHTML = "我是登录浮窗"; document.body.appendChild(div); } // 静态方法作为广为人知的接口 static getInstance() { // 根据标记的状态判断是否要再添加浮窗,如果标记不为空就创建一个浮窗 if(!this.instance) { this.instance = new loginLayer(); } return this.instance; }}

当然不要忘记为浮窗添加一个样式,让浮窗显示啦

.login-layer { width: 200px; height: 200px; background-color: rgba(0, 0, 0, .6); text-align: center; line-height: 200px; display: inline-block;}

最后奉上该实例的源码:

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>单例实现登录弹窗</title> <style> .login-layer { width: 200px; height: 200px; background-color: rgba(0, 0, 0, .6); text-align: center; line-height: 200px; display: inline-block; } </style></head><body> <button id="loginBtn">登录</button> <script> const btn = document.getElementById('loginBtn'); btn.addEventListener('click', function() { loginLayer.getInstance(); }, false); class loginLayer { constructor() { this.instance = null; this.init(); } init() { var div = document.createElement('div'); div.classList.add('login-layer'); div.innerHTML = "我是登录浮窗"; document.body.appendChild(div); } static getInstance() { if(!this.instance) { this.instance = new loginLayer(); } return this.instance; } } </script></body></html>

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对的支持。

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章