利用ES6实现单例模式及其应用详解
前言
在传统开发工程师眼里，单例就是保证一个类只有一个实例，实现的方法一般是先判断实例存在与否，如果存在直接返回，如果不存在就创建了再返回，这就确保了一个类只有一个实例对象。在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>
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。
相关文章
这篇文章主要为大家详细介绍了js代码如何实现文字截断功能,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-09-09
JS中的THIS和WINDOW.EVENT.SRCELEMENT详解
对于js初学着必须理解this和srcElement的应用，这也是面试中经常考到的。下面我们就通过几个示例来详细了解下2015-05-05
这篇文章主要介绍了JavaScript中实现sprintf、printf函数,这两个函数在大多数编程语言中都有,但JS中却没有,本文介绍在js中实现这两个函数功能,需要的朋友可以参考下2015-01-01
这篇文章主要为大家详细介绍了微信小程序实现无限滚动列表，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-11-11
window.addEventListener是JavaScript中用于添加事件监听器的方法,允许在发生特定事件时执行函数,本文给大家介绍js window.addEventListener 是什么,感兴趣的朋友一起看看吧2024-09-09
这篇文章主要介绍了javascript 事件处理示例分享,需要的朋友可以参考下2014-12-12
为了更直观的体现用户在文本框输入文本时能看到自己输入了多少字，并且有些特殊的要求字数不超过多少，本文给出了具体的实现2014-05-05
在浏览网页时经常会碰到图片延迟加载的情况,它的优势在于提高加载速度，未加载前加载图片占位图，接下来为大家详细介绍下，感兴趣的朋友可以参考下哈2013-03-03
这篇文章主要介绍了详解用async/await来处理异步，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
Echarts中的clear()和dispose()用法实例
这篇文章主要给大家介绍了关于Echarts中clear()和dispose()用法的相关资料,clear和dispose是echarts提供的用于解决内存溢出的方法 ,文中介绍的非常详细,需要的朋友可以参考下2023-10-10
最新评论