javascript设计模式之单例模式

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

单例模式实现起来也非常简单，无非就是用一个变量来标志当前是否已经为某个类创建过对象，如果创建过，则在下一次获取该类的实例时，则返回之前创建的对象。

我们以一个例子为例，来一步一步的实现单例模式，比如：我们在页面上点击按钮的时候，就在页面上插入一个div

var createDiv = function () {
  var div = document.createElement('div');
  div.innerHTML = 'div'
  document.body.appendChild(div)
}

document.querySelector('#button').onclick = function () {
  createDiv();
}

我们发现每点击一次按钮就会去创建一个div元素，这显然是不合理的，所以我们考虑用一个变量去接受创建的div元素，在下次点击按钮的时候直接返回之前创建的div元素。

var divDom;
var createDiv = function () {
  if (divDom) {
    document.body.appendChild(divDom);
    return;  
  }
  divDom = document.createElement('div');
  divDom.innerHTML = 'div'
  document.body.appendChild(divDom)
}

document.querySelector('#button').onclick = function () {
  createDiv();
}

上面的代码实际上已经是一个单例模式了，但是我们会发现这个单例模式还有一点点的小问题，那就是创建了全局变量divDom，这个变量存在被修改的风险，因此我们在进一步修改代码，用一个闭包来将变量divDom包起来，如下：

var createDiv = function () {
  var divDom;
  return function () {
    if (divDom) document.body.appendChild(divDom);
    divDom = document.createElement('div');
    divDom.innerHTML = 'div'
    document.body.appendChild(divDom)
  }
}()