发布订阅模式&观察者模式

126 阅读1分钟

引言

这篇文章实用性比较强,很简单。所以简单介绍之后便直接上代码演示了。

发布订阅模式: 
比喻:你也可以说订阅发布其实理解起来很简单。打个比方,当我们在网购时我们首先把需要买的若干个物品装入购物车,这个过程相当
于订阅,当采购完毕我们进行付款,付完款的一刻就相当于发布(商品开始按流程向你走来)。
实现:把订阅的事件存储在数组中,当发布的时候触发则全部依次执行

观察者模式:

发布订阅模式和观察者模式有什么区别? 发布和订阅模式中发布和订阅直接关系,订阅完了,发布就好了。观察者模式本质也是发布订阅,但发布和订阅是有关系的。

发布订阅模式

const fs = require("fs");

interface events {
     arr:Array<Function>,
     on(fn:Function):void,
     emit():void,
}
	
let events = {
    arr:[],
    on(fn) {
    	this.arr.push(fn);
    },
    emit(){
    	this.arr.forEach(fn => fn())
    }
}

interface IPerson {
	name: string,
    age: number,
}
let person = {} as IPerson;

events.on(() => {
	if(Object.keys(person).length === 2) {
    	console.log(person)
    }
})
events.on(() => {
	console.log('订阅的第二个事件')
})
fs.readFile("./age.txt",'utf-8',(err,data) => {
	person.age = data;
    events.emit();
})
fs.readFile("./name.txt",'utf-8',(err,data) => {
	person.name = data;
    events.emit();
})


观察者模式

class Baby {//被观察者
    name:string  //实例上面有一个name属性
    state: string
    observers: Observer[]
    constructor(name:string) {
    	this.name = name
        this.observers = []
        this.state = '小孩冷'
    }
    attach(objArg) {
    	this.observers.push(objArg);
    }
    setState(newState) {
    	this.state = newState;
        this.observers.forEach(o => o.update(this));
    }
}

class Observer {
    name: string
    constructor(name:string){
    	this.name = name;
    }
    update(baby: Baby) {
    	console.log(baby.name + this.name + baby.state)
    }
}
let baby = new Baby('小明');
let father = new Observer('小明巴巴')
let mother = new Observer('小明麻麻')
baby.attach(father);
baby.attach(mother);
baby.setState('我热');
baby.setState('我不冷也不热了');