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

今天继续来学习 《JavaScript 设计模式》的第三篇 结构型设计模式

这是一个连续的读书笔记，所以如果你之前的内容没有看的话，可以去看看。

下面是第十章的展览，里面其实链接好了所有1～10的专栏内容，所以直接戳下面的专栏链接就可以快速到达啦。

其他后续章节

这里再次感谢 《Javascript 设计模式》及其作者 张荣铭，专栏内容是在它的基础上生成的。

现在会觉得很多设计模式离我们有点遥远，是因为我们现在都在用大佬写好的框架吧，很多设计模式都包含在框架里了。

第三篇 结构型设计模式

结构型设计模式关注于如何将类或者对象组合成更大、更复杂的结构，以简化设计。

第 13 章 城市间的公路 —— 桥接模式

桥接模式（Bridge）：在系统沿着多个唯独变化的同时，又不增加其复杂度并达到解耦。

桥接模式最主要的特点就是将实现层（如元素绑定的事件）与抽象层（如修饰页面 UI 逻辑）解耦分离，可以两者独立变化。

这样可能会造成开发成本的增加，也可能会在性能上有影响。

13.1、添加事件交互（P89）

 页面上有三个元素，要求鼠标滑过会改变样式，同时对于数字类型的来说，只改变数字内的样式。

一不小心就写成下面这种样式：

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、提取共同点（P90）

我们可以把上面的共同点抽象提取出来。

function changeColor(dom, color, bgColor) {

   dom.style.color = color;

   dom.style.backgroundColor = bgColor;

}

13.3、事件与业务逻辑之间的桥梁（P90）

13.2 提出以后，我们就可以用到之前的内容里了。

span[0].onmouseover = function() {

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

}

13.4、多元化对象（p91）

桥接模式的场景还有很多，就比如游戏里的精灵，不同精灵都可以改变位置、说话，这些方法都可以抽象出来使用。

本章 End，学习进度 13/40，加油加油

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