JavaScript单例模式

前言

单例模式的定义：保证一个类仅仅有一个实例，并提供一个访问他的全局访问点。
意义：有的时候，一些对象我们仅仅需要一个，比如说线程池、全局缓存、浏览器中的window对象，我们在前端也经常会使用到单例，当我们点击登录按钮的时候，我们会出现一个登录的副创，这个浮窗是唯一的，无论我们点击多少次，这个浮窗仅仅会被创建一次，那么这个button就应该使用单例模式来进行创建。

实现单例模式

什么才叫实现了单例模式呢？就是用一个变量来标志是否已经为某个类创建过对象，如果是的话，在下一次获取该类的实例的时候，返回之前创建的对象。
方案一实现单例：

var Singleton = function (name) {
  this.name = name;
  this.instance = null;
}
Singleton.prototype.getName = function (){
  console.log(this.name);
}
Singleton.getInstance = function (name){
  if(!this.instance){
    this.instance = new Singleton(name);
  }
  return this.instance;
}
var a = Singleton.getInstance('kim');
var b = Singleton.getInstance('Queen');

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

方案二实现单例：

var Singleton = function (name) {
  this.name = name;
};
Singleton.prototype.getName = function (){
  console.log(this.name);
};
Singleton.getInstance = function (name){
  var instance = null;
  return function (name){
    if(!instance){
      instance = new Singleton(name);
    }
    return instance;
  }
}

我们使用Singleton.getInstance获取Singleton唯一的对象，这样的话，的确理解起来比较简单，但是增加了这个类的‘不透明性’，使用这个类的人必须知道这是一个单例类，和之前使用new来获取对象的方式是不一样的，这里要通过Singleton.getInstance 这个方法来获取对象。
这一节我们讲的是最简单的单例方法，但是这样的单例我们几乎用不到的，接下来我们会对单例模式的编码进行改进。

透明的单例模式

我们现在的目标是实现一个‘透明’的单例类，用户可以从这个类中创建对象的时候，我们可以和使用其他类一样，我们使用CreatrDiv单例类，作用是在页面中创建唯一的div节点。

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('kim');
var b = new CreateDiv('Queen');

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

我们在执行的时候做了什么呢？我们为了将instance封装起来，我们使用了一些自执行的匿名函数和闭包，并且让这个匿名函数返回真正的Singleton构造方法。我们观察一下Singleton的构造函数。

  var CreateDiv = function(html){
    if(instance){
      return instance;
    }
    this.html = html;
    this.init();
    return instance = this;
  } ;

在这段代码中CreateDiv负责了两件事情，意思创建对象和执行初始化init的方法，第二件事情是保障只有一个对象，但是现在的代码看起来很诡异，如果有一天我们需要用这个方法来创建很多怎样的div，那么我们就必须改写现在的代码，把控制唯一对象的那部分代码删掉，这样做并不友好。

使用代理实现单例模式

我们对上面的代码进行废物利用，假如我们把负责单例的部分去掉了，那么现在它就会成为一个普通的创建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 );
  };

然后我们通过引入一个代理类proxySingletonCreateDiv:

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

var a = new proxySingletonCreateDiv('kim');
var b = new proxySingletonCreateDiv('Queen');

我们引入代理类的方式，我们同样完成了单例模式的编写，和之前不一样，我们没有把单例的逻辑放在CreateDiv里面，而是将这部分的逻辑放在了代理类proxySingletonCreateDiv中，这样的话，CreateDiv就变成了一个普通类，但是在和代理类组合在一起的时候就可以实现单例模式了。

JavaScript中的单例模式

我们之前在提单例模式的时候，更多的倾向于面向对象的传统语言方面，因为单例模式本来就是从‘类’中创建出来的，但是我们的JavaScript是一个无类的怨言，因此不能生搬硬靠，但是在JavaScript创建对象的方法是非常简单的，我们需要一个‘唯一’的对象的话，不一定非要创建一个‘类’，因为单例模式的核心是：确保只有一个实例，并且提供全局访问。
对于我们来说，全局变量并不是单例模式，但是在js开发中，我们经常把全局对象当做单例来使用

var a = {};

如果a变量中在全局中被声明，我们可以在代码的任何地方来访问这个变量，全局变量提供全局访问是理所当然的，这样就满足了单例模式的两个条件。
但是我们并不赞成这样使用全局变量，因为它很容易造成命名空间的污染，而且JavaScript中的变量很容易被不下心的覆盖掉，所以我们应该尽量减少全局变量的使用。那我们应该怎么办？
使用命名空间
使用命名空间，并不能杜绝全局变量，但是可以减少全局变量的数量。
最简单的放大是使用对象字面量的方式：

var namespace1 = {
  a:function(){
    console.log(1);
  },
  b:function(){
    console.log(2);
  }
};

把a和b都定义为namespace1的属性，减少了变量和全局作用域打交道的几乎，还有，我们也可以动态的程序创建命名空间

var MyApp ={};
MyApp.namespace = function ( name ){
  var parts = name.split('.');
  var current = MyApp;
  for(var i in parts){
    if(!current[parts[i]]){
      current[parts[i]] ={};
    }
    current = current[parts[i]];
  } 
};
MyApp.namespace('kim');
MyApp.namespace('dom.style');

console.log(MyApp)

//上面的代码等价于
var MyApp ={
  kim:{},
  dom:{
    style:{}
  }
}

使用闭包来封装私有变量
这个方法是将一些变量封装在闭包的内部，只暴露一些对外的接口。

var user = (function(){
  var _name = 'kim';
  var _age=18;
  return{
    getUserInfo:function(){
      return _name+'-'+_age;
    }
  }
})();

ps:我们在JavaScript用下划线来约定私有变量_name 和_age

惰性单例

惰性单例：我们在需要的时候才创建对象实例，其实惰性单例才是单例模式的重点，我们在上面的第一个例子中就已经闪现了惰性加载。其中instance实例对象总是在我们调用Singleton.getInstance的时候才会被创建，而不是在页面加载的时候就会被调用。

Singleton.getInstance = (function (name){
  var instance = null;
  return function (name){
    if(!instance){
      instance = new Singleton(name);
    }
    return instance;
  }
})();

让我们现在假设有一个登录的浮窗，在页面中这个浮窗是唯一的，第一种解决方案是在页面加载完成的时候变创建好这个div浮窗，但是这个浮窗的初始状态是隐藏的，当用户点击登录按钮的时候，这个浮窗才会被显示。

<html>
  <body>
    <button id ='loginBtn'>登录</button>
  </body>
  <script>
    var loginLayer =(function(){
      var div = document.createElement('div');
      div.innerHTML = '我是登录浮窗';
      div.style.display = 'none';
      document.body.appendChild(div);
      return div;
    })();
    document.getElementById('loginBtn').onclick = function(){
      loginLayer.style.display = 'block';
    }
  </script>
</html>

但是这样也会有一定的问题，如果我们一直没有点击这个节点，但是这个DOM在页面加载的时候就已经被创建了，造成了不必要的浪费。那我们修改与一下下面的代码。只有在点击按钮的时候，才会创建浮窗节点。

<html>
  <body>
    <button id ='loginBtn'>登录</button>
  </body>
  <script>
    var createLoginLayer = function(){
      var 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>

上面的方法虽然实现了惰性的目的，但是却失去了单例的效果。当我们每一次点击登录按钮的时候，都会创建一个新的登录浮框div，然后按照逻辑，我们每一次点击删除按钮的时候，我们就会将这个节点进行删除，（这里没有实现对删除的按钮的操作），但是像这样的进行增加和删除节点的操作是不合理的，也不是必要的。那么我们怎么能实现单例呢？我们可以增加一个变量来判断我们是否已经创建过登录浮窗。

var createLoginLayer = (function(){
   var div;
   return function(){
    if(!div){
      var div = document.createElement('div');
      div.innerHTML = '我是登录浮窗';
      div.style.display = 'none';
      document.body.appendChild(div);
    }
    return div;
 }
})();

通用的惰性单例

上面我们写了一个简单的惰性单例，但是我们发现它还是存在一些问题：

• 这段代码违反了单一职责原则，创建对象和管理单例的逻辑都放在了createLoginLayer对象内部。
• 如果我们下次需要创建页面唯一的iframe，或是script标签，用来跨域请求数据，就几乎要把createLoginLayer几乎是重新写一遍。

这样的结果并不是我们想要的，所以我们需要把不变的地方隔离出来，先不考虑建立一个div或是一个iframe有多少的差异，管理单例的逻辑是完全可以被抽取出来的，这个逻辑始终是不变的：用一个变量来标识是否创建过这个对象，如果是下次就直接返回这个创建好的对象。

var obj;
if(!obj){
  obj = XXX;
}

现在我们的操作是将单例的逻辑从原来到代码中抽取出来，这些逻辑被封装在getSingle函数的内部，创建对象的方法fn被当成参数传入getSingle函数。

var getSingle = function( fn ){
  var result ;
  return function(){
    return result  || (result  = fn.apply(this, arguments));
  }
};

接下来的重做就是用于创建登录浮窗的方法用参数fn的形式传入到getSingle ，我们不仅可以传入createLoginLayer，还可以传入createScript等。之后再用getSingle 返回一个新的函数，并且用一个变量result来保存fn的计算结果。result变量因为就在闭包中，所以resule永远都不会被销毁。，在以后的请求中，如果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 = createLoginLayer ();
     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= 'www.baidu.com';
}

在上面的例子里面，我们把创建实例对象的职责和管理单例职责分别放在了两个方法中，这两个方法可以相互独立互不影响，当他们链接到一起的时候，就完成了创建唯一实例对象的功能。
这样的单例模式远远不仅仅是创建对象这么简单，我们渲染完一个页面的列表之后，接下来就是给这个列表绑定click事件，如果是通过ajax向列表中追加数据，在使用事件代理的前提下，click事件实际上只要在第一次渲染列表的时候被绑定依稀，但是我们不想去判断当前是否是第一次渲染列表，如果借助jquery，我们通向选择给节点绑定one事件。

var bindEvent = function(){
  $('div').one('click', funvtion(){
    console.log('click');
  });
};
var render = function(){
  console.log('开始渲染')；
  bindEvent();
}

render();
render();
render();

如果使用getSingle函数，也可以达到一样的效果：

var bindEvent = getSingle(function(){
  document.getElementById('div1').onclick = function(){
    console.log('click');
  }
  return true;
});
var render = function(){
  console.log('开始渲染')；
  bindEvent();
}
render();
render();
render();

render和bindEvent分別执行了三次，但是div实际上自卑绑定了一个事件。