? 外觀模式:為一組復(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ù)。(可以用單例模式)