? 外觀模式:為一組復(fù)雜的子系統(tǒng)提供一個(gè)更高級(jí)的統(tǒng)一接口,通過(guò)這個(gè)接口可以對(duì)子系統(tǒng)訪問(wèn)很輕松。就像我們點(diǎn)的套餐一樣旁涤,下面詳細(xì)說(shuō)明。
1.場(chǎng)景:添加點(diǎn)擊事件
為頁(yè)面document添加onclick事件迫像,
重新添加了劈愚,會(huì)覆蓋。而且存在阻止默認(rèn)事件的兼容問(wèn)題闻妓。
document.body.onclick=function(e){
e.preventDefault();
console.log(1)
}
2.外觀模式來(lái)處理
每天中午菌羽,我們急沖沖得去餐廳吃飯,人很多由缆,無(wú)論是商家還是我們都希望能快點(diǎn)填飽肚子注祖。通常我們都是點(diǎn)套餐,而不點(diǎn)單品均唉,一則省錢是晨,二則省心。套餐簡(jiǎn)潔明了舔箭,他把主食罩缴、菜品、飲料都定制好了限嫌。外觀模式就是如此靴庆,他提供一個(gè)統(tǒng)一對(duì)外接口,這樣就能很簡(jiǎn)單的實(shí)現(xiàn)功能而不用管內(nèi)部的復(fù)雜多樣怒医。代碼如下
addEvent方法實(shí)現(xiàn)
var bc = {
? ? ? ? addHandler: function(oElement, sEvent, fnHandler) {
? ? ? ? ? ? oElement.addEventListener ?
? ? ? ? ? ? ? ? oElement.addEventListener(sEvent, fnHandler, false) :
? ? ? ? ? ? ? ? oElement.attachEvent("on" + sEvent, fnHandler)
? ? ? ? }
? ? }
原生js有很多兼容代碼炉抒,我們可以利用外觀模式封裝一個(gè)小型的代碼庫(kù)。(可以用單例模式)