设计模式-桥接模式

概念

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

演示

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

设计原则验证

  • 抽象和实现分离,解耦
  • 符合开放封闭原则
相关推荐
windliang19 分钟前
Claude Code 源码分析(十二):错误处理与自动恢复:让 Agent 稳定运行
前端·javascript·面试
默_笙28 分钟前
🛬 前端路由的"高级玩法":懒加载、404、鉴权路由,一个都不能少(下篇)
前端·javascript
sunly_28 分钟前
TypeScript:3、类型声明与类型推断
javascript·ubuntu·typescript
奥莱维2 小时前
【无标题】
java·前端·javascript
黄金决明子3 小时前
浏览器Window底层操作全解
前端·javascript
AI视觉网奇4 小时前
cannot import name ‘model_urls‘ from ‘torchvision.models.resnet‘
linux·前端·javascript
Sca_杰4 小时前
微信客服API对接速通
javascript·node.js
大家的林语冰5 小时前
👍 JS 还在进化,ES2026 正式推出,最新七大特性补全!
前端·javascript·json
铁皮饭盒5 小时前
DeepSeek V4 Pro 0813发布了, 也可以部署到 Codex 了
前端·javascript·后端
Highcharts.js5 小时前
Vue 3 + Highcharts Boost 可视化加速模块的完整示例
javascript·vue.js·可视化·boost·highcharts·图表渲染·加速模块