走流程,先说一下什么是发布订阅模式~
发布-订阅模式:
按照专业的话来说:“发布-订阅是一种消息范式,消息的发送者(称为发布者)不会将消息直接发送给特定的接收者(订阅者),而是将发布的消息分为不同的类别,无需了解有哪些订阅者;同理,订阅者也可以对一个类或者多个类有兴趣,但也只关注有兴趣的部分,无需了解存在哪些发布者”.
按照流氓的话来说就是: 发布者跟订阅者一起有一个小家,但是两个人从来不交流,也不想见面.有一天.发布者在家里搞了一系列骚操作,移沙发,搬酒柜,贴墙纸…,订阅者晚上下班回去,她只关注自己的房间有没有被搞的乱七八糟,其他不感兴趣的东西 都当作没有看见.
这时候就有流氓要问了,那两个人都不接触的 还过啥日子呀 出家当和尚得了?
要是这样就出家当和尚了,我发布订阅模式不就垮掉了吗.为了让两个人能有点交流.我特意安排了个机器人当中介,
订阅者跟机器人说,我今天买了橘子放在冰箱,谁要是动了我的橘子,你就告诉我,其他事情 你就不用跟我说了,我也不想知道那个逆子干了些啥事儿.然后出门上班了,
赶巧不巧当天发布者嘴馋就偷吃了一个橘子,结果被机器人打小报告了
.订阅者就觉得发布者干的都是人事儿??? 赶紧也搞了个小动作,把橘子全部拿到房间了.
也不知道你们是专业的还是流氓~~~~~ 反正我是专业的(狗头保命)
再走流程,实现一下
class Event {
// 订阅事件
on() {
}
// 发布事件
emit() {
}
// 关闭事件
off() {
}
}
const e = new Event;
e.on("click", x => console.log(x.id));
e.emit('click', { id: 3 });
第一步:观察on跟emit的使用方法,我猜里面需要一个对象来维护type跟callback值
第二步我再猜这个对象中维护的type跟callback值要能对照起来,要不然我咋知道你的callback是不是偷的我的callback.
代码如下:
class Event {
constructor() {
this.events = {}
}
on(type, callback) {
this.events[type] = callback;
}
emit(type, args) {
console.log(this.events) // { click: [Function (anonymous)] }
this.events[type](args); // 3
}
}
const e = new Event;
e.on("click", x => console.log(x.id));
e.emit('click', { id: 3 });
一不小心就猜对了~~ 就这么简单?你在向peatch, 那万一我有两个click事件呢
比如这样,
const e = new Event;
e.on("click", x => console.log(x.id));
e.on("click", x => console.log(x.id));
e.emit('click', { id: 3 })
你不该给我打印出两个三吗?
嗯??? 行 我把callback拿个数组装起来不就好了? 问题不大
于是 抓秃三分之一的头发之后…
class Event {
constructor() {
this.events = {}
}
on(type, callback) {
// 对象里面是否有type这个属性,如果有,直接push回调函数,没有则重新建立.
(this.events[type] || (this.events[type] = [])).push(callback);
}
emit(type, args) {
console.log(this.events[type]); // [ [Function (anonymous)], [Function (anonymous)] ]
this.events[type].forEach(element => {
element(args); // 3 3 ---执行了两次
});
}
}
const e = new Event;
e.on("click", x => console.log(x.id));
e.on("click", x => console.log(x.id));
e.emit('click', { id: 3 });
我还想让他只执行一次
你… 好的,没问题。.
然后 我又抓秃了三分之一的头发才想到addEventListener第三个参数有个once.我在需要once的click加个属性应该可以吧? 先试一波~
于是…
class Event {
constructor() {
this.events = {}
}
on(type, callback) {
// 对象里面是否有type这个属性,如果有,直接push回调函数,没有则重新建立.
(this.events[type] || (this.events[type] = [])).push(callback);
}
emit(type, args) {
this.events[type].forEach(element => {
if (element.once) {
element.listener(args);
} else {
element(args);
}
});
}
once(type, listener) {
this.events[type] = this.events[type] || [];
this.events[type].push({ listener, once: true });
}
}
嗯???好像有一点小小的问题呀,once意在监听函数只执行一次,但原本这是api帮我们做了的事情,这里要自己实现一下~ 也就是在发布事件的时候,如果存在once,只执行一次发布,然后全部给干掉。
于是 我抓光了所有的头发,有了以下代码:
class Event {
constructor() {
this.events = {}
}
// 监听一个事件
on(type, callback) {
// 对象里面是否有type这个属性,如果有,直接push回调函数,没有则重新建立.
(this.events[type] || (this.events[type] = [])).push({ listener: callback });
}
// 发布一个事件
emit(type, args) {
this.events[type].forEach(element => {
element.listener(args);
if(type === 'once') {
this.off(type, element.listener);
}
});
}
// 事件只执行一次
once(type, listener) {
this.events[type] = this.events[type] || [];
this.events[type].push({ listener, once: true });
}
// 当传过来的callback相等,则取消该方法.
off(type, callback) {
if (this.events[type]) {
this.events[type] = this.events[type].filter(item => item.listener !== callback)
}
}
}
测试一下,
呀~ 秃了呀。。。