javascript 设计模式(单例模式) #32

wl05 · 2019-05-29T02:25:23Z

概念

单例模式的概念其实很简单，保证一个类只有一个实例，同时提供一个可以全局访问这个实例的访问点。这里我们理解一下单例模式的两个要点：

只有一个实例；
全局可访问。

实现

基于概念中的两个要点，我们有多种方式来实现单例模式。

1. 命名空间

var singletonPatternNamepace = {
    name: "Ant",
    age: 25
}

这其实就是一个最简单的单例模式了。

2. 缓存实例

我们可以通过构造函数创建实例，针对单例，如果我们是第一次创建实例我们可以把这个实例通过变量缓存起来，第二次调用构造函数时判断缓存是否存在，存在则直接返回缓存的实例。

function SingletonPattern(name){
    this.name = name
}
SingletonPattern.getInstance = (function(){
    var instance
    return function(name){
        if(instance) {
            return instance
        } else {
            instance = new SingletonPattern(name)
            return instance
        }
    }
})()

var a = SingletonPattern.getInstance('a')
var b = SingletonPattern.getInstance('b')
console.log(a === b) // true

3. 惰性单例

惰性单例的意思顾名思义，就是在需要的时候我们再创建实例，有时候有些实例在用户进入页面时候并不需要，可能需要用户的某些操作才会用到相应的实例。

例2其实就是是一个惰性单例的例子。这里再举一个例子，例如我们想实现在输入框下面实时显示输入的内容，这里我们需要创建dom来渲染输入的内容，我们可以在输入框第一次输入的时候进行dom的创建，而后我们可以利用这个缓存。

<!DOCTYPE html>
<html>

<body>
    <input id="input" />
</body>
<script>
    // 我们可以把创建单例的逻辑抽出来
    function singletonPattern(fn) {
        var temp
        return function () {
            return temp || (temp = fn.apply(this, arguments))
        }
    }
    // 创建dom用于渲染输入内容
    function createDiv() {
        var div = document.createElement('div')
        document.body.appendChild(div)
        return div
    }
    var createSingletonDiv = singletonPattern(createDiv)

    document.getElementById('input').addEventListener('input', function (e) {
        var loginLayer = createSingletonDiv() // createSingletonDiv在被调用时回去判断temp实例是否已经存在，没有创建有则直接使用
        loginLayer.innerText = e.target.value
    }, false)
</script>

</html>

参考资料

JavaScript设计模式与开发实践-第四章-单例模式
深入理解JavaScript系列（25）：设计模式之单例模式

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

javascript 设计模式(单例模式) #32

javascript 设计模式(单例模式) #32

wl05 commented May 29, 2019 •

edited

Loading

javascript 设计模式(单例模式) #32

javascript 设计模式(单例模式) #32

Comments

wl05 commented May 29, 2019 • edited Loading

概念

实现

1. 命名空间

2. 缓存实例

3. 惰性单例

参考资料

wl05 commented May 29, 2019 •

edited

Loading