码迷,mamicode.com
首页 > Web开发 > 详细

js --桥接模式

时间:2019-06-18 19:42:08      阅读:155      评论:0      收藏:0      [点我收藏+]

标签: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插件灵活的变化,适用场景的多变就非常适合使用这种模式来实现,使用桥接模式最重要的就是找出系统中不同的变化维度。

 

js --桥接模式

标签:idg   应用   理解   this   strong   事件   不同   解释   学习   

原文地址:https://www.cnblogs.com/mn6364/p/11028505.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!