发布-订阅者模式例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>发布--订阅者模式</title> </head> <body> <script> ////定义一所学校(中间件，事件派发中心) //主要功能包括校园网(topics)，以及学生订阅消息(subscribe)，老师发布课程(publish) let School = { type: "hunt", topics: Object.create(null), //添加订阅的事件，当一个对象订阅事件的时候，分别传入事件名字和回调函数(当订阅事件触发时候执行的操作) subscribe: function (topic, fn) { //如果派发对象内检索不到这个对象，就说明是一个新事件，新建一个数组对象，然后把该订阅者的回调放进事件对象中 //topics是一个对象，里面有多个事件对象，事件对象内部是一个数组，包含这个事件的订阅者 if (!this.topics[topic]) { this.topics[topic] = []; console.log("添加订阅" + topic + "的学生到Peter老师的订阅对象中"); this.topics[topic].push(fn); } }, // 发布事件，在事件订阅对象中检索这个事件，有就调用该对象中所有回调，否则直接返回 publish: function (topic, money) { if (!this.topics[topic]) return; for (let fn of this.topics[topic]) { console.log("校园网发布" + topic + "课程"); fn(money); } } } //定义一个师生类 //包括姓名，身份 function Student(name, identity) { this.name = name; this.identity = identity; //师生可以在校园网上发布订阅任务 //定义一个订阅函数，这里面调用了任务中心的订阅函数，收集所有订阅者的订阅事件和回调 this.subscribe = function subscribe(topic, fn) { console.log(this.identity + "的" + this.name + "在校园网订阅了" + topic + "的课程"); School.subscribe(topic, fn); }; //定义一个发布函数，这里面调用了任务中心的发布函数，调用所有订阅者的回调 this.publish = function publish(topic, money) { console.log(this.identity + "老师" + this.name + "在校园网发布了" + topic + "的课程"); School.publish(topic, money); }; } //案例开始，先定义学生，老师 let studentMing = new Student("小明", "大一"); let studentJin = new Student("小金", "大一"); let studentZhang = new Student("小张", "大一"); let studentPeter = new Student("Peter", "老师"); //小明，小金，小张分别订阅了发布课程 studentMing.subscribe("Peter老师", function (money) { console.log("小明表示：" + (money = "美术课" ? "不" : "") + "接取美术课"); }); studentJin.subscribe("Peter老师", function (money) { console.log("小金表示：接取任何课程"); }); studentZhang.subscribe("Peter老师", function (money) { console.log("小张表示：" + (money = "前端课" ? "我不上其他课," : "") + "我要上前端课啊"); }); //Peter发布了课程，美术课 studentPeter.publish("Peter老师", "美术课"); </script> </body> </html>
发布订阅者模式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>发布订阅者模式</title> </head> <body> <script> // 创建一个对象 // 在该对象上创建一个缓存列表（ 调度中心） // on 方法用来把函数 fn 都加到缓存列表中（ 订阅者注册事件到调度中心） // emit 方法取到 arguments 里第一个当做 event， 根据 event 值去执行对应缓存列表中的函数（ 发布者发布事件到调度中心， 调度中心处理代码） // off 方法可以根据 event 值取消订阅（ 取消订阅） // once 方法只监听一次， 调用完毕后删除缓存函数（ 订阅一次） // 公众号对象 // let eventEmitter = {}; // // 缓存列表，存放 event 及 fn // eventEmitter.list = {}; // // 订阅 // eventEmitter.on = function (event, fn) { // console.log(this,"this") // let _this = this; // // 如果对象中没有对应的 event 值，也就是说明没有订阅过，就给 event 创建个缓存列表 // // 如有对象中有相应的 event 值，把 fn 添加到对应 event 的缓存列表里 // (_this.list[event] || (_this.list[event] = [])).push(fn); // return _this; // }; // // 发布 // eventEmitter.emit = function () { // console.log(this,"this") // let _this = this; // // 第一个参数是对应的 event 值，直接用数组的 shift 方法取出 // console.log(arguments,"arguments") // let event = [].shift.call(arguments), // fns = [..._this.list[event]]; // // 如果缓存列表里没有 fn 就返回 false // if (!fns || fns.length === 0) { // return false; // } // // 遍历 event 值对应的缓存列表，依次执行 fn // fns.forEach(fn => { // fn.apply(_this, arguments); // }); // return _this; // }; // function user1(content) { // console.log('用户1订阅了:', content); // }; // function user2(content) { // console.log('用户2订阅了:', content); // }; // // 订阅 // eventEmitter.on('article', user1); // eventEmitter.on('article', user2); // // 发布 // eventEmitter.emit('article', 'Javascript 发布-订阅模式'); // /* // 用户1订阅了: Javascript 发布-订阅模式 // 用户2订阅了: Javascript 发布-订阅模式 // */ let eventEmitter = { // 缓存列表 list: {}, // 订阅 on(event, fn) { let _this = this; // 如果对象中没有对应的 event 值，也就是说明没有订阅过，就给 event 创建个缓存列表 // 如有对象中有相应的 event 值，把 fn 添加到对应 event 的缓存列表里 (_this.list[event] || (_this.list[event] = [])).push(fn); return _this; }, // 监听一次 once(event, fn) { // 先绑定，调用后删除 let _this = this; function on() { _this.off(event, on); fn.apply(_this, arguments); } on.fn = fn; _this.on(event, on); return _this; }, // 取消订阅 off(event, fn) { let _this = this; let fns = _this.list[event]; // 如果缓存列表中没有相应的 fn，返回false if (!fns) return false; if (!fn) { // 如果没有传 fn 的话，就会将 event 值对应缓存列表中的 fn 都清空 fns && (fns.length = 0); } else { // 若有 fn，遍历缓存列表，看看传入的 fn 与哪个函数相同，如果相同就直接从缓存列表中删掉即可 let cb; for (let i = 0, cbLen = fns.length; i < cbLen; i++) { cb = fns[i]; if (cb === fn || cb.fn === fn) { fns.splice(i, 1); break } } } return _this; }, // 发布 emit() { let _this = this; // 第一个参数是对应的 event 值，直接用数组的 shift 方法取出 let event = [].shift.call(arguments), fns = [..._this.list[event]]; // 如果缓存列表里没有 fn 就返回 false if (!fns || fns.length === 0) { return false; } // 遍历 event 值对应的缓存列表，依次执行 fn fns.forEach(fn => { fn.apply(_this, arguments); }); return _this; } }; function user1(content) { console.log('用户1订阅了:', content); } function user2(content) { console.log('用户2订阅了:', content); } function user3(content) { console.log('用户3订阅了:', content); } function user4(content) { console.log('用户4订阅了:', content); } // 订阅 eventEmitter.on('article1', user1); eventEmitter.on('article1', user2); eventEmitter.on('article1', user3); // 取消user2方法的订阅 eventEmitter.off('article1', user2); eventEmitter.once('article2', user4) // 发布 eventEmitter.emit('article1', 'Javascript 发布-订阅模式'); eventEmitter.emit('article1', 'Javascript 发布-订阅模式'); eventEmitter.emit('article2', 'Javascript 观察者模式'); eventEmitter.emit('article2', 'Javascript 观察者模式'); // eventEmitter.on('article1', user3).emit('article1', 'test111'); /* 用户1订阅了: Javascript 发布-订阅模式 用户3订阅了: Javascript 发布-订阅模式 用户1订阅了: Javascript 发布-订阅模式 用户3订阅了: Javascript 发布-订阅模式 用户4订阅了: Javascript 观察者模式 */ </script> </body> </html>
