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

pubdreamcc 發布于2019-08-19 14:44 / 2258人閱讀

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

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

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

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

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

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

// 實現一個通用的，跨多種瀏覽器的時間綁定函數
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進行判斷，自動調用有效的事件綁定API來綁定時間。開發者在綁定時間的時候，就不需要寫冗長的判斷代碼，直接專注于業務就好，這是門面模式帶來的最直接的便利。

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

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

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

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

門面模式在模塊中的應用

結合以前說過的對象創建模式，門面模式可以應用在模塊之中，通過對私用方法的包裝提供簡化的公用方法，開發者維護模塊時只需修改私用方法就可以調整公用方法的實現。

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

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

GPU云服務器云服務器設計模式學習筆記 head-first設計模式筆記讀書筆記編程思想讀書筆記

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/78082.html

JavaScript 設計模式讀書筆記(七)——適配器模式

摘要：與門面模式的聯系本文要說的適配器模式和上一篇門面模式在思想上有相似之處，所以放在一起說。我們以中的一個為例，說說實際應用中的適配器模式的使用方法。而如果實現層的問題不大，要解決一部分適配問題的話，適配器模式就是很好的選擇了。與門面模式的聯系本文要說的適配器模式和上一篇門面模式在思想上有相似之處，所以放在一起說。它們都對類的接口進行了一些改變。門面模式是把相似的或是完成相關任務的接...

AZmake 2019-08-19 14:46 評論0 收藏0
《Java應用架構設計:模塊化模式與OSGi》讀書筆記

摘要：本書概括以軟件系統為例，重點講解了應用架構中的物理設計問題，即如何將軟件系統拆分為模塊化系統。容器獨立模塊不依賴于具體容器，采用輕量級容器，如獨立部署模塊可獨立部署可用性模式發布接口暴露外部配置使用獨立的配置文件用于不同的上下文。本文為讀書筆記，對書中內容進行重點概括，并將書中的模塊化結合微服務、Java9 Jigsaw談談理解。本書概括以Java軟件系統為例，重點講解了應用架構...

seanHai 2019-08-16 10:56 評論0 收藏0
Effective JavaScript讀書筆記（一）

摘要：如果為假值，不傳或者傳入，函數都會返回但是，傳入這個值是完全有可能的，所以這種判斷形勢是不正確的或者使用來判斷也可以原始類型優于封裝類型對象擁有六個原始值基本類型布爾值，數字，字符串，，和對象。作為一個前端新人，多讀書讀好書，夯實基礎是十分重要的，正如蓋樓房一樣，底層穩固了，才能越壘越高。從開始學習到現在，基礎的讀了紅寶書《JavaScript高級程序設計》，犀牛書《JavaScri...

zhoutao 2019-08-21 17:35 評論0 收藏0
《javascript高級程序設計》第六章讀書筆記之 javascript對象的幾種創建方式

摘要：三種使用構造函數創建對象的方法和的作用都是在某個特殊對象的作用域中調用函數。這種方式還支持向構造函數傳遞參數。叫法上把函數叫做構造函數，其他無區別適用情境可以在特殊的情況下用來為對象創建構造函數。一、工廠模式工廠模式：使用字面量和object構造函數會有很多重復代碼，在此基礎上改進showImg(https://segmentfault.com/img/bVbmKxb?w=456&...

xiaotianyi 2019-08-23 14:31 評論0 收藏0
《javascript高級程序設計》第六章讀書筆記之 javascript繼承的6種方法

摘要：繼承的是超類型中構造函數中的屬性，如上繼承了屬性，但沒有繼承原型中的方法。上述造成的結果是子類型實例中有兩組超類型的構造函數中定義的屬性，一組在子類型的實例中，一組在子類型實例的原型中。 ECMAScript只支持實現繼承，主要依靠原型鏈來實現。與實現繼承對應的是接口繼承，由于script中函數沒有簽名，所以無法實現接口繼承。一、原型鏈基本思想：利用原型讓一個引用類型繼承另一個引用...

孫吉亮 2019-08-23 14:38 評論0 收藏0