《JavaScript设计模式与开发实践》读书笔记之单例模式

时间：2021-02-28 14:43:09

1、单例模式

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

1.1 传统的单例模式

var Singleton=function(name){

    this.name=name;

}

Singleton.prototype.getName=function(){

    alert(this.name);

}

Singleton.getInstance=(function(){

    var instance=null;

    return function (name) {

        if(!instance){

            instance=new Singleton(name);

        }

        return instance;

    }

})();

var a=Singleton.getInstance('sven1');

var b=Singleton.getInstance('sven2');

alert(a===b);//true

1.2 JavaScript中的单例模式

单例模式的核心是确保只有一个实例，并提供全局访问
JavaScript中，可以把全局变量当成单例来使用
var a={};
以这种方式创建对象a，这个对象a是独一无二的，并且在全局作用域可以被访问
全局变量容易造成命名空间污染，使用命名空间可以减少全局变量的数量

var namespace1={

    a:function(){

        alert(1);

    },

    b:function(){

        alert(2);

    }

};

1.3 应用举例--惰性单例

以点击“登陆”按钮弹出登陆框为例

<html>

    <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>

</html>

上述示例违反了单一职责原则，创建对象和管理单例逻辑耦合在一起了

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';

};

//当需要创建唯一的iframe用于动态加载第三方页面时

var createSingleIframe=getSingle(function () {

    var iframe=document.createElement('iframe');

    document.body.appendChild(iframe);

});

document.getElementById('loginBtn').onclick=function(){

    var loginLayer=createSingleIframe();

    loginLayer.src='http://www.google.com';

};

相关文章