JS 外觀模式

時間 2019-11-05

原文原文鏈接

1. 簡介

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

2. 實現

外觀模式不只簡化類中的接口，並且對接口與調用者也進行了解耦。外觀模式常常被認爲開發者必備，它能夠將一些複雜操做封裝起來，並建立一個簡單的接口用於調用。
外觀模式常常被用於JavaScript類庫裏，經過它封裝一些接口用於兼容多瀏覽器，外觀模式可讓咱們間接調用子系統，從而避免因直接訪問子系統而產生沒必要要的錯誤。前端

外觀模式的優點是易於使用，並且自己也比較輕量級。但也有缺點外觀模式被開發者連續使用時會產生必定的性能問題，由於在每次調用時都要檢測功能的可用性。
下面是一段未優化過的代碼，咱們使用了外觀模式經過檢測瀏覽器特性的方式來建立一個跨瀏覽器的使用方法。segmentfault

好比對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. 總結

那麼什麼時候使用外觀模式呢？通常來講分三個階段：緩存

在設計初期，應該要有意識地將不一樣的兩個層分離，好比經典的三層結構，在數據訪問層和業務邏輯層、業務邏輯層和表示層之間創建外觀Facade。
在開發階段，子系統每每由於不斷的重構演化而變得愈來愈複雜，增長外觀Facade能夠提供一個簡單的接口，減小他們之間的依賴。
在維護一個遺留的大型系統時，可能這個系統已經很難維護了，這時候使用外觀Facade也是很是合適的，爲系統開發一個外觀Facade類，爲設計粗糙和高度複雜的遺留代碼提供比較清晰的接口，讓新系統和Facade對象交互，Facade與遺留代碼交互全部的複雜工做。

本文是系列文章，能夠相互參考印證，共同進步~微信