JavaScript设计模式-单例模式

定义

保证一个类仅有一个实例，并提供一个访问它的全局访问点。

描述

单例模式是一种常见的模式，有一些对象我们往往只需要一个，如果线程池、全局缓存、浏览器中的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修饰符达到相同的目的。

JavaScript设计模式-单例模式

定义

描述

应用

推荐阅读更多精彩内容