當(dāng)前位置:首頁(yè) > IT技術(shù) > 其他 > 正文

分分鐘理解外觀模式
2022-04-29 13:56:29

外觀模式(Facade Pattern)隱藏系統(tǒng)的復(fù)雜性,并向客戶端提供了一個(gè)客戶端可以訪問系統(tǒng)的接口。這種類型的設(shè)計(jì)模式屬于結(jié)構(gòu)型模式,它向現(xiàn)有的系統(tǒng)添加一個(gè)接口,來隱藏系統(tǒng)的復(fù)雜性。

分分鐘理解外觀模式_外觀模式

外觀模式經(jīng)常被用于JavaScript類庫(kù)里,通過它封裝一些接口用于兼容多瀏覽器,外觀模式可以讓我們間接調(diào)用子系統(tǒng),從而避免因直接訪問子系統(tǒng)而產(chǎn)生不必要的錯(cuò)誤。

外觀模式的優(yōu)勢(shì)是易于使用,而且本身也比較輕量級(jí)。但也有缺點(diǎn) 外觀模式被開發(fā)者連續(xù)使用時(shí)會(huì)產(chǎn)生一定的性能問題,因?yàn)樵诿看握{(diào)用時(shí)都要檢測(cè)功能的可用性。

我們使用了外觀模式通過檢測(cè)瀏覽器特性的方式來創(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 事件')})

還可以用來解決一些其他的瀏覽器兼容性問題:

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('呵呵')}
}

當(dāng)遇到這些場(chǎng)景,我們應(yīng)該考慮使用外觀模式:
1、為復(fù)雜的模塊或子系統(tǒng)提供外界訪問的模塊。 2、子系統(tǒng)相對(duì)獨(dú)立。 3、預(yù)防低水平人員帶來的風(fēng)險(xiǎn)。

OK,以上就是本篇分享,你“學(xué)廢”了嗎?

我是掘金安東尼,輸出暴露輸入,技術(shù)洞見生活。

本文摘自 :https://blog.51cto.com/u

開通會(huì)員,享受整站包年服務(wù)立即開通 >