【D1n910】第9章 套餐服務(wù) —— 外觀模式
正常操作，正常分析，大家好，我是D1n910。
今天繼續(xù)來(lái)學(xué)習(xí) 《JavaScript 設(shè)計(jì)模式》的第三篇 結(jié)構(gòu)型設(shè)計(jì)模式
這是一個(gè)連續(xù)的讀書筆記，所以如果你之前的內(nèi)容沒(méi)有看的話，可以去看看。
這里再次感謝 《Javascript 設(shè)計(jì)模式》及其作者 張榮銘，專欄內(nèi)容是在它的基礎(chǔ)上生成的。
其實(shí)學(xué)到現(xiàn)在，會(huì)發(fā)現(xiàn)自己已經(jīng)用到過(guò)這里面很多種設(shè)計(jì)模式了，這些都是上學(xué)上課、平時(shí)學(xué)習(xí)以及看之前大佬的代碼耳濡目染的。
第三篇 結(jié)構(gòu)型設(shè)計(jì)模式
結(jié)構(gòu)型設(shè)計(jì)模式關(guān)注于如何將類或者對(duì)象組合成更大、更復(fù)雜的結(jié)構(gòu)，以簡(jiǎn)化設(shè)計(jì)。
第 9 章 套餐服務(wù) —— 外觀模式
外觀模式（Facade）：
為一組復(fù)雜的子系統(tǒng)接口提供一個(gè)更高級(jí)的統(tǒng)一接口，通過(guò)這個(gè)接口使得對(duì)子系統(tǒng)接口的訪問(wèn)更容易。在 Javascript 中有時(shí)也會(huì)用于對(duì)底層結(jié)構(gòu)兼容性做統(tǒng)一封裝來(lái)簡(jiǎn)化用戶使用。
對(duì)接口進(jìn)行二次封裝隱藏其復(fù)雜性，并簡(jiǎn)化其使用。有時(shí)候外觀接口的封裝接口方法不需要接口的具體實(shí)現(xiàn)，只需要按照接口使用規(guī)則調(diào)用即可。這也是對(duì)系統(tǒng)與客戶之間的一種松散耦合。 使得系統(tǒng)與客戶之間不回因結(jié)構(gòu)的變化而互相影響。
用于場(chǎng)景：比如IE低版本可以使用的代碼以及高版本可以使用的代碼；Vue 里 nextTick 的封裝……
9.1、添加一個(gè)點(diǎn)擊事件（p68）
前端人A給頁(yè)面的 document 綁定了 onclick 事件，這是 DOM0 級(jí)事件。
document.onclick = function(e)?{
//前端人 A do something?
e.preventDefault();
if (e.target !== document.getElementById('myinput')) {
//前端人 A do something?
}
}
這里有一個(gè)顯而易見的問(wèn)題，就是后繼的同事新添加同樣的?DOM0 方法，會(huì)被覆蓋。
// just like this
document.onclick = function(e)?{
//前端人 B?do something?
}
考慮到解決這種問(wèn)題，我們會(huì)想到可以用 DOM2 級(jí)事件處理程序提供的?addEventListener 來(lái)實(shí)現(xiàn)。
在用?addEventListener 來(lái)綁定事件的話，有一個(gè)問(wèn)題就是，在老版本的 IE 瀏覽器（低于 9）是不支持?addEventListener 的，要用 attachEvent，然后再再次的瀏覽器，不支持 DOM2 級(jí)事件，我們還要考慮用回 DOM0。
9.2、兼容方式（p69）
這就像飯?zhí)命c(diǎn)菜一樣，我們只需要和阿姨說(shuō)我們要什么菜、飯，飯?zhí)冒⒁叹涂梢宰约喝ゲ伺枥?、桌子上、抽屜里……然后綜合成一盤餐給我們。
這里我們可以把上面的內(nèi)容集中在一起寫。
// 外觀模式
function addEvent(dom, type, fn) {
// 對(duì)于支持 DOM2 級(jí)事件處理程序?addEventListener 方法的瀏覽器
if (dom.addEventListener) {
dom.addEventListener(type, fn, false);
// 對(duì)于不支持 addEventListener 方法但支持 attachEvent 方法的瀏覽器
} else if (dom.attachEvent) {
dom.attachEvent('on' + type,?fn);
} else {
dom['on'+ type] = fn
}
}
這樣我們就可以很放心方便地進(jìn)行事件綁定了。
addEvent(document, 'click', () => {alert('ddd')})
// 綁定第二個(gè)事件
addEvent(document, 'click', () => {alert('ddd2')})
9.3、除此之外（p70）
剛剛前端人 A 這邊還有可以補(bǔ)充內(nèi)容的地方，再看看代碼內(nèi)容：
document.onclick = function(e)?{
//前端人 A do something?
e.preventDefault();
if (e.target !== document.getElementById('myinput')) {
//前端人 A do something?
}
}
再看看代碼，我們知道 IE 低版本瀏覽器不兼容?e.preventDefault() 和 e.target，所以又可以寫下面的外觀模式:
// 獲取事件對(duì)象
var getEvent = function(event) {
// 有 event 的時(shí)候返回 event，否則 window.event（IE）
return even || window.event;
}
//? 獲取元素
var getTarget = fucntion (event) {
var event = getEvent(event);
return event.target || event.srcElement;
}
// 阻止默認(rèn)行為
var perventDefault = function (event) {
var event =?getEvent(event)
if (event.perventDefault) {
event.perventDefault();
} else {
event.returnValue = false;
}
}
我們?cè)瓉?lái)的函數(shù)就可以改成下面這樣
addEvent(document, 'click', function(event) {
preventDefault(event);
if (getTarget(event) !== document.getElementById('myinput')) {
//前端人 A do something?
}
})
9.4、小型代碼庫(kù)（p70）
根據(jù)之前學(xué)的單例模式，我們很容易吧上面的東西集合到小型代碼庫(kù)里，這樣就不會(huì)直接暴露到頁(yè)面全局對(duì)象了。
本章 End，學(xué)習(xí)進(jìn)度 9/40，加油加油
D1n910 于2021年02月19日 12:53 在福永
