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

單例模式,它猶如一名孤獨的劍客,它是一個只容許被實例化一次的對象。劍客是孤獨的,是高傲的,行走江湖僅憑身上一把鋒利的利劍,不會多攜帶任何東西(節省系統資源)。它有一個劍氣領域,一個只屬於它的空間,別人進不去的空間(命名空間)。javascript

1、劍域-命名空間css

咱們所知道的,每一個劍客高手當其拔劍的時候都會有一個本身的劍域,而踏入者,結果只有一個-死。html

當單例模式給咱們提供了一個命名空間的時候,它會約束每一個人定義的變量,讓每一個變量都是「孤立」的,使每一個人定義的變量不會產生衝突,這樣每一個人均可以層次分明的管理好本身對象上的屬性和方法。java

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

再者就是模塊的分明,實際開發當中也是能夠用單例模式進行模塊的控制。app

qiang.dom.addClass            // 添加元素類
qiang.dom.append              // 插入元素
qiang.event.stopPropagation   // 阻止冒泡
qiang.event.preventDefault    // 阻止默認行爲
qiang.string.encodeHTML       // 將字符串進行html編碼

2、十八般武藝-建立小型代碼庫dom

每個優秀的劍客都有本身招式,而每一個招式又都是一層一層的心法進行修煉的。函數

如上代碼寫到的,咱們在建立本身的小型方法代碼庫的時候也是能夠用單例模式來規範咱們本身代碼庫的各個模塊。this

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() {}
    // ...
  },
  // ...
}

3、招式模仿-靜態變量編碼

優秀的劍客不單單有本身的招式,還能夠在觀看別人的招式後,進行快速的模仿。code

咱們的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


4、慵懶劍客-惰性單例

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

包括以上的幾種狀況,還有一種比較常見的狀況即是當單例對象須要作一個延時建立的時候,咱們能夠經過一種「惰性建立」進行延遲建立。

// 惰性單例
var LazySingle = (function() {
  // 單例實例引用
  var _instance = null
  // 單例
  function Single () {
    // 這裏定義私有屬性和方法
    return {
      publicMethod: function() {},
      publicProperty: '1.0'
    }
  }
  // 獲取單例對象接口
  return function() {
    // 若是爲建立單例將建立單例
    if(!_instance) {
      _instance = Single()
    }
    // 返回單例
    return _instance
  }
})()

 

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

相關文章
相關標籤/搜索