JavaScript设计模式——单例模式

    单例模式的定义是:保证一个类仅有一个实例,并提供一个访问它的全局访问点。

    单例模式是一种常用的模式,有一些对象我们往往只需要一个,比如线程池、全局缓存、浏览器中的 window 对象等。在JavaScript 开发中,单例模式的用途同样非常广泛。试想一下,当我们单击登录按钮的时候,页面中会出现一个登录浮窗,而这个登录浮窗是唯一的,无论单击多少次登录按钮,这个浮窗都只会被创建一次,那么这个登录浮窗就适合用单例模式来创建。

    JavaScript 其实是一门无类(class-free)语言,也正因为如此,生搬单例模式的概念并无意义。在 JavaScript 中创建对象的方法非常简单,既然我们只需要一个“唯一”的对象,为什么要为它先创建一个“类”呢?这无异于穿棉衣洗澡,传统的单例模式实现在JavaScript 中并不适用。

    单例模式的核心是确保只有一个实例,并提供全局访问。

惰性单例

    惰性单例指的是在需要的时候才创建对象实例。惰性单例是单例模式的重点,这种技术在实际开发中非常有用,有用的程度可能超出了我们的想象,实例对象总是在我们调用 Singleton.getInstance 的时候才被创建,而不是在页面加载好的时候就创建,代码如下:

Singleton.getInstance = (function(){

    var instance = null;

    return function( name ){

        if ( !instance ){

            instance = new Singleton( name );

        }

        return instance;

    }

})();

通用的惰性单例

   假设我们是 WebQQ 的开发人员(网址是web.qq.com),当点击左边导航里 QQ 头像时,会弹出一个登录浮窗,很明显这个浮窗在页面里总是唯一的,不可能出现同时存在两个登录窗口的情况。

WebQQ

    我们把创建实例对象的职责和管理单例的职责分别放置在两个方法里,这两个方法可以独立变化而互不影响,当它们连接在一起的时候,就完成了创建唯一实例对象的功能

var getSingle = function( fn ){     //  fn用于创建实例对象的职责

    var result;

    return function(){

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

    }

};

    将用于创建登录浮窗的方法用参数 fn 的形式传入 getSingle,我们不仅可以传入createLoginLayer,还能传入 createScript、createIframe、createXhr 等。之后再让 getSingle 返回一个新的函数,并且用一个变量 result 来保存 fn 的计算结果。result 变量因为身在闭包中,它永远不会被销毁。在将来的请求中,如果 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 = createSingleLoginLayer();

    loginLayer.style.display = 'block';

};

下面我们再试试创建唯一的 iframe 用于动态加载第三方页面:

var createSingleIframe = getSingle( function(){

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

    document.body.appendChild( iframe );

    return iframe;

});

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

    var loginLayer = createSingleIframe();

    loginLayer.src = 'http://baidu.com';

};

    在这个例子中,我们把创建实例对象的职责和管理单例的职责分别放置在两个方法里,这两个方法可以独立变化而互不影响,当它们连接在一起的时候,就完成了创建唯一实例对象的功能,看起来是一件挺奇妙的事情。

                                                          ——摘自《JavaScript设计模式与开发实践 》

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。