设计模式-桥接模式

概念

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

演示

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

设计原则验证

  • 抽象和实现分离,解耦
  • 符合开放封闭原则
相关推荐
强子感冒了2 分钟前
Javascript学习笔记:BOM和DOM
javascript·笔记·学习
驴儿响叮当20105 分钟前
设计模式之建造者模式
设计模式·建造者模式
Never_Satisfied18 分钟前
在c#中,抛出异常,并指定其message的值
java·javascript·c#
Highcharts.js23 分钟前
什么是散点图?一文学会Highcharts散点图的核心特性与3D扩展应用
javascript·3d·开发文档·散点图·highcharts·图表类型
知识即是力量ol33 分钟前
口语八股—— Spring 面试实战指南(终篇):常用注解篇、Spring中的设计模式
java·spring·设计模式·面试·八股·常用注解
phltxy1 小时前
Vue Router:从入门到实战
前端·javascript·vue.js
Zhencode1 小时前
Vue3核心运行时之runtime-core
前端·javascript·vue.js
随逸1772 小时前
《吃透防抖与节流:从原理到实战,彻底解决高频事件性能问题》
javascript
千寻girling2 小时前
面试官 : “ 请说一下 JS 的常见的数组 和 字符串方法有哪些 ? ”
前端·javascript·面试
不会敲代码12 小时前
面试必考:如何优雅地将列表转换为树形结构?
javascript·算法·面试