设计模式-桥接模式

概念

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

演示

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

设计原则验证

  • 抽象和实现分离,解耦
  • 符合开放封闭原则
相关推荐
转角羊儿9 分钟前
uni-app文章列表制作⑧
前端·javascript·uni-app
Bio Coder1 小时前
学习用 Javascript、HTML、CSS 以及 Node.js 开发一个 uTools 插件,学习计划及其周期
javascript·学习·html·开发·utools
凹凸曼打不赢小怪兽2 小时前
react 受控组件和非受控组件
前端·javascript·react.js
忠实米线3 小时前
使用pdf-lib.js实现pdf添加自定义水印功能
前端·javascript·pdf
明辉光焱4 小时前
[Electron]总结:如何创建Electron+Element Plus的项目
前端·javascript·electron
牧码岛4 小时前
Web前端之汉字排序、sort与localeCompare的介绍、编码顺序与字典顺序的区别
前端·javascript·web·web前端
云空4 小时前
《InsCode AI IDE:编程新时代的引领者》
java·javascript·c++·ide·人工智能·python·php
咔咔库奇5 小时前
ES6基础
前端·javascript·es6
matrixlzp5 小时前
Java 责任链模式 减少 if else 实战案例
java·设计模式
bug爱好者5 小时前
如何解决sourcetree 一打开就闪退问题
前端·javascript·vue.js