正常操作，正常分析，大家好，我是D1n910。

今天繼續(xù)來學(xué)習(xí) 《JavaScript 設(shè)計模式》的第三篇 結(jié)構(gòu)型設(shè)計模式

這是一個連續(xù)的讀書筆記，所以如果你之前的內(nèi)容沒有看的話，可以去看看。

下面是第十章的展覽，里面其實(shí)鏈接好了所有1～10的專欄內(nèi)容，所以直接戳下面的專欄鏈接就可以快速到達(dá)啦。

其他后續(xù)章節(jié)

這里再次感謝 《Javascript 設(shè)計模式》及其作者 張榮銘，專欄內(nèi)容是在它的基礎(chǔ)上生成的。

現(xiàn)在會覺得很多設(shè)計模式離我們有點(diǎn)遙遠(yuǎn)，是因?yàn)槲覀儸F(xiàn)在都在用大佬寫好的框架吧，很多設(shè)計模式都包含在框架里了。

第三篇 結(jié)構(gòu)型設(shè)計模式

結(jié)構(gòu)型設(shè)計模式關(guān)注于如何將類或者對象組合成更大、更復(fù)雜的結(jié)構(gòu)，以簡化設(shè)計。

第 13?章 城市間的公路 —— 橋接模式

橋接模式（Bridge）：在系統(tǒng)沿著多個唯獨(dú)變化的同時，又不增加其復(fù)雜度并達(dá)到解耦。

橋接模式最主要的特點(diǎn)就是將實(shí)現(xiàn)層（如元素綁定的事件）與抽象層（如修飾頁面 UI 邏輯）解耦分離，可以兩者獨(dú)立變化。

這樣可能會造成開發(fā)成本的增加，也可能會在性能上有影響。

13.1、添加事件交互（P89）

?頁面上有三個元素，要求鼠標(biāo)滑過會改變樣式，同時對于數(shù)字類型的來說，只改變數(shù)字內(nèi)的樣式。

一不小心就寫成下面這種樣式：

var span = document.getElementsByTagName('span');

span[0].onmouseover = function() {

? ?this.style.color = 'red';

? ?this.style.backgroundColor = '#ddd';

}

span[1].onmouseover = function() {

? ?this.getElementsByTagName('strong')[0].style.color = 'red';

? ?this.getElementsByTagName('strong')[0].style.backgroundColor = '#ddd';

}

span[2].onmouseover = function() {

? ?this.getElementsByTagName('strong')[0].style.color = 'red';

? ?this.getElementsByTagName('strong')[0].style.backgroundColor = '#ddd';

}

13.2、提取共同點(diǎn)（P90）

我們可以把上面的共同點(diǎn)抽象提取出來。

function changeColor(dom, color, bgColor) {

? ?dom.style.color = color;

? ?dom.style.backgroundColor = bgColor;

}

13.3、事件與業(yè)務(wù)邏輯之間的橋梁（P90）

13.2 提出以后，我們就可以用到之前的內(nèi)容里了。

span[0].onmouseover = function() {

changeColor(this, 'red', '#ddd')

}

13.4、多元化對象（p91）

橋接模式的場景還有很多，就比如游戲里的精靈，不同精靈都可以改變位置、說話，這些方法都可以抽象出來使用。

本章 End，學(xué)習(xí)進(jìn)度 13/40，加油加油

D1n910 于2021年02月19日 21:42 在福永