js --桥接模式

Posted 2022-01-21 mn6364

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js --桥接模式相关的知识，希望对你有一定的参考价值。

定义：

将抽象部分与它的实现部分分离，使他们都可以独立的变化。

也就是说，桥接模式里面有两个角色：

- 扩充抽象类

- 具体实现类

在写桥接模式之前，想在写一下关于抽象的理解。我觉得抽象这个概念过于抽象，而不易于理解。

抽象的概念：

从具体事物抽出、概括出它们共同的方面、本质属性与关系等，而将个别的、非本质的方面、属性与关系舍弃，这种思维过程，称为抽象。 ---[百度百科]

在自然语言中，很多人把凡是不能被人们的感官所直接把握的东西，也就是通常所说的“看不见，摸不着”的东西，叫做抽象。

比如：物体的形状,颜色都是抽象的，我们去定义一个物体形状的抽象方法

// 定义形状的方法--抽象的方法，表示某一实物的共同特征
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);