定义
保证一个类仅有一个实例,并提供一个访问它的全局访问点。
描述
单例模式是一种常见的模式,有一些对象我们往往只需要一个,如果线程池、全局缓存、浏览器中的window对象等。在JavaScript开发中,单例模式的用途非常广泛。
应用
要实现一个单例模式,需要用一个变量来标志当前是否已经为某个类创建过对象,如果是,则在下一次获取该类的实例时,直接返回之前创建的对象。
class Singleton {
constructor(name){
this.name = name
}
static getInstance (name) {
if(!this.instance){
this.instance = new Singleton(name)
}
return this.instance
}
}
let single1 = Singleton.getInstance('hello')
let single2 = Singleton.getInstance('world')
console.log(single1) // Singleton {name: "hello"}
console.log(single2) // Singleton {name: "hello"}
开发中有时为元素绑定事件,我们需要事件监听函数只执行一次。比如:我们点击登录按钮时,页面会出现一个登录模态框,这个模态框是唯一的。无论单击多少次登录按钮,这个模态框只会被创建一次,此时就适合用单例模式来创建。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="btn">登录</button>
<script>
let loginModle = function () {
let div = document.createElement('div')
div.innerHTML = '登录成功'
document.body.appendChild(div)
return div
}
let getSingle = function(fn) {
let result
return function () {
return result || (result = fn.apply(this,arguments))
}
}
let btn = document.getElementById('btn')
btn.addEventListener('click',getSingle(loginModle),false)
</script>
</body>
</html>
不管点击多少次,逻辑执行函数loginModle都只会执行一次,我们也可以通过jQuery中的$('div').one()、vue中的one修饰符达到相同的目的。