JavaScript-单例模式

单例模式是设计模式中最为简单的一种，由名称可以初步感受到它的作用。

此模式会确保一个类只有一个实例，并提供一个它的全局访问点。

下面通过一个简单的代码实例来介绍一下它，代码如下:

<!doctype html>
<html>
<head>
<meta name="author" content="http://www.chajianwo.com/" />
<meta charset="UTF-8" />
<title>js单例模式</title>
<style type="text/css">
div{color:red}
</style>
</head>
<body>
<button id="bt">查看演示</button>
<script type="text/javascript">
var createDiv = (function () {
 var div;
 return function () {
  if (!div) {
   div = document.createElement('div');
   div.innerHTML = '插件窝';
   div.style.display = 'none';
   document.body.appendChild(div);
  }
  return div;
 }
})();
 
document.getElementById('bt').onclick = function () {
 var odiv = createDiv();
 odiv.style.display = 'block'
};
</script>
</body>
 
</html>

无论点击多少次按钮，都会只生成一个div元素，代码还不够好，下面进行一下改造:

<!doctype html>
<html>
<head>
<meta name="author" content="http://www.chajianwo.com/" />
<meta charset="UTF-8" />
<title>js单例模式</title>
<style type="text/css">
div{color:red}
</style>
</head>
<body>
<button id="bt">登录</button>
<script type="text/javascript">
var getSingle = function(fn) {
  var result;
  return function() {
    return result || (result = fn.apply(this, arguments));
  }
}
         
//生成单例函数
var createDiv = getSingle(function() {
  var div = document.createElement('div');
  div.innerHTML = '我是登录弹出窗';
  div.style.display = 'none';
  document.body.appendChild(div);
  return div;
})
         
document.getElementById('bt').onclick = function() {
  var odiv = createLoginLayer();
  odiv.style.display = 'block';
}
</script>
</body>
</html>

将上管理单例的逻辑从原来的代码中抽离出来，封装在getSingle函数内部:

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

创建实例对象职责和管理单例职责分别放置在两个方法里，这两个方法可以独立变化互不影响。