APP
外觀模式（Facade Pattern）隱藏系統(tǒng)的復(fù)雜性，并向客戶端提供了一個(gè)客戶端可以訪問系統(tǒng)的接口。這種類型的設(shè)計(jì)模式屬于結(jié)構(gòu)型模式，它向現(xiàn)有的系統(tǒng)添加一個(gè)接口，來隱藏系統(tǒng)的復(fù)雜性。
外觀模式經(jīng)常被用于JavaScript類庫里，通過它封裝一些接口用于兼容多瀏覽器，外觀模式可以讓我們間接調(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)。
ＯＫ，以上就是本篇分享，你“學(xué)廢”了嗎？
我是掘金安東尼，輸出暴露輸入，技術(shù)洞見生活。
本文摘自 ：https://blog.51cto.com/u
