概念

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

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

JavaScript代碼示例

用一段再簡(jiǎn)單不過(guò)的代碼來(lái)表示

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

如果你需要分別調(diào)用getName和getSex函數(shù). 那可以用一個(gè)更高層的接口getUserInfo來(lái)調(diào)用.

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

也許你會(huì)問(wèn)為什么一開(kāi)始不把getName和getSex的代碼寫(xiě)到一起, 比如這樣

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

答案是顯而易見(jiàn)的，飯?zhí)玫某床藥煾挡粫?huì)因?yàn)槟泐A(yù)定了一份燒鴨和一份白菜就把這兩樣菜炒在一個(gè)鍋里。他更愿意給你提供一個(gè)燒鴨飯?zhí)撞?。同樣在程序設(shè)計(jì)中，我們需要保證函數(shù)或者對(duì)象盡可能的處在一個(gè)合理粒度，畢竟不是每個(gè)人喜歡吃燒鴨的同時(shí)又剛好喜歡吃白菜。
外觀模式還有一個(gè)好處是可以對(duì)用戶隱藏真正的實(shí)現(xiàn)細(xì)節(jié)，用戶只關(guān)心最高層的接口。比如在燒鴨飯?zhí)撞偷墓适轮?，你并不關(guān)心師傅是先做燒鴨還是先炒白菜，你也不關(guān)心那只鴨子是在哪里成長(zhǎng)的。
最后寫(xiě)個(gè)我們都用過(guò)的外觀模式例子

var stopEvent = function( e ){  //同時(shí)阻止事件默認(rèn)行為和冒泡
 e.stopPropagation();
 e.preventDefault();
}

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

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

簡(jiǎn)單吧！我真希望我可以不用寫(xiě)那些不必要的代碼，讓它們?cè)胶?jiǎn)單越好，但是如果真是這樣就沒(méi)什么意思了，你也不會(huì)想讀下去了，對(duì)吧？所以我不這么認(rèn)為，我想我要給你看點(diǎn)更復(fù)雜的東西。我只是想說(shuō)，你的代碼原本看起來(lái)會(huì)有些像下面這樣：

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

太蹩腳了！你對(duì)每個(gè)元素做了一模一樣的事！我認(rèn)為我們可以讓它變得更簡(jiǎn)單點(diǎn)：

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

// 現(xiàn)在你可以這么寫(xiě)：
setStyle(['foo', 'bar', 'baz'], 'color', 'red');
setStyle(['foo', 'bar', 'baz'], 'width', '150px');

是不是覺(jué)得咱們NB壞了？你快算了吧！咱們可是JavaScript程序員呀！能不能用點(diǎn)腦子，來(lái)點(diǎn)真格的。也許我們可以只調(diào)用一次就能設(shè)置所有的樣式?？聪逻@個(gè)：

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)在你只要這樣寫(xiě)：
setStyles(['foo', 'bar', 'baz'], {
  color: 'red',
  width: '150px'
});

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

外觀模式之利：
使用外觀模式的目的就是要讓程序員過(guò)的更輕松一些，編寫(xiě)一次組合代碼，然后就可以反復(fù)使用它，這有助于節(jié)省時(shí)間和精力。給一些復(fù)雜的問(wèn)題提供一個(gè)簡(jiǎn)化接口。

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

外觀模式之弊：
有時(shí)候外觀元素也會(huì)帶來(lái)一些不必要的額外負(fù)擔(dān)。在實(shí)施一些套路之前應(yīng)該認(rèn)真掂量一下其實(shí)用性。有時(shí)相比一個(gè)龐雜的外觀函數(shù)，其組成函數(shù)在力度方面更有吸引力。這是因?yàn)橥庥^函數(shù)可能常常會(huì)執(zhí)行一些你并不需要的任務(wù)。

對(duì)于簡(jiǎn)單的個(gè)人網(wǎng)站或少量營(yíng)銷網(wǎng)頁(yè)來(lái)說(shuō)，僅為工具提示和彈出式窗口這樣一點(diǎn)增強(qiáng)行為就導(dǎo)入這個(gè)Javascript庫(kù)可能并不明智。此時(shí)考慮只使用少許簡(jiǎn)單的外觀元素而不是一個(gè)滿是這類東西的庫(kù)。

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

最新評(píng)論