JavaScript 設(shè)計模式讀書筆記(六)——門面模式

pubdreamcc 發(fā)布于2019-08-19 14:44 / 2259人閱讀

摘要：簡單的門面模式實例事件綁定函數(shù)門面模式的作用是將復(fù)雜的接口進行包裝，變成一個便于使用的接口。還是以事件相關(guān)為例，事件綁定中還有兩個常用的分別是和。

門面模式是什么，與其我去用笨拙的語言去解釋，不如看下面這張圖，曾經(jīng)在網(wǎng)上很火的一張圖片，說的是一位兒子為他的爸媽設(shè)置的電腦桌面。

有了這些起好名字的快捷方式，身為電腦盲的爸媽就不需要去了解何為瀏覽器，何為播放器了，照著指示點就是了。這些快捷方式相當(dāng)于在用戶和計算機程序之間架起了一座橋梁，不需要每個用戶都像電影里的黑客一樣敲著一行行的代碼才能使用計算機的功能。這就是門面模式的意義——把復(fù)雜的功能（接口）經(jīng)過包裝，讓用戶（開發(fā)者）能間接地，比較簡單地去使用（調(diào)用）它們，簡化使用（開發(fā)）的難度。

簡單的門面模式實例——事件綁定函數(shù)

門面模式的作用是將復(fù)雜的接口進行包裝，變成一個便于使用的接口。在很多的JavaScript庫中都能找到門面模式的應(yīng)用，例如jQuery，我們在用jQuery進行事件綁定的時候，簡單的調(diào)用bind()，on()等方法就可以了，并不用對不同瀏覽器的兼容性問題進行處理，兼容性的處理在jQuery內(nèi)部已經(jīng)完成，就是通過門面的思想。

我們就以事件綁定為例，來展現(xiàn)一下門面模式是什么：

// 實現(xiàn)一個通用的，跨多種瀏覽器的時間綁定函數(shù)
function addEvent(el, type, fn) {
  if (window.addEventListener) {
    el.addEventListener(type, fn, false);
  } else if (window.attachEvent) {
    el.attachEvent("on" + type, fn);
  } else {
    el["on" + type] = fn;
  }
}

通過能力檢測，對瀏覽器支持的API進行判斷，自動調(diào)用有效的事件綁定API來綁定時間。開發(fā)者在綁定時間的時候，就不需要寫冗長的判斷代碼，直接專注于業(yè)務(wù)就好，這是門面模式帶來的最直接的便利。

這里門面模式的作用是處理瀏覽器的兼容性，門面模式的另一個作用是對多個函數(shù)進行組合管理。

還是以事件相關(guān)API為例，事件綁定中還有兩個常用的API分別是event.stopPropagation()和event.preventDefault()。這兩個API在IE瀏覽器中是不兼容的，在IE中它們分別對應(yīng)的是event.cancelBubble = true和event.returnValue = false。通過門面模式我們的目標(biāo)是：
沒有蛀牙~~~
以及：

+---------------+      +------------+      +--------------+      +-----------+
|stopPropagation|      |cancelBubble|      |preventDefault|      |returnValue|
+---------------+      +------------+      +--------------+      +-----------+
        |                    |                    |                        |
        +--------------------+                    +------------------------+
                   ↓                                          ↓
           +---------------+                           +--------------+
           |stopPropagation|                           |preventDefault|
           +---------------+                           +--------------+
                   |                wrapped in                 |
                   +-------------------------------------------+
                                        ↓
                          +-----------------------------+
                          |          ╭ stopPropagation |
                          | stopEvent                   |
                          |          ╰ preventDefault  |
                          +-----------------------------+

通過代碼事件就是這樣：

var eventUtil = {
  stopPropagation: function(ev) {
    if (ev.stopPropagation) {
      ev.stopPropagation();
    } else {
      ev.cancelBubble = true;
    }
  },
  preventDefault: function(ev) {
    if (ev.preventDefault) {
      ev.preventDefault();
    } else {
      ev.returnValue = false;
    }
  },
  stopEvent: function(ev) {
    eventUtil.stopPropagation(ev);
    eventUtil.preventDefault(ev);
  }
}

這樣，在事件綁定函數(shù)中，如果需要取消冒泡和默認(rèn)事件的話，直接調(diào)用eventUtil.stopEvent(ev)即可，該方法將所需的子方法進行了包裝，也處理了兼容性問題。

門面模式在模塊中的應(yīng)用

結(jié)合以前說過的對象創(chuàng)建模式，門面模式可以應(yīng)用在模塊之中，通過對私用方法的包裝提供簡化的公用方法，開發(fā)者維護模塊時只需修改私用方法就可以調(diào)整公用方法的實現(xiàn)。

var orange = (function() {
  // 私用方法包裝對象
  var _privateMethod = {
    orangeValue: 10,
    getValue: function() {
      console.log(this.orangeValue);
    },
    setValue: function(value) {
      this.orangeValue = value;
    }
  }

  // 返回公用方法
  return {
    setOrangeValue: function(value) {
      _privateMethod.setValue(value);
      _privateMethod.getValue();
    }
  }
})();

門面模式能提供編寫方式的靈活性，通過對底層子方法的封裝，既簡化了代碼又降低了對底層系統(tǒng)的耦合。在大型系統(tǒng)工具庫的使用中有重要的意義。但在實際項目中還是要考慮代碼量的輕便性，如果業(yè)務(wù)只需要一些小粒度的方法的話，就沒有必要使用包裝了很多無用方法的門面函數(shù)了，這需要開發(fā)者靈活判斷。