javascript单例

最新推荐文章于 2024-02-07 21:27:33 发布

辛丙亮

最新推荐文章于 2024-02-07 21:27:33 发布

阅读量394

点赞数

分类专栏：前端文章标签： javascript 单例

本文链接：https://blog.csdn.net/qq_22533095/article/details/52218666

版权

前端专栏收录该内容

23 篇文章 0 订阅

订阅专栏

javascript单例

单例模式是指，一个类仅有一个实例，并提供一个访问它的全局访问点。

一般单例写法

var Singleton = function (name) {
    this.name = name;
    this.instance = null;
};

Singleton.prototype.getName= function(){
    console.log(this.name);
};

Singleton.getInstance = function (name) {
    if(!this.instance){
        this.instance = new Singleton(name);
    }
    return this.instance;
};

var a = Singleton.getInstance('a');
var b = Singleton.getInstance('b');
console.log(a === b);

上一种写法的问题是，对象能被任意修改，对象存在被破坏的风险。保护对象我们当然想起的就是使用闭包

var Singleton = function (name) {
    this.name = name;
};

Singleton.prototype.getName= function(){
    console.log(this.name);
};

Singleton.getInstance = (function () {
    var instance = null;
    return function (name) {
        if(!instance){
            instance = new Singleton(name);
        }
        return instance;
    }
})();


var a = Singleton.getInstance('a');
var b = Singleton.getInstance('b');
console.log(a === b);

利用javascript语言特性创建单例

实际上以上单例模式是行的通的，但是实际上javascript天然支持单例，在构造函数中直接返回对象精可以创建单例。

var User = (function () {
    var __name = 'xin',__age = 29;

    return {
        getInfo: function () {
            return __name + '-' + __age;
        },
        setName: function (name) {
            return __name = name;
        }
    };
})();

console.log(User.getInfo());
User.setName('bing');
console.log(User.getInfo());

惰性单例

<body>
    <button id="loginBtn">登录</button>
</body>
<script>
    var createLoginLayer = (function () {
        var div;

        return function () {
            if (!div){
                div = document.createElement('div');
                div.innerHTML = '这是登录悬浮窗';
                div.style.display = 'none';
                document.body.appendChild(div);
            }
            return div;
        }
    })();

    document.getElementById('loginBtn').onclick = function () {
        var loginLayer = createLoginLayer();
        loginLayer.style.display = 'block';
    }
</script>

通用惰性单例

通用的惰性单例，使职责单一

<body>
    <button id="loginBtn">登录</button>
</body>
<script>
    /*该单例是通用的并可以复用*/
    var getSingle = function (fn) {
        var result;

        return function () {
            return result || (result = fn.apply(this, arguments));
        }
    };

    //被传递使用的函数
    var createLoginLayer = function () {
        var div = document.createElement('div');
        div.innerHTML = "只是悬浮窗口";
        div.style.display = 'none';
        document.body.appendChild(div);
        return div;
    };

    var createSingleLoginLayer = getSingle(createLoginLayer);

    document.getElementById('loginBtn').onclick = function () {
        var loginLayer = createSingleLoginLayer();
        loginLayer.style.display = 'block';
    }
</script>