JS 外觀模式

BothEyes1993 發布于2019-08-22 11:18 / 1855人閱讀

摘要：外觀模式在中常常用于解決瀏覽器兼容性問題。實現外觀模式不僅簡化類中的接口，而且對接口與調用者也進行了解耦。外觀模式的優勢是易于使用，而且本身也比較輕量級。

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. 總結

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

在設計初期，應該要有意識地將不同的兩個層分離，比如經典的三層結構，在數據訪問層和業務邏輯層、業務邏輯層和表示層之間建立外觀Facade。

在開發階段，子系統往往因為不斷的重構演化而變得越來越復雜，增加外觀Facade可以提供一個簡單的接口，減少他們之間的依賴。

在維護一個遺留的大型系統時，可能這個系統已經很難維護了，這時候使用外觀Facade也是非常合適的，為系統開發一個外觀Facade類，為設計粗糙和高度復雜的遺留代碼提供比較清晰的接口，讓新系統和Facade對象交互，Facade與遺留代碼交互所有的復雜工作。

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

JS 抽象工廠模式

JS 工廠模式

JS 建造者模式

JS 原型模式

JS 單例模式

JS 回調模式

JS 外觀模式

JS 適配器模式

JS 利用高階函數實現函數緩存(備忘模式)

JS 狀態模式

JS 橋接模式

JS 觀察者模式

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

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

PS：歡迎大家關注我的公眾號【前端下午茶】，一起加油吧~

另外可以加入「前端下午茶交流群」微信群，長按識別下面二維碼即可加我好友，備注加群，我拉你入群～

GPU云服務器云服務器外觀模式 js繼承模式 JS設計模式 js 創建對象安全模式

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

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

js設計模式 --- 外觀設計模式

摘要：外觀設計模式外部與一個子系統的通信必須通過一個統一的門面對象進行，這就是門面模式。此角色知曉相關的子系統的功能和責任。外觀模式結構客戶端正常調用方式外觀模式調用方式實現未使用外觀模式子系統類客戶端調用使用外觀模式子系統類同上外觀類客戶端調用外觀設計模式外部與一個子系統的通信必須通過一個統一的門面(Facade)對象進行，這就是門面模式。外觀模式為子系統提供了統一的界面, 屏蔽了子類...

saucxs 2019-08-26 11:47 評論0 收藏0
JavaScript設計模式系列八：外觀模式

摘要：外觀模式外觀模式是指提供一個統一的接口去訪問多個子系統的多個不同的接口，為子系統中的一組接口提供統一的高層接口。外觀模式在我們的日常工作中十分常見。外觀模式外觀模式是指提供一個統一的接口去訪問多個子系統的多個不同的接口，為子系統中的一組接口提供統一的高層接口。使得子系統更容易使用，不僅簡化類中的接口，而且實現調用者和接口的解耦。外觀模式在我們的日常工作中十分常見。我們來看一個例子...

tianren124 2019-08-22 15:58 評論0 收藏0
JS設計模式之Facade（外觀）模式

摘要：概念模式為更大的代碼提供了一個方便的高層次接口，能夠隱藏其底層的真是復雜性。參考設計模式設計模式系列文章設計模式之模塊模式揭示模塊模式設計模式之單例模式設計模式之外觀模式概念 Facade模式為更大的代碼提供了一個方便的高層次接口，能夠隱藏其底層的真是復雜性?？梢园阉氤墒呛喕疉PI來展示給其他開發人員。優缺點優點簡化接口使用者與代碼解耦易于使用缺點存在隱性成本，性...

xiaodao 2019-08-23 13:57 評論0 收藏0
JS 設計模式十一（外觀模式）

摘要：外觀模式為子系統中的一組接口提供一個一致的界面，模式定義了一個高層接口，這個接口使得這一子系統更加容易使用。代碼外觀模式啟動啟動啟動外觀模式優點減少系統相互依賴。適用場景為復雜的模塊或子系統提供外界訪問的模塊。外觀模式為子系統中的一組接口提供一個一致的界面，Facade模式定義了一個高層接口，這個接口使得這一子系統更加容易使用。隱藏系統的復雜性，并向客戶端提供了一個客戶端可以訪問系...

ISherry 2019-08-19 18:23 評論0 收藏0
【JS】常用設計模式

摘要：常用設計模式大型單頁應用里，復雜度上升到一定程度時，沒有適當的設計模式進行降耦，后續的開發也難以下手。而設計模式正是為了降耦而存在。特點滿足單一職責原則使用代理模式，不在構造函數中判斷是否已經創建過該單例滿足惰性原則應用彈出登陸窗口。 JS常用設計模式大型單頁應用里，復雜度上升到一定程度時，沒有適當的設計模式進行降耦，后續的開發也難以下手。而設計模式正是為了降耦而存在。單例模式單...

VishKozus 2019-08-26 11:45 評論0 收藏0