JavaScript 單例模式

admin發表於2017-05-19
JavaScript單例模式

單例模式是設計模式中最為簡單的一種，由名稱可以初步感受到它的作用。

此模式會確保一個類只有一個例項，並提供一個它的全域性訪問點。

下面通過一個簡單的程式碼例項來介紹一下它，程式碼如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html lang="en">
<head>
<meta name="author" content="http://www.softwhy.com/" />
<meta charset="UTF-8" />
<title>單例模式</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元素，程式碼還不夠好，下面進行一下改造:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html lang="en">
<head>
<meta name="author" content="http://www.softwhy.com/" />
<meta charset="UTF-8" />
<title>單例模式</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函式內部:

[JavaScript] 純文字檢視 複製程式碼
var getSingle=  function(fn) {
    var result;
    return function() {
      return result || (result = fn.apply(this, arguments));
    }
}

建立例項物件職責和管理單例職責分別放置在兩個方法裡，這兩個方法可以獨立變化互不影響。

相關文章