当前位置: 首页 > news >正文

【Javascript】设计模式之发布订阅模式

文章目录

  • 1、现实中的发布-订阅模式
  • 2、DOM 事件
  • 3、简单的发布-订阅模式
  • 4、通用的发布-订阅模式
  • 5、先发布再订阅
  • 6、小结

发布—订阅模式又叫观察者模式,它定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知。在 JavaScript 开发中,我们一般用事件模型来替代传统的发布—订阅模式

1、现实中的发布-订阅模式

小明最近看上了一套房子,到了售楼处之后才被告知,该楼盘的房子早已售罄。好在售楼
处告诉小明,不久后还有一些尾盘推出。于是小明离开之前,把电话号码留在了售楼处,相同的还有小红,小强。于是新楼盘推出的时候,售楼处会翻开花名册,遍历上面的电话号码,依次发送一条短信来通知他们

2、DOM 事件

只要我们曾经在 DOM 节点上面绑定过事件函数,那我们就曾经使用过发布—订阅模式

document.body.addEventListener( 'click', function(){ alert(2); 
}, false ); document.body.click(); // 模拟用户点击

3、简单的发布-订阅模式

发布-订阅模式的实现步骤
1、定义发布者
2、给发布者添加一个缓存列表,用于存放回调函数以便通知订阅者
3、最后发布消息的时候,发布者会遍历这个缓存列表,依次触发里面存放的订阅者回调函数

代码示例:

var salesOffices = {}; // 定义发布者
salesOffices.clientList = []; // 缓存列表,存放订阅者的回调函数
salesOffices.listen = function (fn) {// 增加订阅者this.clientList.push(fn); // 订阅的消息添加进缓存列表
};
salesOffices.trigger = function () {// 发布消息for (var i = 0; i < this.clientList.length; i++) {var fn = this.clientList.length;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(2000, 300);
salesOffices.trigger(2000, 700);

问题:
订阅者接收到了发布者发布的每个消息,有些并不是订阅者需要的

解决:
要增加一个标示 key,让订阅者只订阅自己感兴趣的消息:
改写代码:

var salesOffices = {}; // 定义发布者
salesOffices.clientList = {}; // 缓存对象,存放订阅者的回调函数
salesOffices.listen = function (key, fn) {if (!this.clientList[key]) {// 如果还没有订阅过此类消息,给该类消息创建一个缓存列表this.clientList[key] = [];}this.clientList[key].push(fn); // 订阅的消息添加进消息缓存列表
};
salesOffices.trigger = function () {// 发布消息var key = Array.prototype.shift.call(arguments); // 取出消息类型var fns = this.clientList[key]; // 取出该消息对应的回调函数集合if (!fns || fns.length === 0) {// 如果没有订阅该消息,则返回return false;}for (var i = 0; i < fns.length; i++) {var fn = fns[i];fn.apply(this, arguments); // (2) // arguments 是发布消息时附送的参数}
};

测试:

salesOffices.listen('squareMeter88', function (price) {// 小明订阅 88 平方米房子的消息console.log('价格= ' + price); // 输出: 2000000
});
salesOffices.listen('squareMeter110', function (price) {// 小红订阅 110 平方米房子的消息console.log('价格= ' + price); // 输出: 3000000
});salesOffices.trigger('squareMeter88', 30000);
salesOffices.trigger('squareMeter110', 70000);

4、通用的发布-订阅模式

包含:发布-订阅,取消订阅

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);var fns = this.clientList[key];if (!fns || fns.length === 0) {return false;}for (var i = 0, fn; (fn = fns[i++]); ) {fn.apply(this, arguments);}},// 增加 remove 方法remove(key, fn) {var fns = this.clientList[key];if (!fns) {return false;}if (!fn) {fns && (fns.length = 0);} else {for (var i = fns.length - 1; i >= 0; i--) {var _fn = fns[i];if (fn === _fn) {fns.splice(i, 1);}}}},
};

测试:

var f1 = function (price) {console.log('价格= ' + price);
};
Event.listen('s88', f1);var f2 = function (price) {console.log('价格= ' + price);
};
Event.listen('s110', f2);Event.remove('s110', f2); // 删除订阅Event.trigger('s88', 30000);
Event.trigger('s110', 70000);

5、先发布再订阅

应用场景:发布者发布的内容,不管订阅者在发布之前订阅,或者发布之后订阅,都可触发订阅者订阅的内容

代码:

var Event = (function () {var clientList = {};var offlineStack = {}; // 离线缓存参数var triggerStack = {}; // 已触发trigger的参数缓存var listen;var trigger;var remove;listen = function (key, fn) {if (!clientList[key]) {clientList[key] = [];}clientList[key].push(fn);// 如果此时订阅的事件,已经发布了,则自定触发一次订阅内容(fn)if (triggerStack[key]) {fn.apply(this, triggerStack[key]);} else if (offlineStack[key]) {// 如果是离线状态,则触发事件fn.apply(this, offlineStack[key]);}};trigger = function () {var key = Array.prototype.shift.call(arguments);var fns = clientList[key];if (fns) {// 已经有人订阅此事件,将参数缓存//(假如有些订阅者比较晚订阅,且发布者已经发布过了,那么这个订阅者订阅的时候,自动触发一次订阅内容)triggerStack[key] = [...arguments];for (var i = 0; i < fns.length; i++) {fns[i].apply(this, arguments);}} else {// 表示当前还没有人订阅此事件,则先将参数缓存起来offlineStack[key] = [...arguments];}};// 取消订阅remove = function (key, fn) {var fns = this.clientList[key];if (!fns) {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);}}}};return {listen: listen,trigger: trigger,remove: remove,};
})();

测试1:先订阅,再发布

// 先订阅
Event.listen('test1', function (a) {console.log('我是发布之前的订阅者1:', a);
});
Event.listen('test1', function (a) {console.log('我是发布之前的订阅者2:', a);
});
// 再发布
Event.trigger('test1', 12);// 我是发布之前的订阅者1: 12
// 我是发布之前的订阅者2: 12

测试2:先发布,再订阅

// 先发布
Event.trigger('test1', 12);// 再订阅
Event.listen('test1', function (a) {console.log('我是发布之后的订阅者1:', a);
});
Event.listen('test1', function (a) {console.log('我是发布之后的订阅者2:', a);
});// 我是发布之后的订阅者1: 12
// 我是发布之后的订阅者2: 12

测试3:先订阅,再发布,再订阅

// 先订阅
Event.listen('lis1', function (a) {console.log('我是发布之前的订阅者1:', a);
})
Event.listen('lis1', function (a) {console.log('我是发布之前的订阅者2:', a);
})// 再发布
console.log('---第1次发布');
Event.trigger('lis1', 123);
console.log('---第1次发布完成');// 再订阅
Event.listen('lis1', function (b) {console.log('我是发布之后的订阅者~:', b);
})// ---第1次发布
// 我是发布之前的订阅者1: 123
// 我是发布之前的订阅者2: 123
// ---第1次发布完成
// 我是发布之后的订阅者~: 123

测试4:先发布,再订阅,再发布,再订阅

// 先发布
console.log('------第1次发布-------');
Event.trigger('lis1', 123);// 再订阅
Event.listen('lis1', function (a) {console.log('我是发布之后的订阅者1:', a);
})
Event.listen('lis1', function (a) {console.log('我是发布之后的订阅者2:', a);
})// 再发布
console.log('------第2次发布-------');
Event.trigger('lis1', 456);// 再订阅
Event.listen('lis1', function (a) {console.log('我是发布之后的再次订阅者1:', a);
})
Event.listen('lis1', function (a) {console.log('我是发布之后的再次订阅者2:', a);
})// ------第1次发布-------
// 我是发布之后的订阅者1: 123
// 我是发布之后的订阅者2: 123// ------第2次发布-------
// 我是发布之后的订阅者1: 456
// 我是发布之后的订阅者2: 456
// 我是发布z之后的再次订阅者1: 456
// 我是发布z之后的再次订阅者2: 456

测试5:先订阅,再发布,再订阅,再发布

Event.listen('lis1', function (a) {console.log('我是发布之前的订阅者1:', a);
})
Event.listen('lis1', function (a) {console.log('我是发布之前的订阅者2:', a);
})console.log('---第1次发布');
Event.trigger('lis1', 123);
console.log('---第1次发布完成');Event.listen('lis1', function (b) {console.log('我是发布之后的订阅者~:', b);
})console.log('---第2次发布');
Event.trigger('lis1', 456);
console.log('---第2次发布完成');// ---第1次发布
// 我是发布之前的订阅者1: 123
// 我是发布之前的订阅者2: 123
// ---第1次发布完成
// 我是发布之后的订阅者~: 123// ---第2次发布
// 我是发布之前的订阅者1: 456
// 我是发布之前的订阅者2: 456
// 我是发布之后的订阅者~: 456
// ---第2次发布完成

6、小结

优点:
一为时间上的解耦,二为对象之间的解耦

缺点:
1、创建订阅者本身要消耗一定的时间和内存,而且当你订阅一个消息后,也许此消息最后都未发生,但这个订阅者会始终存在于内存中
2、如果过度使用的话,对象和对象之间的必要联系也将被深埋在背后,会导致程序难以跟踪维护和理解

应用:
应用非常广泛,既可以用在异步编程中,也可以帮助我们完成更松耦合的代码编写

http://www.lryc.cn/news/312128.html

相关文章:

  • DataLoader
  • 持续集成(CICD)- Jenkins+Git+gogs综合实战(笔记二)
  • VUE:key属性的作用
  • linux的通信方案(SYSTEM V)
  • VUE 入门及应用 ( 路由 router )
  • SpringBoot集成RocketMQ
  • 【Web】关于FastJson反序列化开始前的那些前置知识
  • 工业镜头的重要参数之视场、放大倍率、芯片尺寸--51camera
  • 基于java springboot+redis网上水果超市商城设计和实现以及文档
  • 3. 在Go语言项目中使用Zap日志库
  • 想要节省成本,哪个品牌的https证书值得考虑?
  • R语言及其开发环境简介
  • 部署DNS解析服务
  • 2024新算法:鹅算法优化VMD参数,五种适应度函数任意切换,最小包络熵、样本熵、信息熵、排列熵、排列熵/互信息熵...
  • 自定义注解校验
  • 由数据范围反推算法复杂度以及算法内容
  • js监听F11触发全屏事件
  • Seata 2.x 系列【1】专栏导读
  • fly-barrage 前端弹幕库(3):滚动弹幕的设计与实现
  • Mysql面试总结
  • 【深圳五兴科技】Java后端面经
  • 画图(ccf201409-2)解题思路
  • 蓝桥杯刷题(一)
  • 设计模式:策略模式 ⑥
  • 数据结构从入门到精通——顺序表
  • 001-CSS-水平垂直居中布局
  • 【[STM32]标准库-自定义BootLoader】
  • Spring Boot项目中不使用@RequestMapping相关注解,如何动态发布自定义URL路径
  • Vue中有哪些优化性能的方法?
  • Python pandas遍历行数据的2种方法