設計模式中的facade外觀模式在JavaScript開發中的運用（進階篇）

外觀模式透過引入一個外觀角色來簡化客戶端與子系統之間的交互,為複雜的子系統呼叫提供一個統一的入口,降低子系統與客戶端的耦合,接下來就來看設計模式中的facade外觀模式在JavaScript開發中的運用

概念

外觀模式(門面模式)，是相對簡單而又無所不在的模式。外觀模式提供一個高層接口，這個接口使得客戶端或子系統更方便呼叫。

外觀模式並不是適配器模式，適配器模式是一種包裝器，用來對介面進行適配器以便在不相容系統中使用它。而建立外觀元素則是圖很方便。它並不用於達到需要特定介面的客戶系統打交道這個目的，而是用於提供一個簡化的介面。

JavaScript程式碼範例

用一段再簡單不過的程式碼來表示

var getName = function(){
 return ''svenzeng"
}
var getSex = function(){
  return 'man'
}

如果你需要分別呼叫getName和getSex函數. 那可以用一個更高層的介面getUserInfo來呼叫.

var getUserInfo = function(){
 var info = a() + b();
 return info;
}

也許你會問為什麼一開始不把getName和getSex的程式碼寫到一起, 比如這樣

var getNameAndSex = function(){
 return 'svenzeng" + "man";
}

答案是顯而易見的，飯堂的炒菜師傅不會因為你預定了一份燒鴨和一份高麗菜就把這兩樣菜炒在一個鍋子裡。他更願意提供你一個燒鴨飯套餐。同樣在程式設計中，我們需要保證函數或物件盡可能的處在一個合理粒度，畢竟不是每個人喜歡吃燒鴨的同時又剛好喜歡吃白菜。
外觀模式還有一個好處是可以對使用者隱藏真正的實作細節，使用者只關心最高層的介面。例如在燒鴨飯套餐的故事中，你並不在乎師傅是先做燒鴨還是先炒高麗菜，你也不關心那隻鴨子是在哪裡成長的。
最後寫個我們都用過的外觀模式範例

var stopEvent = function( e ){  //同时阻止事件默认行为和冒泡
 e.stopPropagation();
 e.preventDefault();
}

我知道外觀模式的概念很容易掌握，你都不一定需要一個JavaScript程式碼的例子，但是總有些人更在乎程式碼，會覺得那樣才比較容易理解。更何況，沒有程式碼範例的JavaScript文章根本就不具說服力，就應該從網路上刪除。我們從一個簡單的事件監聽器的例子開始。大家都知道要新增一個事件監聽器並不是一件容易的事，除非只想讓程式碼運作在少數幾個瀏覽器上。你不得不測試很多方法以確保針對不同瀏覽器的程式碼都能正常運作。在這個程式碼範例中我們只是把特性偵測加入到這個方法中：

function addEvent(element, type, func) {
  if (window.addEventListener) {
    element.addEventListener(type, func, false);
  }
  else if (window.attachEvent) {
    element.attachEvent('on'+type, func);
  }
  else {
    element['on'+type] = func;
  }
}

簡單吧！我真希望我可以不用寫那些不必要的程式碼，讓它們越簡單越好，但是如果真是這樣就沒什麼意思了，你也不會想讀下去了，對吧？所以我不這麼認為，我想我要給你看點更複雜的東西。我只是想說，你的程式碼原本看起來會有些像下面這樣：

var foo = document.getElementById('foo');
  foo.style.color = 'red';
  foo.style.width = '150px';

var bar = document.getElementById('bar');
  bar.style.color = 'red';
  bar.style.width = '150px';

var baz = document.getElementById('baz');
  baz.style.color = 'red';
  baz.style.width = '150px';

太蹩腳了！你對每個元素做了一模一樣的事！我認為我們可以讓它變得更簡單點：

function setStyle(elements, property, value) {
  for (var i=0, length = elements.length; i < length; i++) {
    document.getElementById(elements[i]).style[property] = value;
  }
}

// 现在你可以这么写：
setStyle([&#39;foo&#39;, &#39;bar&#39;, &#39;baz&#39;], &#39;color&#39;, &#39;red&#39;);
setStyle([&#39;foo&#39;, &#39;bar&#39;, &#39;baz&#39;], &#39;width&#39;, &#39;150px&#39;);

是不是覺得咱們NB壞了？你快算了吧！咱們可是JavaScript程式設計師呀！能不能用點腦子，來點真格的。也許我們可以只呼叫一次就能設定所有的樣式。看這個：

function setStyles(elements, styles) {
  for (var i=0, length = elements.length; i < length; i++) {
    var element = document.getElementById(elements[i]);

    for (var property in styles) {
      element.style[property] = styles[property];
    }
  }
}

//现在你只要这样写：
setStyles([&#39;foo&#39;, &#39;bar&#39;, &#39;baz&#39;], {
  color: &#39;red&#39;,
  width: &#39;150px&#39;
});

如果我們有很多元素想設定相同的樣式，那這段程式碼真是為我們節省了不少時間。

外觀模式之利：使用外觀模式的目的就是要讓程式設計師過的更輕鬆一些，編寫一次組合程式碼，然後就可以重複使用它，這有助於節省時間和精力。給一些複雜的問題一個簡化介面。

外觀方法方便了開發人員，斌共提供過了比較高層的功能，降低對外部程式碼的依賴程度，為應用系統的開發增加了一些額外的靈活性。透過使用外觀模式，可以避免與下層子系統緊密耦合。這樣就可以對這個系統進行修改而不會影響到客戶代碼。

外觀模式之弊：有時候外觀元素也會帶來一些不必要的額外負擔。在實施一些套路之前應該先認真掂量一下其實用。有時相比一個龐雜的外觀函數，其組成函數在力度方面更具吸引力。這是因為外觀函數可能常常會執行一些你不需要的任務。

對於簡單的個人網站或少量行銷網頁來說，僅為工具提示和彈出式視窗這樣一點增強行為就導入這個Javascript庫可能並不明智。此時考慮只使用少許簡單的外觀元素而不是一個充滿這類東西的函式庫。

外觀函數為執行各種複雜任務提供了一個簡單的接口，它們使程式碼更容易維護和理解。它們還能弱化子系統和客戶程式碼的耦合。把經常相伴出現的常用函數組合在一起。這個模式在DOM腳本程式設計這種需要面對葛洪不一致的瀏覽器介面的環境中很常用。

上面是我整理給大家的，希望今後對大家有幫助。

相關文章：

詳細解讀在JavaScript中實作設計模式中的適配器模式的方法（圖文教學）

詳解解讀JavaScript中的事件流和事件處理程序（圖文教學）

Adapter適配器模式在JavaScript設計模式程式設計中的運用總結（圖文教學）

以上是設計模式中的facade外觀模式在JavaScript開發中的運用（進階篇）的詳細內容。更多資訊請關注PHP中文網其他相關文章！