定义:

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

也就是说,桥接模式里面有两个角色:

- 扩充抽象类

- 具体实现类

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

抽象的概念:

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

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

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

// 定义形状的方法--抽象的方法,表示某一实物的共同特征
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 = ; i < arr.length; i++) {
var val = arr[i];
if (fn.call(val, i, val, arr)) {
return false;
}
}
};
var arr = [, , , ];
each(arr, function (i, v) {
arr[i] = v * ;
});

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 --桥接模式的更多相关文章

  1. js桥接模式

    桥接模式(Bridge),将抽象部分与它的实现部分分离,使它们都可以独立地变化. 抽象化和实现部分在一起,桥接模式的目的就是使两者分离,根据面向对象的封装变化的原则,我们可以把实现部分的变化封装到另外 ...

  2. js设计模式-桥接模式

    桥接模式定义:桥梁模式的用意是"将抽象化(Abstraction)与实现化(Implementation)脱耦,使得二者可以独立地变化".这句话有三个关键词,也就是抽象化.实现化和 ...

  3. 《JS设计模式笔记》 4,桥接模式

    //桥接模式的作用在于将实现部分和抽象部分分离开来,以便两者可以独立的变化. var singleton=function(fn){ var result; return function(){ re ...

  4. js设计模式(3)---桥接模式

    0.前言 看设计模式比较痛苦,一则是自己经验尚浅,不能体会到使用这些设计模式的益处:二则是不能很好把握使用这些设计模式的时机.所以这一部分看得断断续续,拖拖拉拉,为了了却这快心病,决定最近一口气看完几 ...

  5. js原生设计模式——13桥接模式(相同业务逻辑抽象化处理的职责链模式)

    桥接模式之多元化类之间的实例化调用实例 <!DOCTYPE html><html lang="en"><head>    <meta ch ...

  6. JS设计模式——8.桥接模式

    桥接模式的用途 在实现API的时候,桥接模式非常有用. 在设计一个JavaScript API的时候,可以用这个模式来弱化它与使用它的类和对象之间的耦合. 示例:事件监听器 桥接模式最常见和实际的应用 ...

  7. JS常用的设计模式(6)——桥接模式

    桥接模式的作用在于将实现部分和抽象部分分离开来, 以便两者可以独立的变化.在实现api的时候, 桥接模式特别有用.比如最开始的singleton的例子. var singleton = functio ...

  8. 【读书笔记】读《JavaScript设计模式》之桥接模式

    桥接模式(Bridge)将抽象部分与它的实现部分分离,使它们都可以独立地变化. 一.使用场景 使用场景一:事件监控 对于前端而言,最典型的使用场景——事件监控.如—— addEvent(element ...

  9. 再起航,我的学习笔记之JavaScript设计模式14(桥接模式)

    桥接模式 桥接模式(Bridge): 在系统沿着多个维度变化的同时,又不增加其复杂度并已达到解耦 从定义上看桥接模式的定义十分难以理解,那么我们来通过示例来演示什么是桥接模式. 现在我们需要做一个导航 ...

随机推荐

  1. edusoho上传视频弹出abort之解决方案

    错误描述:edusoho上传如avi.mp4等容量大的图片(如100m以上或500m等)弹出abort提示框 原因:是因为web服务器apache默认上传文件有限制导致的 解决办法如下: (1)首先修 ...

  2. 刷题记录:[CISCN2019 华北赛区 Day2 Web1]Hack World

    目录 刷题记录:[CISCN2019 华北赛区 Day2 Web1]Hack World 一.前言 二.正文 1.解题过程 2.解题方法 刷题记录:[CISCN2019 华北赛区 Day2 Web1] ...

  3. GIT生成SSH-KEY公钥放到服务器免密登录

    在使用git时老是碰到在push的时候提示没有权限的问题,那么现在咱们就来创建ssh-key来免密登录.我们来看看如何配置服务器端的 SSH 访问. 本例中,我们将使用 authorized_keys ...

  4. CentOS7安装JDK1.8图文教程

    https://blog.csdn.net/weixin_42266606/article/details/80863781 1.下载 jdk 的 tar 包 网址:http://www.oracle ...

  5. sqlite数据库使用具体案例以及mysqlite.db数据库

    本文操作是测试数据库的其中一张表,其中包括清空sqlite数据库MyGroup表中的数据,清空sqlite数据库sqlite_sequence表中的自增变量,sqlite数据库MyGroup直接插入数 ...

  6. [转]Oracle 查询表外键相关信息

    原文地址:https://www.csdn.net/gather_27/MtTaUgxsNzYxMi1ibG9n.html 查找表的外键(包括名称,引用表的表名和对应的键名,下面是分成多步查询): s ...

  7. ISO/IEC 9899:2011 条款1——范围

    1. 范围 1.本国际标准指定了C编程语言的形式并建立了对用C编程语言进行编写程序的诠释.[注:国际标准的设计是用于提升在多种数据处理系统中的C程序的可移植性.其目的在于能够被实现者与程序员所使用.] ...

  8. forever at your feet

    A locket on a chainA bow that's made from rainA briar grows entwined with roseI've come to be foreve ...

  9. 【翻译】Flink Table Api & SQL —— 概念与通用API

    本文翻译自官网:https://ci.apache.org/projects/flink/flink-docs-release-1.9/dev/table/common.html Flink Tabl ...

  10. 用js实现promise

    /*       自定义promise         1. 执行MyPromise构造函数,要立即执行executor         2. promise实例对象,内部有三种状态          ...