首页 > 代码库 > JavaScript设计模式与开发实践---读书笔记(8) 发布-订阅模式
JavaScript设计模式与开发实践---读书笔记(8) 发布-订阅模式
发布-订阅模式又叫观察者模式，它定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知。
发布-订阅模式可以广泛应用于异步编程中，这是一种替代传递回调函数的方案。
可以取代对象之间硬编码的通知机制，一个对象不用再显式地调用另外一个对象的某个接口。
自定义事件
- 首先要指定好谁充当发布者；
- 然后给发布者添加一个缓存列表，用于存放回调函数以便通知订阅者；
- 最后发布消息时，发布者会遍历这个缓存列表，依次触发里面存放的订阅者回调函数。
另外，我们还可以往回调函数里填入一些参数，订阅者可以接收这些参数。
最简单的发布-订阅模式：
var salesOffices = {}; //定义售楼处 salesOffices.clientList = []; //缓存列表，存放订阅者的回调函数 salesOffices.listen = function(fn){ //增加订阅者 this.clientList.push(fn); //订阅的消息添加进缓存列表 }; salesOffices.trigger = function(){ //发布模式 for(var i=0,fn;fn = this.clientList[i++]; ){ fn.apply(this,arguments); //arguments是发布消息时带上的参数 } }; salesOffices.listen(function(price,squareMeter){//小明订阅消息 console.log(‘价格=‘+price); console.log(‘squareMeter=‘+squareMeter); }); salesOffices.listen(function(price,squareMeter){//小红订阅消息 console.log(‘价格=‘+price); console.log(‘squareMeter=‘+squareMeter); }); salesOffices.trigger(2000000,88);//输出：200万，88平方米 salesOffices.trigger(3000000,110);//输出：300万，110平方米
让订阅者只订阅自己感兴趣的消息：
var salesOffices = {}; //定义售楼处 salesOffices.clientList = []; //缓存列表，存放订阅者的回调函数 salesOffices.listen = function(key,fn){ if(!this.clientList[key]){ //如果还没有订阅过此类消息，给该类消息创建一个缓存列表 this.clientList[key] = []; } this.clientList.push(fn); //订阅的消息添加进缓存列表 }; salesOffices.trigger = function(){ //发布消息 var key = Array.prototype.shift.call(arguments), //取出消息类型 fns = this.clientList[key]; //取出该消息对应的回调函数集合 if(!fns || fns.length ===0 ){ //如果没有订阅该消息，则返回 return false; }; for(var i=0,fn;fn = this.clientList[i++]; ){ fn.apply(this,arguments); //arguments是发布消息时附送的参数 } }; salesOffices.listen(‘squareMeter88‘,function(price){//小明订阅88的消息 console.log(‘价格=‘+price); }); salesOffices.listen(‘squareMeter110‘,function(price){//小红订阅110的消息 console.log(‘价格=‘+price); }); salesOffices.trigger(‘squareMeter88‘,88); salesOffices.trigger(‘squareMeter110‘,110);
通用实现：
//发布-订阅功能 var event = { clientList:[], listen: function(key,fn){ if(!this.clientList[key]){ this.clientList[key] = []; } this.clientList[key].push(fn); //订阅的消息添加进缓存列表 }, trigger: function(){ var key = Array.prototype.shift.call(arguments), fns = this.clientList[key]; if(!fns || fns.length ===0 ){ //如果没有绑定对应的消息 return false; } for(var i =0 ,fn;fn = fns[i++]; ){ fn.apply(this.arguments); //arguments是trigger时带上的参数 } } };//给所有的对象都动态安装发布-订阅功能 var installEvent = function(obj){ for(var i in event){ obj[i] = event[i]; } }; var salesOffices = {}; installEvent(salesOffices); salesOffices.listen(‘squareMeter88‘,function(price){ //小明订阅消息 console.log(‘价格=‘+price); }); salesOffices.listen(‘squareMeter110‘,function(price){ //小红订阅消息 console.log(‘价格=‘+price); }); salesOffices.trigger(‘squareMeter88‘,2000000); salesOffices.trigger(‘squareMeter110‘,3000000);
取消订阅的事件：
//取消订阅的事件 event.remove = function(key,fn){ var fns = this.clientList[key] if(!fns){ //如果key对应的消息没有被人订阅，则直接返回 return false; } if(!fn){ //如果没有传入具体的回调函数，表示需要取消key对应消息的所有订阅 fns&&(fns.length = 0); }else{ for(var l = fns.length-1;l>=0;l--){ //反向遍历订阅的回调函数列表 var _fn = fns[l]; if(_fn === fn){ fns.splice(l,1);//删除订阅者的回调函数 } } } }; var salesOffices = {}; var installEvent = function(obj){ for(var i in event){ obj[i] = event[i]; } } installEvent(salesOffices); salesOffices.listen(‘squareMeter88‘,fn1=function(price){ //小明订阅消息 console.log(‘价格=‘+price); }); salesOffices.listen(‘squareMeter110‘,fn2=function(price){ //小红订阅消息 console.log(‘价格=‘+price); }); salesOffices.remove(‘squareMeter88‘,fn1); salesOffices.trigger(‘squareMeter110‘,2000000);
全局的发布-订阅模式：
发布-订阅模式可以用一个全局的Event对象来实现，订阅者不需要了解清楚来自哪个发布者，发布者也不知道消息会推送给哪些订阅者，Event作为一个类似“中介者”的角色，把订阅者和发布者联系起来。
var Event = (function(){ var clientList = {}, listen, trigger, remove; listen = function(key,fn){ if(!clientList[key]){ clientList[key] = []; } clientList[key].push(fn); }; trigger = function(){ var key = Array.prototype.shift.call(arguments), fns = clientList[key]; if(!fns||fns.length===0){ return false; } for(var i=0,fn;fn=fns[i++]; ){ fn.apply(this,arguments); } }; remove = function(key,fn){ var fns = clientList[key]; if(!fns){ return false; } if(!fn){ fns&&(fns.length = 0); }else{ for(var l=fns.length-1;l>=0;l--){ var _fn = fns[l]; if(_fn ===fn){ fns.splice(l,1); } } } }; return { listen:listen, trigger:trigger, remove:remove } })(); Event.listen(‘squareMeter88‘,function(price){ console.log(‘价格=‘+price); }); Event.trigger(‘squareMeter88‘,2000000);
模块间通信：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>模块间通信</title></head><body> <button id="count">点我</button> <div id="show"></div></body></html><script> var a = (function(){ var count = 0; var button = document.getElementById(‘count‘); button.click = function(){ Event.trigger(‘add‘,count++); } })(); var b = (function(){ var div = document.getElementById(‘show‘); Event.listen(‘add‘,function(count){ div.innerHTML = count; }); })();</script>
必须先订阅再发布吗？
在某些情况下，我们需要先将这条消息保存下来，等到有对象来订阅它的时候，再重新把消息发布给订阅者。
全局事件的命名冲突：
给Event对象提供创建命名空间的功能。
在JavaScript中，我们用注册回调函数的形式来代替传统的发布-订阅模式，显得更加优雅和简单。
发布-订阅模式的优点非常明显，一位时间上的解耦，二为对象上的解耦。
JavaScript设计模式与开发实践---读书笔记(8) 发布-订阅模式
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。