设计模式-桥接模式

概念

  • 用于把抽象化与实现化解耦
  • 使得二者可以独立变化

演示

js 复制代码
class ColorShape {
    yellowCircle() {
        console.log('yellow circle')
    }
    redCircle() {
        console.log('red circle')
    }
    yellowTriangle() {
        console.log('yellow triangle')
    }
    redTriangle() {
        console.log('red triangle')
    }
}

// 测试
let cs = new ColorShape()
cs.yellowCircle()
cs.redCircle()
cs.yellowTriangle()
cs.redTriangle()

下面是桥接模式代码:

js 复制代码
class Color {
    constructor(name) {
        this.name = name
    }
}

class Shape {
    constructor(name, color) {
        this.name = name
        this.color = color
    }
    draw() {
        console.log(`${this.color.name} ${this.name}`)
    }
}

// 测试
let red = new Color('red')
let yellow = new Color('yellow')

let circle = new Shape('circle', red)
circle.draw()
let triangle = new Shape('triangle', yellow)
triangle.draw()

设计原则验证

  • 抽象和实现分离,解耦
  • 符合开放封闭原则
相关推荐
全栈前端老曹8 分钟前
【Redis】发布订阅模型 —— Pub/Sub 原理、消息队列、聊天系统实战
前端·数据库·redis·设计模式·node.js·全栈·发布订阅模型
奋斗吧程序媛19 分钟前
vue3初体验(1)
前端·javascript·vue.js
资深web全栈开发30 分钟前
设计模式之桥接模式 (Bridge Pattern)
javascript·设计模式·桥接模式
UIUV32 分钟前
语义化搜索学习笔记(结合代码实战)
javascript·后端·node.js
2301_7965125233 分钟前
【精通篇】打造React Native鸿蒙跨平台开发高级复合组件库开发系列:订单步骤条实践
javascript·react native·react.js·ecmascript·harmonyos
程序员酥皮蛋35 分钟前
react 01 初学react
前端·javascript·react.js
程序员林北北37 分钟前
【前端进阶之旅】3 道前端超难面试题深度解析(2026 版)|附完整代码 + 实战场景
前端·javascript·css3·html5
东东5161 小时前
ssm机场网上订票系统 +VUE
java·前端·javascript·vue.js·毕设
无巧不成书02181 小时前
React Native 鸿蒙开发(RNOH)深度适配
前端·javascript·react native·react.js·前端框架·harmonyos
2301_796512521 小时前
【精通篇】打造React Native鸿蒙跨平台开发高级复合组件库开发系列:Tag 标签(通过 type 属性控制标签颜色)
javascript·react native·react.js·ecmascript·harmonyos