设计模式-桥接模式

概念

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

演示

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

设计原则验证

  • 抽象和实现分离,解耦
  • 符合开放封闭原则
相关推荐
念念不忘 必有回响3 分钟前
Vue页面布局与路由映射实战:RouterView嵌套及动态组件生成详解
前端·javascript·vue.js
冰暮流星4 分钟前
javascript数据类型转换-转换为数字型
开发语言·前端·javascript
千里马-horse20 分钟前
React Native bridging 源码分析--ClassTest.cpp
javascript·c++·react native·react.js·bridging
小高00723 分钟前
2026 年,只会写 div 和 css 的前端将彻底失业
前端·javascript·vue.js
www_stdio25 分钟前
Git 提交AI神器:用大模型帮你写出规范的 Commit Message
前端·javascript·react.js
摘星编程33 分钟前
Flutter for OpenHarmony 实战:SliverList 滑动列表详解
android·javascript·flutter
凡大来啦37 分钟前
Element plus的Select选择器点击不出现下拉列表
javascript·vue.js·elementui
DEMO派42 分钟前
CSS优先级规则以及如何提升优先级方案详解
前端·javascript·css·vue.js·reactjs·html5·angular.js
小夏卷编程1 小时前
ant-design-vue 2.0 a-table 中实现特殊行样式,选中样式,鼠标悬浮样式不一样
前端·javascript·vue.js
Yu_Lijing1 小时前
基于C++的《Head First设计模式》笔记——命令模式
c++·笔记·设计模式