APP
外觀模式（Facade Pattern）隱藏系統(tǒng)的復(fù)雜性，并向客戶端提供了一個客戶端可以訪問系統(tǒng)的接口。這種類型的設(shè)計模式屬于結(jié)構(gòu)型模式，它向現(xiàn)有的系統(tǒng)添加一個接口，來隱藏系統(tǒng)的復(fù)雜性。
外觀模式經(jīng)常被用于JavaScript類庫里，通過它封裝一些接口用于兼容多瀏覽器，外觀模式可以讓我們間接調(diào)用子系統(tǒng)，從而避免因直接訪問子系統(tǒng)而產(chǎn)生不必要的錯誤。
外觀模式的優(yōu)勢是易于使用，而且本身也比較輕量級。但也有缺點 外觀模式被開發(fā)者連續(xù)使用時會產(chǎn)生一定的性能問題，因為在每次調(diào)用時都要檢測功能的可用性。
我們使用了外觀模式通過檢測瀏覽器特性的方式來創(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('呵呵')}
}
當(dāng)遇到這些場景，我們應(yīng)該考慮使用外觀模式：
1、為復(fù)雜的模塊或子系統(tǒng)提供外界訪問的模塊。 2、子系統(tǒng)相對獨立。 3、預(yù)防低水平人員帶來的風(fēng)險。
ＯＫ，以上就是本篇分享，你“學(xué)廢”了嗎？
我是掘金安東尼，輸出暴露輸入，技術(shù)洞見生活。
本文摘自 ：https://blog.51cto.com/u
