JS 外觀模式

SHERlocked93發表於2017-12-14
原文網址 : https://segmentfault.com/a/1190000012431621
JS模式

1. 簡介

外觀模式（Facade）為子系統中的一組介面提供了一個一致的介面，此模組定義了一個高層介面，這個介面值得這一子系統更加容易使用。
外觀模式在JS中常常用於解決瀏覽器相容性問題。

2. 實現

外觀模式不僅簡化類中的介面，而且對介面與呼叫者也進行了解耦。外觀模式經常被認為開發者必備，它可以將一些複雜操作封裝起來，並建立一個簡單的介面用於呼叫。
外觀模式經常被用於JavaScript類庫裡，通過它封裝一些介面用於相容多瀏覽器，外觀模式可以讓我們間接呼叫子系統，從而避免因直接訪問子系統而產生不必要的錯誤。

外觀模式的優勢是易於使用，而且本身也比較輕量級。但也有缺點 外觀模式被開發者連續使用時會產生一定的效能問題，因為在每次呼叫時都要檢測功能的可用性。
下面是一段未優化過的程式碼，我們使用了外觀模式通過檢測瀏覽器特性的方式來建立一個跨瀏覽器的使用方法。

比如對document物件新增click事件的時候：

function addEvent(dom, type, fn) {
  if (dom.addEventListener) {      // 支援DOM2級事件處理方法的瀏覽器
    dom.addEventListener(type, fn, false)
  } else if (dom.attachEvent) {    // 不支援DOM2級但支援attachEvent
    dom.attachEvent('on' + type, fn)
  } else {
    dom['on' + type] = fn      // 都不支援的瀏覽器
  }
}

const myInput = document.getElementById('myinput')
addEvent(myInput, 'click', function() {console.log('繫結 click 事件')})

還可以用來解決一些其他的瀏覽器相容性問題：

const getEvent = function(event) {  // 獲取事件物件
  return event || window.event      // IE下window.event
}

const getTarget = function(event) {        // 獲取事件元素
  const event = getEvent(event)
  return event.target || event.srcElement  // IE下event.srcElement
}

const preventDefault = function(event) {    // 阻止預設事件
  const event = getEvent(event)
  if (event.preventDefault) {event.preventDefault()}
  else {event.returnValue = false}          // IE下
}

const cancelBubble = function(event) {
  const event = getEvent(event)
  if (event.stopPropagation) {event.stopPropagation()}
  else {event.cancelBubble = true}      // IE下
}

document.onclick = function(e) {
  preventDefault(e)
  if (getTarget(e) !== document.getElementById('myinput')) {console.log('呵呵')}
}

3. 總結

那麼何時使用外觀模式呢？一般來說分三個階段：

  1. 在設計初期，應該要有意識地將不同的兩個層分離，比如經典的三層結構，在資料訪問層和業務邏輯層、業務邏輯層和表示層之間建立外觀Facade。
  2. 在開發階段，子系統往往因為不斷的重構演化而變得越來越複雜，增加外觀Facade可以提供一個簡單的介面，減少他們之間的依賴。
  3. 在維護一個遺留的大型系統時，可能這個系統已經很難維護了，這時候使用外觀Facade也是非常合適的，為系統開發一個外觀Facade類，為設計粗糙和高度複雜的遺留程式碼提供比較清晰的介面，讓新系統和Facade物件互動，Facade與遺留程式碼互動所有的複雜工作。

本文是系列文章，可以相互參考印證，共同進步~

  1. JS 抽象工廠模式
  2. JS 工廠模式
  3. JS 建造者模式
  4. JS 原型模式
  5. JS 單例模式
  6. JS 回撥模式
  7. JS 外觀模式
  8. JS 介面卡模式
  9. JS 利用高階函式實現函式快取(備忘模式)
  10. JS 狀態模式
  11. JS 橋接模式
  12. JS 觀察者模式

網上的帖子大多深淺不一，甚至有些前後矛盾，在下的文章都是學習過程中的總結，如果發現錯誤，歡迎留言指出~

參考：
設計模式之外觀模式
《Javascript 設計模式》 - 張榮銘

相關文章