【JS】发布/订阅模式

介绍

Publish/Subscribe(下文简称PS)是Observer(下文简称Ob)的一个衍生，两者之间非常相似，都是观察者被观察者之间行为的监测。

不同的是，Ob的被观察者不会去关注观察者的行为动作，PS的被观察者非常依赖观察者的行为，根据观察者的行为，被观察者作出对应行为。

实现

const log = console.log;

let pubsub = {};
(ps => {
//被观察者有一个事件队列，当有事件时，被观察者才会主动作出反应。
let topics = {} , subUid = -1;
//被观察者发布信息
ps.publish = function(topic,args){
if(!topics[topic]){
return false;
}
let subscripts = topics[topic] , len = !!subscripts ? subscripts.length : 0;
while(len--){
subscripts[len].func(topic,args)
}
return this;
}

//观察者订阅被观察者的行为信息
ps.subscript = function(topic,func){
if(!topics[topic]){
topics[topic] = [];
}

let token = (++subUid).toString();
topics[topic].push({
token,func
})
return token;
}

//观察者取消订阅的被观察者的行为信息
ps.unsubscript = function(token){
for(let attr in topics){
if(topics[attr]){
let topic = topics[attr];
for(let i=0 , len=topic.length;i<len;i++){
if(Object.is(token,topic[i].token)){
topic.splice(i,1);
}
}
}
}
}
})(pubsub);

订阅、发布

观察者订阅‘/news’行为，同时设定自身的行为

pubsub.subscript('/news',function(topic , args){
log(`topic: ${topic} , title: ${args.title} , title: ${args.content}`)
});

被观察者发布被订阅的信息

pubsub.publish('/news',{
title:'Look,A Gril!!',
content:'this is gril,hhhhh'
})

输出

topic: /news , title: Look,A Gril!! , title: this is gril,hhhhh

使用场景

比如，现在有a、b、c、d四个购物车，每个购物车里面都有苹果这个商品，当苹果的单价改变时，a、b、c、d四个购物车的总价都需要改变。此时，苹果可以视为被观察者，苹果的单价视为topic，四个购物车是四个不同的观察者，每个购物车总金额的变化就是观察者行为的变化。