《javascript设计模式与开放实践》学习惰性单例模式

Posted 2020-08-11

在JS中可以使用代理来实现单例模式。如创建唯一DIV的场景：

 var CreateDiv=function (html) {
        this.html=html;
        this.init();
    }
    CreateDiv.prototype.init=function () {
        var div=document.createElement(‘div‘);
        div.innerHTML=this.html;
        document.body.appendChild(div);
    }

    var ProxySingleCreateDiv=(function () {
        var instance;
        return function (html) {
            if(!instance){
                instance=new CreateDiv(html);
            }
            return instance;
        }
    })();

    var a=new ProxySingleCreateDiv(‘sven1‘);
    var b=new ProxySingleCreateDiv(‘sven2‘);

通过代理ProxySingleCreateDiv实现了创建唯一Div。它的好处就是创建Div的函数CreateDiv并不需要管是否曾经创建过该对象，一切业务逻辑交给代理来处理。

模拟这样的场景，如果创建Div的时候不是页面加载的时候预先创建好，而是点击某个button才进行创建

     var getSingle=function (fn) {
        var result;
        return function () {
            return result||(result=fn.apply(this,arguments));//判断result是否为空
        }
    };
    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=new createSingleLoginLayer();
        loginLayer.style.display=‘block‘;
    }

这代代码最核心的就是用到了getSingle方法，里面定义的result因为在闭包中，不会被销毁。