共计 1106 个字符,预计需要花费 3 分钟才能阅读完成。
定义:公布 / 订阅与观察者模式原理差不多,都是定义一对多的依赖关系,当相干状态更新就会触发相应的更新
本文代码执行流程与流程图基本相同(本文仅为了加深了解,没有增加勾销订阅等办法)
// 发布者
function Publish() {this.themes = []
// 增加
this.setCol = function (theme) {this.themes.push(theme)
}
// 主题更新
this.public = function (theme) {const { themes} = this
for (let i = 0; i < themes.length; i++) {if (themes[i] === theme) {console.log(` 发布者触发 ${theme.name}主题更新 `)
theme.notify()}
}
}
}
// 主题
function Theme(name, callback) {
this.name = name
this.callback = callback
this.subscrib = []
this.setSub = function (sub) {this.subscrib.push(sub)
}
this.notify = function () {console.log(`${this.name}主题触发更新 `)
this.subscrib.forEach((item) => {item.updated(callback)
})
}
}
// 订阅者
function Subscrib(name) {
this.name = name
this.updated = function (callback) {console.log(`${this.name}接管到新音讯 `, callback(this.name))
}
}
const sub1 = new Subscrib('订阅者 1')
const sub2 = new Subscrib('订阅者 2')
const theme1 = new Theme('三国', (e) => e)
const theme2 = new Theme('楚汉', (e) => e)
const publish = new Publish('发布者')
publish.setCol(theme1)
publish.setCol(theme2)
theme1.setSub(sub1)
theme2.setSub(sub1)
theme2.setSub(sub2)
publish.public(theme1)
/*
发布者触发三国主题更新
三国主题触发更新
订阅者 1 接管到新音讯 订阅者 1
*/
publish.public(theme2)
/*
发布者触发楚汉主题更新
楚汉主题触发更新
订阅者 1 接管到新音讯 订阅者 1
订阅者 2 接管到新音讯 订阅者 2
*/
正文完
发表至: javascript
2021-11-19