成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

JS 外觀模式

BothEyes1993 / 1878人閱讀

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

1. 簡介

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

2. 實現(xiàn)

外觀模式不僅簡化類中的接口，而且對接口與調(diào)用者也進(jìn)行了解耦。外觀模式經(jīng)常被認(rèn)為開發(fā)者必備，它可以將一些復(fù)雜操作封裝起來，并創(chuàng)建一個簡單的接口用于調(diào)用。
外觀模式經(jīng)常被用于JavaScript類庫里，通過它封裝一些接口用于兼容多瀏覽器，外觀模式可以讓我們間接調(diào)用子系統(tǒng)，從而避免因直接訪問子系統(tǒng)而產(chǎn)生不必要的錯誤。

外觀模式的優(yōu)勢是易于使用，而且本身也比較輕量級。但也有缺點(diǎn) 外觀模式被開發(fā)者連續(xù)使用時會產(chǎn)生一定的性能問題，因為在每次調(diào)用時都要檢測功能的可用性。
下面是一段未優(yōu)化過的代碼，我們使用了外觀模式通過檢測瀏覽器特性的方式來創(chuàng)建一個跨瀏覽器的使用方法。

比如對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) {    // 阻止默認(rèn)事件
  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. 總結(jié)

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

在設(shè)計初期，應(yīng)該要有意識地將不同的兩個層分離，比如經(jīng)典的三層結(jié)構(gòu)，在數(shù)據(jù)訪問層和業(yè)務(wù)邏輯層、業(yè)務(wù)邏輯層和表示層之間建立外觀Facade。

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

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

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

JS 抽象工廠模式


JS 工廠模式


JS 建造者模式


JS 原型模式


JS 單例模式


JS 回調(diào)模式


JS 外觀模式


JS 適配器模式


JS 利用高階函數(shù)實現(xiàn)函數(shù)緩存(備忘模式)


JS 狀態(tài)模式


JS 橋接模式


JS 觀察者模式

網(wǎng)上的帖子大多深淺不一，甚至有些前后矛盾，在下的文章都是學(xué)習(xí)過程中的總結(jié)，如果發(fā)現(xiàn)錯誤，歡迎留言指出~

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

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/92141.html

相關(guān)文章

  • js設(shè)計模式 --- 外觀設(shè)計模式

    摘要：外觀設(shè)計模式外部與一個子系統(tǒng)的通信必須通過一個統(tǒng)一的門面對象進(jìn)行，這就是門面模式。此角色知曉相關(guān)的子系統(tǒng)的功能和責(zé)任。外觀模式結(jié)構(gòu)客戶端正常調(diào)用方式外觀模式調(diào)用方式實現(xiàn)未使用外觀模式子系統(tǒng)類客戶端調(diào)用使用外觀模式子系統(tǒng)類同上外觀類客戶端調(diào)用 外觀設(shè)計模式 外部與一個子系統(tǒng)的通信必須通過一個統(tǒng)一的門面(Facade)對象進(jìn)行，這就是門面模式。外觀模式為子系統(tǒng)提供了統(tǒng)一的界面, 屏蔽了子類...

    saucxs 評論0 收藏0

  • JavaScript設(shè)計模式系列八：外觀模式

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

    tianren124 評論0 收藏0

  • JS設(shè)計模式之Facade（外觀）模式

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

    xiaodao 評論0 收藏0

  • JS 設(shè)計模式 十一（外觀模式）

    摘要：外觀模式為子系統(tǒng)中的一組接口提供一個一致的界面，模式定義了一個高層接口，這個接口使得這一子系統(tǒng)更加容易使用。代碼外觀模式啟動啟動啟動外觀模式優(yōu)點(diǎn)減少系統(tǒng)相互依賴。適用場景為復(fù)雜的模塊或子系統(tǒng)提供外界訪問的模塊。 外觀模式 為子系統(tǒng)中的一組接口提供一個一致的界面，F(xiàn)acade模式定義了一個高層接口，這個接口使得這一子系統(tǒng)更加容易使用。隱藏系統(tǒng)的復(fù)雜性，并向客戶端提供了一個客戶端可以訪問系...

    ISherry 評論0 收藏0

  • 【JS】常用設(shè)計模式

    摘要：常用設(shè)計模式大型單頁應(yīng)用里，復(fù)雜度上升到一定程度時，沒有適當(dāng)?shù)脑O(shè)計模式進(jìn)行降耦，后續(xù)的開發(fā)也難以下手。而設(shè)計模式正是為了降耦而存在。特點(diǎn)滿足單一職責(zé)原則使用代理模式，不在構(gòu)造函數(shù)中判斷是否已經(jīng)創(chuàng)建過該單例滿足惰性原則應(yīng)用彈出登陸窗口。 JS常用設(shè)計模式 大型單頁應(yīng)用里，復(fù)雜度上升到一定程度時，沒有適當(dāng)?shù)脑O(shè)計模式進(jìn)行降耦，后續(xù)的開發(fā)也難以下手。而設(shè)計模式正是為了降耦而存在。 單例模式 單...

    VishKozus 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<