JS 桥接模式

chemzqm 发布于2019-08-21 18:19 / 1010人阅读

摘要：简介桥接模式将抽象部分与它的实现部分分离，使它们都可以独立地变化。同时桥接模式也有自己的缺点大量的类将导致开发成本的增加，同时在性能方面可能也会有所减少。

1. 简介

桥接模式（Bridge）将抽象部分与它的实现部分分离，使它们都可以独立地变化。
其实就是函数的封装，比如要对某个DOM元素添加color和backgroundColor，可以封装个changeColor函数，这样可以在多个相似逻辑中提升智商...

2. 实现

有时候在多维的变化中桥接模式更加实用，比如可以提取多个底层功能模块，比如提取运动，着色，说话模块，球类可以具有运动和着色模块，人类可以具有运动和说话模块，这样可以实现模块的快速组装，不仅仅是实现与抽象部分相分离了，而是更进一步功能与抽象相分离，进而 ~~提升逼格~~ 灵活的创建对象。

class Speed {            // 运动模块
  constructor(x, y) {
    this.x = x
    this.y = y
  }
  run() {  console.log(`运动起来 ${this.x} + ${this.y}`)  }
}

class Color {            // 着色模块
  constructor(cl) {
    this.color = cl
  }
  draw() {  console.log(`绘制颜色 ${this.color}`)  }
}

class Speak {
  constructor(wd) {
    this.word = wd
  }
  say() {  console.log(`说话 ${this.word}`)  }
}

class Ball {                     // 创建球类，可以着色和运动
  constructor(x, y, cl) {
    this.speed = new Speed(x, y)
    this.color = new Color(cl)
  }
  init() {
    this.speed.run()
    this.color.draw()
  }
}

class Man {                    // 人类，可以运动和说话
  constructor(x, y, wd) {
    this.speed = new Speed(x, y)
    this.speak = new Speak(wd)
  }
  init() {
    this.speed.run()
    this.speak.say()
  }
}

const man = new Man(1, 2, "hehe?")
man.init()                                // 运动起来 1 + 2      说话 hehe?

3. 总结

桥接模式的优点也很明显，我们只列举主要几个优点：

分离接口和实现部分，一个实现未必不变地绑定在一个接口上，抽象类（函数）的实现可以在运行时刻进行配置，一个对象甚至可以在运行时刻改变它的实现，同将抽象和实现也进行了充分的解耦，也有利于分层，从而产生更好的结构化系统。

提高可扩充性

对客户隐藏实现细节。

同时桥接模式也有自己的缺点：

大量的类将导致开发成本的增加，同时在性能方面可能也会有所减少。

本文是系列文章，可以相互参考印证，共同进步~

JS 抽象工厂模式

JS 工厂模式

JS 建造者模式

JS 原型模式

JS 单例模式

JS 回调模式

JS 外观模式

JS 适配器模式

JS 利用高阶函数实现函数缓存(备忘模式)

JS 状态模式

JS 桥接模式

JS 观察者模式

网上的帖子大多深浅不一，甚至有些前后矛盾，在下的文章都是学习过程中的总结，如果发现错误，欢迎留言指出~

参考：
设计模式之桥接模式
《Javascript 设计模式》 - 张荣铭

PS：欢迎大家关注我的公众号【前端下午茶】，一起加油吧~

另外可以加入「前端下午茶交流群」微信群，长按识别下面二维码即可加我好友，备注加群，我拉你入群～

私有云 idc机房托管桥接模式桥接模式linux js继承模式 JS设计模式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90349.html

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

摘要：他们两个互相独立，不会影响到对方对于两个独立变化的维度，使用桥接模式再适合不过了。桥接设计模式桥接设计模式是许多其他设计模式的基础,比如装饰模式, 代理模式都或多或少看到他的影子, 在面向对象设计中最重要的一个特点就是继承, 然而作为拓展类的功能的方式有两种 -- 继承和桥接, 桥接用我简单的理解就是放弃使用继承的方式拓展类, 而是采用包含另一个具有一定功能的对象来拓展类, 下面来...

jsdt 2019-08-26 11:47 评论0 收藏0
一个例子了解什么是桥接模式

摘要：更多前端技术和知识点，搜索订阅号菌订阅桥接模式实际上就是将逻辑抽象和具体的实现分离。以追加字符串到文件中为例代码从变为上面代码是读取某个文件并在文件中追加字符串，最后调用回调函数。请关注我的订阅号，不定期推送有关的技术文章，只谈技术不谈八卦 showImg(https://segmentfault.com/img/remote/1460000020002974?w=640&h=426)...

muzhuyu 2019-08-26 10:38 评论0 收藏0
桥接&组合

摘要：桥接实现的时候桥接模式非常有用可能正是由于这个该模式使用地不够广泛在设计时该模式可以弱化与使用它的类和对象之间的耦合该模式的作用在于将抽象与其实现隔离开让他们独立变化而且对于事件驱动编程有许多好处有以及其他基于动作的方法无论它们是用来创建鼓桥接实现 API 的时候,桥接模式非常有用,可能正是由于这个,该模式使用地不够广泛.在设计 js API 时,该模式可以弱化API 与使用它的类...

yuanxin 2019-08-20 11:14 评论0 收藏0
JS 适配器模式

摘要：另外，适配器模式和其它几个模式可能容易让人迷惑，这里说一下大概的区别适配器和桥接模式虽然类似，但桥接的出发点不同，桥接的目的是将接口部分和实现部分分离，从而对他们可以更为容易也相对独立的加以改变。 1. 简介适配器模式（Adapter）是将一个类（对象）的接口（方法或属性）转化成客户希望的另外一个接口（方法或属性），适配器模式使得原本由于接口不兼容而不能一起工作的那些类（对象）可以一...

Jeffrrey 2019-08-22 11:18 评论0 收藏0
设计模式之桥接模式

摘要：桥接模式中的所谓脱耦，就是指在一个软件系统的抽象化和实现化之间使用关联关系组合或者聚合关系而不是继承关系，从而使两者可以相对独立地变化，这就是桥接模式的用意。 0x01.定义与类型定义：将抽象部分与它的具体实现部分分离，使它们都可以独立地变化。桥接模式将继承关系转化成关联关系，它降低了类与类之间的耦合度，减少了系统中类的数量，也减少了代码量。桥接模式中的所谓脱耦，就是指在一个软...

kycool 2019-08-19 10:34 评论0 收藏0