javascript設計模式單例模式簡單介紹

本章節簡單的介紹一下js設計模式的中比較簡單的一個，單例模式。

所謂的單例模式就是建立一個類的唯一物件例項，不過在當前（以後不敢保證）的javascript中，並沒有"類"這個概念，在很多其他介紹js單例模式的文章中，會將{}物件當做一個單例，這也是很有道理的，不過建立物件的方式有多種多樣，下面來結合例項介紹一個比較常見功能的單例模式的使用。

點選按鈕彈出一個遮罩層效果，這個比較常見，比如javascript實現的點選彈出半透明遮罩層效果一章節，當然並不是說明這個例子中就應用了單例模式。下面通過簡單的程式碼形式來說明一下如何在實現這樣的效果中使用單例模式，先看一段程式碼:

[JavaScript] 純文字檢視 複製程式碼
var createMask=function(){
  return document.body.appendChild(document.createElement(div));
}
$('button').click(function(){
  var mask=createMask();
  mask.show();
})

特別說明:程式碼都是縮略形式，僅僅是演示一下如何實現，不是所有程式碼。

程式碼每點選一次按鈕都會建立一個新的div元素，儘管我們可以再關閉遮罩層的時候移除這個div，也顯然不符合要求。

程式碼修改如下:

[JavaScript] 純文字檢視 複製程式碼
var mask=document.body.appendChild(document.createElement('div'));
$('button').click(function(){
  mask.show();
})

上面的程式碼首先會在全域性作用域建立一個div元素，雖然不用每點選按鈕都會建立一次div元素，但是有可能這個遮罩層你永遠不會使用，這是不是有點耗費效能的，大家知道dom操作是很消耗效能的，能省一點是一點，程式碼修改如下:

[JavaScript] 純文字檢視 複製程式碼
var mask;
var createMask=function(){
  if(mask) return mask;
  else{
    mask=document,body.appendChild(document.createElement(div));
    return mask;
  }
}

上面的程式碼雖然得到很大改進，div元素會在需要的時候才會建立，並且不會重複建立，但是變數mask是一個全域性變數，這並不是安全的措施，尤其是在多人協作的專案中更是如此，程式碼再進行一下修改:

[JavaScript] 純文字檢視 複製程式碼
var createMask=function(){
  var mask;
  return function(){
    return mask || (mask=document.body.appendChild(document.createElement('div')))
  }
}()

上面的程式碼就比較科學，單例模式就是如此簡單。