概念

外觀模式(門面模式)，是一種相對簡單而又無處不在的模式。外觀模式提供一個高層接口，這個接口使得客戶端或子系統(tǒng)更加方便調用。

外觀模式并不是適配器模式，適配器模式是一種包裝器，用來對接口進行適配以便在不兼容系統(tǒng)中使用它。而創(chuàng)建外觀元素則是圖個方便。它并不用于達到需要特定接口的客戶系統(tǒng)打交道這個目的，而是用于提供一個簡化的接口。

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";

}

答案是顯而易見的，飯?zhí)玫某床藥煾挡粫驗槟泐A定了一份燒鴨和一份白菜就把這兩樣菜炒在一個鍋里。他更愿意給你提供一個燒鴨飯?zhí)撞汀Ｍ瑯釉诔绦蛟O計中，我們需要保證函數或者對象盡可能的處在一個合理粒度，畢竟不是每個人喜歡吃燒鴨的同時又剛好喜歡吃白菜。

外觀模式還有一個好處是可以對用戶隱藏真正的實現(xiàn)細節(jié)，用戶只關心最高層的接口。比如在燒鴨飯?zhí)撞偷墓适轮校悴⒉魂P心師傅是先做燒鴨還是先炒白菜，你也不關心那只鴨子是在哪里成長的。

最后寫個我們都用過的外觀模式例子

var stopEvent = function( e ){  //同時阻止事件默認行為和冒泡

 e.stopPropagation();

 e.preventDefault();

}

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

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;

  }

}

// 現(xiàn)在你可以這么寫：

setStyle(['foo', 'bar', 'baz'], 'color', 'red');

setStyle(['foo', 'bar', 'baz'], 'width', '150px');

是不是覺得咱們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];

    }

  }

}

//現(xiàn)在你只要這樣寫：

setStyles(['foo', 'bar', 'baz'], {

  color: 'red',

  width: '150px'

});

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

外觀模式之利：

使用外觀模式的目的就是要讓程序員過的更輕松一些，編寫一次組合代碼，然后就可以反復使用它，這有助于節(jié)省時間和精力。給一些復雜的問題提供一個簡化接口。

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

外觀模式之弊：

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

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

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