标签：idg 应用 理解 this strong 事件 不同 解释 学习
定义：
将抽象部分与它的实现部分分离，使他们都可以独立的变化。
也就是说，桥接模式里面有两个角色：
- 扩充抽象类
- 具体实现类
在写桥接模式之前，想在写一下关于抽象的理解。我觉得抽象这个概念过于抽象，而不易于理解。
抽象的概念：
从具体事物抽出、概括出它们共同的方面、本质属性与关系等，而将个别的、非本质的方面、属性与关系舍弃，这种思维过程，称为抽象。 ---[百度百科]
在自然语言中，很多人把凡是不能被人们的感官所直接把握的东西，也就是通常所说的“看不见，摸不着”的东西，叫做抽象。
比如：物体的形状,颜色都是抽象的，我们去定义一个物体形状的抽象方法
// 定义形状的方法--抽象的方法，表示某一实物的共同特征 let shape = function(shape) { this.shape = shape } let circle = new shape(‘圆‘) console.log(‘circle‘, circle.shape) // 圆 let rectangle = new shape(‘长方形‘) console.log(‘rectangle‘, rectangle.shape) //长方形
解释完抽象的概念，回归正文。 那如何使用桥接模式呢？
最简单的桥接模式
var each = function (arr, fn) { for (var i = 0; i < arr.length; i++) { var val = arr[i]; if (fn.call(val, i, val, arr)) { return false; } } }; var arr = [1, 2, 3, 4]; each(arr, function (i, v) { arr[i] = v * 2; });
each函数是一个抽象类，而fn函数则是具体的实现，在这段代码中，抽象部分和实现部分的更改是互不影响的，可以独立的改变，所以，这个例子虽然简单，但是是一个典型的桥接模式的应用。
在事件中使用桥接模式
比如鼠标点击事件，字体和颜色发生对应的改变
html:: <ul> <li onclick="test1(this)" id="li1">测试1</li> <li onclick="test2(this)" id="li2">测试2</li> <li onclick="test3(this)" id="li3">测试3</li> <li onclick="test4(this)" id="li4">测试4</li> </ul>
使用桥接模式，首先将公共的方法进行抽离，抽象的部分
function some(dom, color, size) { dom.style.color = color; dom.style.fontSize = size }
然后再每个方法使用的时候，去实现
// 具体的实现 function test1(val) { some(document.getElementById(val.id), ‘red‘, ‘20px‘) } function test2(val) { some(document.getElementById(val.id), ‘green‘, ‘30px‘) } function test3(val) { some(document.getElementById(val.id), ‘blue‘, ‘40px‘) } function test4(val) { some(document.getElementById(val.id), ‘pink‘, ‘50px‘) }
桥接组织多个单元
var Class1 = function (a,b,c) { this.a = a; this.b = b; this.c = c; }; var Class2 = function (d,e) { this.d = d; this.e = e; }; var BridgeClass = function (a,b,c,d,e) { this.Class1 = new Class1(a,b,c); this.Class2 = new Class1(d,e); }
利用桥接模式，可以将多个单体组织在一起，方便简单。
使用场景：
事件回调函数、请求接口之间进行桥接、用于连接公开的API代码和私用实现的代码
优点：
1.分离接口和实现部分，一个实现未必不变的绑定在一个接口上，抽象类的实现可以在运行时刻进行配置，一个对象甚至可以在运行时刻改变它的变化，同事，抽象和实现也进行了充分的解耦，也有利于分层，从而产生更好的结构化系统。
2.提高可扩展性。
3.实现细节对客户透明，可以回客户隐藏实现细节。
缺点：
大量的类将导致开发成本的增加，同时在性能方面也可能会有所减少。
总结
学习桥接模式关键是要理解抽象部分与实现部分的分离，使二者可以独立的变化，而不互相约束影响。js插件灵活的变化，适用场景的多变就非常适合使用这种模式来实现，使用桥接模式最重要的就是找出系统中不同的变化维度。
标签：idg 应用 理解 this strong 事件 不同 解释 学习
原文地址：https://www.cnblogs.com/mn6364/p/11028505.html
