JS 桥接模式

1. 简介

桥接模式(Bridge)将抽象部分与它的实现部分分离,使它们都可以独立地变化。 其实就是函数的封装,比如要对某个DOM元素添加colorbackgroundColor,可以封装个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. 总结

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

  • 分离接口和实现部分,一个实现未必不变地绑定在一个接口上,抽象类(函数)的实现可以在运行时刻进行配置,一个对象甚至可以在运行时刻改变它的实现,同将抽象和实现也进行了充分的解耦,也有利于分层,从而产生更好的结构化系统。
  • 提高可扩充性
  • 对客户隐藏实现细节。

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

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

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

  1. JS 抽象工厂模式
  2. JS 工厂模式
  3. JS 建造者模式
  4. JS 原型模式
  5. JS 单例模式
  6. JS 回调模式
  7. JS 外观模式
  8. JS 适配器模式
  9. JS 利用高阶函数实现函数缓存(备忘模式)
  10. JS 状态模式
  11. JS 桥接模式
  12. JS 观察者模式

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JS 观察者模式

    观察者模式又叫发布订阅模式(Publish/Subscribe),它定义了一种一对多的关系,让多个观察者对象同时监听某一个主题对象,这个主题对象的状态发生变化时...

    前端下午茶
  • JS 原型模式

    原型模式(Prototype pattern),用原型实例指向创建对象的类,使用于创建新的对象的类的共享原型的属性与方法。

    前端下午茶
  • JavaScript 设计模式系列 - 享元模式与资源池

    享元模式 (Flyweight Pattern)运用共享技术来有效地支持大量细粒度对象的复用,以减少创建的对象的数量。

    前端下午茶
  • 七、this

    我们在学习JavaScript的过程中,由于对一些概念理解得不是很清楚,但是又想要通过一些方式把它记下来,于是就很容易草率的给这些概念定下一些方便自己记忆的有偏...

    用户6901603
  • 我对JavaScript中this的一些理解

    因为日常工作中经常使用到this,而且在JavaScript中this的指向问题也很容易让人混淆一部分知识。 这段时间翻阅了一些书籍也查阅了网上一些资料然后结合...

    九旬
  • ThinkPHP 3.2.3实现加减乘除图片验证码

    ThinkPHP 3.2.3 自带的验证码类位于 /ThinkPHP/Library/Think/Verify.class.php,字体文件位于 /ThinkP...

    砸漏
  • java队列

    队列为特殊的线性表,队列的特点先进先出(FIFO),队列插入为入队,队列删除为出对。

    mySoul
  • PHP高级编程之守护进程

    PHP高级编程之守护进程 摘要 2014-09-01 发表 2015-08-31 更新 2015-10-20 更新,增加优雅重启 ---- 目录 1. 什么是守...

    netkiller old
  • PHP高级编程之守护进程

    PHP高级编程之守护进程 摘要 2014-09-01 发表 2015-08-31 更新 2015-10-20 更新,增加优雅重启 ---- 目录 1. 什么是守...

    netkiller old
  • 面向对象版tab 栏切换案例

    梨涡浅笑

扫码关注云+社区

领取腾讯云代金券