成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

JS 外觀模式

BothEyes1993 / 1908人閱讀

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

1. 簡(jiǎn)介

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

2. 實(shí)現(xiàn)

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

外觀模式的優(yōu)勢(shì)是易于使用，而且本身也比較輕量級(jí)。但也有缺點(diǎn) 外觀模式被開(kāi)發(fā)者連續(xù)使用時(shí)會(huì)產(chǎn)生一定的性能問(wèn)題，因?yàn)樵诿看握{(diào)用時(shí)都要檢測(cè)功能的可用性。
下面是一段未優(yōu)化過(guò)的代碼，我們使用了外觀模式通過(guò)檢測(cè)瀏覽器特性的方式來(lái)創(chuàng)建一個(gè)跨瀏覽器的使用方法。

比如對(duì)document對(duì)象添加click事件的時(shí)候：

function addEvent(dom, type, fn) {
  if (dom.addEventListener) {      // 支持DOM2級(jí)事件處理方法的瀏覽器
    dom.addEventListener(type, fn, false)
  } else if (dom.attachEvent) {    // 不支持DOM2級(jí)但支持attachEvent
    dom.attachEvent("on" + type, fn)
  } else {
    dom["on" + type] = fn      // 都不支持的瀏覽器
  }
}

const myInput = document.getElementById("myinput")
addEvent(myInput, "click", function() {console.log("綁定 click 事件")})

還可以用來(lái)解決一些其他的瀏覽器兼容性問(wèn)題：

const getEvent = function(event) {  // 獲取事件對(duì)象
  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í)使用外觀模式呢？一般來(lái)說(shuō)分三個(gè)階段：

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

在開(kāi)發(fā)階段，子系統(tǒng)往往因?yàn)椴粩嗟闹貥?gòu)演化而變得越來(lái)越復(fù)雜，增加外觀Facade可以提供一個(gè)簡(jiǎn)單的接口，減少他們之間的依賴。

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

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

JS 抽象工廠模式


JS 工廠模式


JS 建造者模式


JS 原型模式


JS 單例模式


JS 回調(diào)模式


JS 外觀模式


JS 適配器模式


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


JS 狀態(tài)模式


JS 橋接模式


JS 觀察者模式

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

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

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/92141.html

相關(guān)文章

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

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

    saucxs 評(píng)論0 收藏0

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

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

    tianren124 評(píng)論0 收藏0

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

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

    xiaodao 評(píng)論0 收藏0

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

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

    ISherry 評(píng)論0 收藏0

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

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

    VishKozus 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<