设计模式-中介者模式

概念

如下图:

演示

js 复制代码
class Mediator {
    constructor(a, b) {
        this.a = a
        this.b = b
    }
    setA() {
        let number = this.b.number
        this.a.setNumber(number * 100)
    }
    setB() {
        let number = this.a.number
        this.b.setNumber(number / 100)
    }
}

class A {
    constructor() {
        this.number = 0;
    }
    setNumber(num, m) {
        this.number = num
        if (m) {
            m.setB()
        }
    }
}

class B {
    constructor() {
        this.number = 0
    }
    setNumber(num, m) {
        this.number = num
        if (m) {
            m.setA()
        }
    }
}

// 测试
let a = new A()
let b = new B()
let m = new Mediator(a, b)
a.setNumber(100, m)
console.log(a.number, b.number)
b.setNumber(100, m)
console.log(a.number, b.number)

设计原则验证

  • 将各关联对象通过中介者隔离
  • 符合开放封闭原则
相关推荐
大尚来也4 分钟前
驾驭并发:.NET多线程编程的挑战与破局之道
java·前端·算法
快乐小土豆~~11 分钟前
echarts柱状图的X轴label过长被重叠覆盖
前端·javascript·vue.js·echarts
hhcccchh21 分钟前
1.1 HTML 语义化标签(header、nav、main、section、footer 等)
java·前端·html
小李子呢02111 小时前
前端八股2---Proxy 代理
前端·javascript·vue.js
bjzhang751 小时前
使用 HTML + JavaScript 实现组织架构图
前端·javascript·html·组织架构图
军军君011 小时前
Three.js基础功能学习十六:智能黑板实现实例三
前端·javascript·css·vue.js·3d·前端框架·threejs
海上彼尚1 小时前
SVG矢量图形快速入门
前端·html5
嗷o嗷o2 小时前
Android App Functions 深入理解
前端
UXbot2 小时前
AI原型设计工具评测:从创意到交互式Demo,5款产品全面解析
前端·ui·设计模式·ai·ai编程·原型模式
落魄江湖行2 小时前
硅基同事埋的坑,我用2小时才填平:Nuxt 4 路由踩坑:可选参数 [[id]] 与 [id] 的区别
前端