javascript設計模式享元模式

享元模式不同於一般的設計模式，它主要用來優化程式的效能，它最適合解決大量類似的物件而產生的效能問題。享元模式通過分析應用程式的物件，將其解析為內在資料和外在資料，減少物件的數量，從而提高應用程式的效能。

基本知識:

享元模式通過共享大量的細粒度的物件，減少物件的數量，從而減少物件的記憶體，提高應用程式的效能。其基本思想就是分解現有類似物件的組成，將其展開為可以共享的內在資料和不可共享的外在資料，我們稱內在資料的物件為享元物件。通常還需要一個工廠類來維護內在資料。

在js中，享元模式主要有下面幾個角色組成：

（1）客戶端：用來呼叫享元工廠來獲取內在資料的類，通常是應用程式所需的物件。

（2）享元工廠：用來維護享後設資料的類。

（3）享元類：保持內在資料的類。

享元模式的實現和應用:

一般實現:

我們舉個例子進行說明：蘋果公司批量生產iphone，iphone的大部分資料比如型號，螢幕都是一樣，少數部分資料比如記憶體有分16G,32G等。未使用享元模式前，我們寫程式碼如下：

[JavaScript] 純文字檢視 複製程式碼
function Iphone(model, screen, memory, SN) {
  this. model  = model;
  this.screen = screen;
  this.memory = memory;
  this.SN = SN;
}
var phones = [];
for (var i = 0; i < 1000000; i++) {
  var memory = i % 2 == 0 ? 16 : 32;
  phones.push(new Iphone("iphone6s", 5.0, memory, i));
}

這段程式碼中，建立了一百萬個iphone，每個iphone都獨立申請一個記憶體。但是我們仔細觀察可以看到，大部分iphone都是類似的，只是記憶體和序列號不一樣，如果是一個對效能要求比較高的程式，我們就要考慮去優化它。

大量相似物件的程式，我們就可以考慮用享元模式去優化它，我們分析出大部分的iphone的型號，螢幕，記憶體都是一樣的，那這部分資料就可以公用，就是享元模式中的內在資料，定義享元類如下：

[JavaScript] 純文字檢視 複製程式碼
function IphoneFlyweight(model, screen, memory) {
  this.model = model;
  this.screen = screen;
  this.memory = memory;
}

我們定義了iphone的享元類，其中包含型號，螢幕和記憶體三個資料。我們還需要一個享元工廠來維護這些資料：

[JavaScript] 純文字檢視 複製程式碼
var flyweightFactory = (function () {
  var iphones = {};
  return {
    get: function (model, screen, memory) {
      var key = model + screen + memory;
      if (!iphones[key]) {
        iphones[key] = new IphoneFlyweight(model, screen, memory);
      }
      return iphones[key];
    }
  };
})();

在這個工廠中，我們定義了一個字典來儲存享元物件，提供一個方法根據引數來獲取享元物件，如果字典中有則直接返回，沒有則建立一個返回。

接著我們建立一個客戶端類，這個客戶端類就是修改自iphone類：

[JavaScript] 純文字檢視 複製程式碼
function Iphone(model, screen, memory, SN) {
  this.flyweight = flyweightFactory.get(model, screen, memory);
  this.SN = SN;
}

然後我們依舊像之間那樣生成多個iphone

[JavaScript] 純文字檢視 複製程式碼
var phones = [];
for (var i = 0; i < 1000000; i++) {
  var memory = i % 2 == 0 ? 16 : 32;
  phones.push(new Iphone("iphone6s", 5.0, memory, i));
}
console.log(phones);

這裡的關鍵就在於Iphone建構函式裡面的this.flyweight = flyweightFactory.get(model, screen, memory)。這句程式碼通過享元工廠去獲取享後設資料，而在享元工廠裡面，如果已經存在相同資料的物件則會直接返回物件，多個iphone物件共享這部分相同的資料，所以原本類似的資料已經大大減少，減少的記憶體的佔用。

享元模式在DOM中的應用:

享元模式的一個典型應用就是DOM事件操作，DOM事件機制分成事件冒泡和事件捕獲。我們簡單介紹一下這兩者：

事件冒泡：繫結的事件從最裡層的元素開始觸發，然後冒泡到最外層

事件捕獲：繫結的事件從最外層的元素開始觸發，然後傳到最裡層

假設我們HTML中有一個選單列表

[HTML] 純文字檢視 複製程式碼
<ul class="menu">
  <li class="item">選項1</li>
  <li class="item">選項2</li>
  <li class="item">選項3</li>
  <li class="item">選項4</li>
  <li class="item">選項5</li>
  <li class="item">選項6</li>
</ul>

點選選單項，進行相應的操作，我們通過jQuery來繫結事件，一般會這麼做：

[JavaScript] 純文字檢視 複製程式碼
$(".item").on("click", function () {
  console.log($(this).text());
})

給每個列表項繫結事件，點選輸出相應的文字。這樣看暫時沒有什麼問題，但是如果是一個很長的列表，尤其是在移動端特別長的列表時，就會有效能問題，因為每個項都繫結了事件，都佔用了記憶體。但是這些事件處理程式其實都是很類似的，我們就要對其優化。

[JavaScript] 純文字檢視 複製程式碼
$(".menu").on("click", ".item", function () {
  console.log($(this).text());
})

通過這種方式進行事件繫結，可以減少事件處理程式的數量，這種方式叫做事件委託，也是運用了享元模式的原理。事件處理程式是公用的內在部分，每個選單項各自的文字就是外在部分。我們簡單說下事件委託的原理：點選選單項，事件會從li元素冒泡到ul元素，我們繫結事件到ul上，實際上就繫結了一個事件，然後通過事件引數event裡面的target來判斷點選的具體是哪一個元素，比如低階第一個li元素，event.target就是li，這樣就能拿到具體的點選元素了，就可以根據不同元素進行不同的處理。

總結:

享元模式是一種優化程式效能的手段，通過共享公用資料來減少物件數量以達到優化程式的手段。享元模式適用於擁有大量類似物件並且對效能有要求的場景。因為享元模式需要分離內部和外部資料，增加了程式的邏輯複雜性，建議對效能有要求的時候才使用享元模式。