介绍
- 发布订阅
- 一对多
实例
- 肯德基点餐后等着被叫号
- 订报纸后每天等着送报纸
UML
![image]https://www.ahwgs.cn/wp-content/uploads/2019/01/7O6ZU39F9R0PB_RPM1D.png)
代码演示
// 主题 保存状态 状态变化之后触发所有观察者
class Subject{
constructor() {
this.state = 0
this.obsevers = []
}
getState(){
return this.state
}
setState(state){
this.state = state
this.notifyAllObservers()
}
notifyAllObservers(){
this.obsevers.forEach(observer=>{
observer.update()
})
}
attach(observer){
this.obsevers.push(observer)
}
}
//观察者
class Observer{
constructor(name,subject) {
this.name = name;
this.subject = subject
this.subject.attach(this)
}
update(){
console.log(this.name +'-----'+ this.subject.getState())
}
}
//测试
//初始化一个主题
let s = new Subject()
let ob1 = new Observer('ob1',s)
let ob2 = new Observer('ob2',s)
let ob3 = new Observer('ob3',s)
s.setState(1)
s.setState(2)
s.setState(3)
image
- 每一次
setState都会触发所有的观察者更新
场景
- 网页事件绑定
- Promise
- jQ callbacks
- nodejs自定义事件
网页事件绑定
<button id="btn1">btn</button>
function $(ele) {
return document.querySelector(ele)
}
$('#brn1').click()function f() {
console.log(2)
}
$('#brn1').click()function f() {
console.log(3)
}
$('#brn1').click()function f() {
console.log(4)
}
// 2 3 4
- 为一个元素绑定多个事件 会同时更新状态
Promise
function loadImg(src) {
return new Promise((resolve, reject)=>{
const img = document.createElement('img');
img.onload = function () {
resolve(img)
}
img.onerror = function () {
reject('图片加载失败')
}
img.src = src
})
}
let src = ''
let result = loadImg(src)
result.then(function (img) {
console.log(img.width)
return img
}).then(function (img) {
console.log(img.height)
})
- 两个
then执行的函数，如果promise变化，那么这两个then里面的数据也会同时变化
jq callbacks
var callbacks = $.Callback()
callbacks.add(function (info) {
console.log('fun1',info)
})
callbacks.add(function (info) {
console.log('fun2',info)
})
callbacks.add(function (info) {
console.log('fun3',info)
})
callbacks.fire('gogogo')
callbacks.fire('fire')
nodejs自定义事件
const EventEmitter = require('event').EventEmitter
const emitter1 = new EventEmitter()
emitter1.on('some',()=>{
//监听
console.log('some event 1')
})
emitter1.on('some',()=>{
//监听
console.log('some event 2')
})
emitter1.emit('some')
class Dog extends EventEmitter{
constructor(name){
super();
this.name = name
}
}
var simon = new Dog('simon')
simon.on('back',function () {
console.log('---'+this.name +'back')
})
setInterval(()=>{
simon.emit('back')
},500)
其他场景
-
nodejs处理http请求，多进程通信 -
vue/react组件生命周期触发 -
vue watch监听data变化
代码:
原文
https://www.ahwgs.cn/javascriptshejimoshizhiguanchazhemoshi.html
