一入前端深似海，從此紅塵是路人系列第七彈之孤獨的劍客-單例模式

單例模式，它猶如一名孤獨的劍客，它是一個只允許被例項化一次的物件。劍客是孤獨的，是高傲的，行走江湖僅憑身上一把鋒利的利劍，不會多攜帶任何東西（節省系統資源）。它有一個劍氣領域，一個只屬於它的空間，別人進不去的空間（名稱空間）。

一、劍域-名稱空間

我們所知道的，每個劍客高手當其拔劍的時候都會有一個自己的劍域，而踏入者，結果只有一個-死。

當單例模式給我們提供了一個名稱空間的時候，它會約束每個人定義的變數，讓每個變數都是“孤立”的，使每個人定義的變數不會產生衝突，這樣每個人都可以井井有條的管理好自己物件上的屬性和方法。

var Qiang = {
  g : function(id){
    return document.getElementById(id);
  },
  css : function(id,key,value){
    // 簡單的一個樣式屬性設定
    this.g(id).style[key] = value;
  }
}

再者就是模組的分明，實際開發當中也是可以用單例模式進行模組的控制。

qiang.dom.addClass            // 新增元素類
qiang.dom.append              // 插入元素
qiang.event.stopPropagation   // 阻止冒泡
qiang.event.preventDefault    // 阻止預設行為
qiang.string.encodeHTML       // 將字串進行html編碼

二、十八般武藝-建立小型程式碼庫

每一個優秀的劍客都有自己招式，而每個招式又都是一層一層的心法進行修煉的。

如上程式碼寫到的，我們在建立自己的小型方法程式碼庫的時候也是可以用單例模式來規範我們自己程式碼庫的各個模組。

var Module = {
  Title : {
    title_level1 : function(){},
    title_level2 : function(){}
    // ...
  },
  Form : {
    form_text   : function(){},
    form_pwd    : function(){},
    form_select : function(){},
    // ...
  },
  Table : {
    table_normal  : function(){},
    table_special : function(){}
    // ...
  },
  // ...
}

三、招式模仿-靜態變數

優秀的劍客不僅僅有自己的招式，還可以在觀看別人的招式後，進行快速的模仿。

我們的JavaScript當中其實是沒有static這類的關鍵字，但很多時候我們又需要這樣的一種變數。JavaScript是靈活多變的，訪問變數的方式很多種，例如定義在全域性中，再就是定義在函式內部，然後在函式內部定義特權方法進行訪問。但要求改變數不能被修改，那麼全域性定義這一種方式肯定是行不通的。那麼我們就可以通過定義在函式內部然後在通過特權方法進行訪問便可以做到了，具體操作如下：

//管理靜態變數
var Conf = (function(){
  // 私有變數
  var conf = {
    MAX_NUM:100,
    MIN_NUM:1,
    COUNT:1000
  }
  // 返回取值器物件
  return {
    // 取值器方法
    get:function(name){
      return conf[name] ? conf[name] : null;
    }
  }
})();

使用方式：

var count = Conf.get(`COUNT`);
console.log(count); //1000

四、慵懶劍客-惰性單例

劍客是孤獨的，也是慵懶的，每個劍客都向往著那種安靜的喝著酒，沐浴在懶懶的陽光中。無需拔劍的時候從不拔劍毀了自己片刻的寧靜。

包括以上的幾種情況，還有一種比較常見的情況便是當單例物件需要做一個延時建立的時候，我們可以通過一種“惰性建立”進行延遲建立。

// 惰性單例
var LazySingle = (function(){
  // 單例例項引用
  var _instance = null;
  // 單例
  function Single(){
    // 這裡定義私有屬性和方法
    return {
      publicMethod:function(){},
      publicProperty:`1.0`
    }
  }
  // 獲取單例物件介面
  return function(){
    // 如果為建立單例將建立單例
    if(!_instance){
      _instance = Single();
    }
    // 返回單例
    return _instance;
  }
})();

單例模式，一名孤獨的劍客，行走在JavaScript這樣的江湖中，它的地位不容小覷！

原文釋出時間為：2016年10月23日
原文作者：qiangdada 

本文來源：開源中國 如需轉載請聯絡原作者