资讯专栏INFORMATION COLUMN

JavaScript设计模式--单例模式

canopus4u / 1732人阅读

摘要:的构造函数实际上负责了两件事情。有一个缺点,假如我们某天需要利用这个类,在页面中创建千千万万个,即要这个类从单例类变成一个普通的可产生多个实例的类,那我们就要改写构造函数,把控制创建唯一对象的那一段去掉,这样会给我们带来不必要的麻烦。

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

单例模式是一种常用的模式,有一些对象我们往往只需要一个,比如线程池、全局缓存、浏览器中的window对象等。当我们创建的对象只会被创建一次时,这个时候就适合用单例模式来创建,因为当我们点击登录按钮的时候,页面会出现一个悬浮窗,而这个悬浮窗是唯一的,无论单击多少次登录按钮,这个只会被创建一次。

实现单例模式

实现一个标准的单例模式,用一个变量来标志当前是否已经为某个类创建过对象,如果是,则在下一次获取该类的实例时,直接返回之前创建的对象。代码如下:
var Singleton = function( name ){
    this.name = name;
    this.instance = null;
};
Singleton.prototype.getName = function(){
    alert( this.name );
};
Singleton.getIstance = function( name ){
    if( !instance ){
        this.instance = new Singleton( name );
    }
    return this.instance;
};

var a = Singleton.getInstance( "tom" );
var b = Singleton.getInstance( "sun" );

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

我们通过Singleton.getInstance来获取Singleton类的唯一对象,简单,但有一个问题,就是增加了这个类的“不透明性”,Singleton类的使用者必须知道这是一个单例类,跟以往通过new XXX的方式来获取对象不同,这里偏要使用Singleton.getInstance来获取对象。

透明的单例模式
实现一个“透明”的单例类,可以是用户从这个类中创建对象的时候,可以像使用其他普通函数一样。

var createDiv = ( function(){
    var instance;
    var createDiv = function( html ){
        if( instance ){
            return instance;
        }
        this.html = html;
        this.init();
        return instance = this;
    };
    createDiv.prototype.init = function(){
        var div = document.createElement( "div" );
        div.innerHTML = this.html;
        document.body.appendChild( div );
    }
    return createDiv;
})();

var a = new createDiv("tom");
var b = new createDiv("sun");

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

createDiv的构造函数实际上负责了两件事情。第一是创建对象和执行初始化init方法,第二个是保证只有一个对象。有一个缺点,假如我们某天需要利用这个类,在页面中创建千千万万个div,即要这个类从单例类变成一个普通的可产生多个实例的类,那我们就要改写createDiv构造函数,把控制创建唯一对象的那一段去掉,这样会给我们带来不必要的麻烦。

代理类实现单例模式
我们现在通过代理类来解决透明单例模式提到的问题。
通过引入代理类的方式,把负责管理单例的逻辑移到了代理类proxySingDivCreateDiv中,这样,createDiv就变成了一个普通类,它跟代理类组合起来可以实现单例模式的效果。

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 proxySingletonCreateDiv = (function(){
    var instance;
    return function( html ){
        if(!instance){
            instance = new createDiv( html );
        }
        return instance;
    }
})();

var a = new proxySingletonCreateDiv( "tom" );
var b = new proxySingletonCreateDiv( "sun" );

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/88918.html

相关文章

  • JavaScript设计模式-第一部分:单例模式、组合模式和外观模式

    摘要:但是,这并不是采用单例的唯一原因。使用命名空间单例模式也被称为模块设计模式。函数内部声明了一些局部函数和或变量。紧随函数声明放置即可立即执行外部函数,并将所得的对象文字费赔给变量。 JavaScript设计模式-第一部分:单例模式、组合模式和外观模式 设计模式是一些可靠的编程方式,有助于保证代码更加易于维护、扩展及分离,所有设计模式在创建大型JavaScript应用程序时均不可或缺 单...

    betacat 评论0 收藏0
  • JavaScript设计模式单例模式

    摘要:此时我们创建的对象内保存静态变量通过取值器访问,最后将这个对象作为一个单例放在全局空间里面作为静态变量单例对象供他人使用。 单例模式 又被称为单体模式,是只允许实例化一次的对象类。有时我们也用一个对象来规划一个命名空间,井井有条的管理对象上面的属性和方法。 传统的面向对象语言中单例模式的实现,均是单例对象从类中创建而来,在以类为中心的语言中,这是很常见的做法。如果需要某个对象,就必须先...

    zhaot 评论0 收藏0
  • JavaScript设计模式----单例模式

    摘要:不符合设计模式中的单一职责的概念。引入代理实现单例模式引入代理实现单例模式的特点我们负责管理单例的逻辑移到了代理类中。的单例模式对比在以上的代码中实现的单例模式都混入了传统面向对象语言的特点。 声明:这个系列为阅读《JavaScript设计模式与开发实践》 ----曾探@著一书的读书笔记 1.单例模式的特点和定义 保证一个类仅有一个实例,并且提供一个访问它的全局访问点。 2.传统面向对...

    selfimpr 评论0 收藏0
  • JavaScript 设计模式(一):单例模式

    摘要:停更许久,近期计划更新设计模式系列。单例模式是创建型设计模式的一种。虽然它不是正规的单例模式,但不可否认确实具备类单例模式的特点。适用场景单例模式的特点,意图解决维护一个全局实例对象。 停更许久,近期计划更新:设计模式系列。 showImg(https://segmentfault.com/img/bVbt7uw?w=800&h=600); 单例模式:限制类实例化次数只能一次,一个类只...

    xialong 评论0 收藏0
  • JavaScript设计模式与开发实践 | 04 - 单例模式

    摘要:观察构造函数的代码,该构造函数实际上负责了两件事情第一是创建对象和执行初始化方法,第二是保证只有一个对象。惰性单例在实际开发中非常有用,是单例模式的重点。 单例模式 单例模式的定义是: 保证一个类仅有一个实例,并提供一个访问它的全局访问点。 单例模式是一种常用的模式,有一些对象我们往往只需要一个,比如线程池、全局缓存、浏览器的window对象等。例如,当我们点击登录按钮时,页面会弹出一...

    awkj 评论0 收藏0
  • 再遇设计模式JavaScript

    摘要:在面向对象的语言中,比如,等,单例模式通常是定义类时将构造函数设为,保证对象不能在外部被出来,同时给类定义一个静态的方法,用来获取或者创建这个唯一的实例。 万事开头难,作为正经历菜鸟赛季的前端player,已经忘记第一次告诉自己要写一些东西出来是多久以的事情了。。。如果,你也和我一样,那就像我一样,从现在开始,从看到这篇文章开始,打开电脑,敲下你的第一篇文章(或者任何形式的文字)吧。 ...

    Clect 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<