javascript设计模式--单例模式

javascript单例模式总结

1.什么是单例模式?

单例模式的定义是:一个类仅有一个实例,并且可以在全局访问
在日常开发中,单例模式的使用十分广泛。例如开发登录浮窗,我们无论点击登录按钮多少次,浮窗都只会创建一次。
这时,浮窗就很适合使用单例模式来创建。

2.实现单例模式

var CreatePopbox = function(html){
    this.html = html;
    this._init();
};

CreatePopbox.prototype._init = function(){
    this.div = document.createElement('div');
    this.div.innerHTML = this.html;
    this.div.style.display = 'none';
    document.body.appendChild(this.div);

};

CreatePopbox.prototype.show = function(){
    this.div.style.display = 'block';
};

CreatePopbox.prototype.hide = function(){
    this.div.style.display = 'none';
};

//通过代理函数达到单例模式的效果

var proxysingleCreatePopbox = (function(){
    var instance;
    return function(html){
        if(!instance){
            instance = new CreatePopbox(html);
        }
        return instance;
    }
})();


//创建CreatePopbox:

var a = new proxysingleCreatePopbox("this is a");
var b = new proxysingleCreatePopbox("this is b");

console.log(a === b);  //true

可以看到,a和b都指向了同一个实例,执行new proxysingleCreatePopbox("this is b") 时,并不会重新生成一个新的CreatePopbox
这符合了单例模式的核心:确保实例只有一个

通过以上例子,我们已经了解单例模式的实现方式,但还有一些缺陷:

创建对象和单例管理的逻辑都合在proxysingleCreatePopbox里边,当需要创建其他单例时,只能把proxysingleCreatePopbox拷贝一次。

因此,我们需要把代码再改造一下,把不变的部分隔离出来。

//
var getSingle = function(fn){
  var singleObj;
  return function(obj){
    if(!singleObj){
      singleObj = new fn(obj);
    }
    return singleObj;
  }
}



var CreatePopbox = function(opation){
  this.html = opation.html;
  this._init();
};

CreatePopbox.prototype._init = function(){
  this.div = document.createElement('div');
  this.div.innerHTML = this.html;
  document.body.appendChild(this.div);
};

var singlePopbox = getSingle(CreatePopbox);

var a = new singlePopbox({html:"this is a"});

//创建一个新的单例

var CreateTipbox = function(opation){
  this.div = document.createElement('div');
  this.div.style.color = opation.color;
  this.div.innerHTML = opation.html;
  document.body.appendChild(this.div);
} 

//使用getSingle管理
var singleTipbox = getSingle(CreateTipbox);
var b = new singleTipbox({html:"this is b",color:"#f00"});

原文链接:javascript设计模式--单例模式

    原文作者:设计模式
    原文地址: https://segmentfault.com/a/1190000010019122
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注