设计模式-桥接模式

概念

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

演示

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()

设计原则验证

  • 抽象和实现分离,解耦
  • 符合开放封闭原则
相关推荐
Makoto_Kimur37 分钟前
Spring用了哪些设计模式?
java·spring·设计模式
江-月*夜1 小时前
vue3 wordcloud2.js词云使用
开发语言·javascript·vue.js
qq_12084093711 小时前
Three.js 工程向:Frustum Culling 与场景分块优化实战
前端·javascript
ZC跨境爬虫1 小时前
3D地球卫星轨道可视化平台开发 Day14(彻底移除多余阴影)
前端·javascript·3d·信息可视化·json
不会敲代码11 小时前
从零开始读懂 MCP:大模型如何通过标准化协议“调用”你的工具?
javascript·cursor·trae
ZC跨境爬虫1 小时前
3D 地球卫星轨道可视化平台开发 Day12(解决初始相位拥挤问题,实现卫星均匀散开渲染)
前端·javascript·算法·3d·json
sg_knight1 小时前
设计模式实战:中介者模式(Mediator)
microsoft·设计模式·中介者模式
好雨知时节t1 小时前
告别“刷新”:一文搞懂 WebSocket、SSE 与轮询机制
javascript·ai编程
userxxcc2 小时前
Waigo是用“Golang+Web”写的“视图窗口+稳定服务”的桌面端(Win、Mac、Ubuntu)多功能程序基座。开箱即用但有一定上手门槛。
javascript·golang·桌面应用基座·wails3