}
/**
-
移除某个事件的一个监听者
-
@param {String} type 事件类型
-
@param {Function} cb 回调函数
*/
off(type, cb) {
if (this.listeners[type]) {
const targetIndex = this.listeners[type].findIndex(item => item === cb)
if (targetIndex !== -1) {
this.listeners[type].splice(targetIndex, 1)
}
if (this.listeners[type].length === 0) {
delete this.listeners[type]
}
}
}
/**
-
移除某个事件的所有监听者
-
@param {String} type 事件类型
*/
offAll(type) {
if (this.listeners[type]) {
delete this.listeners[type]
}
}
}
// 创建事件管理器实例
const ee = new EventEmitter()
// 注册一个chifan事件监听者
ee.on(‘chifan’, function() { console.log(‘吃饭了,我们走!’) })
// 发布事件chifan
ee.emit(‘chifan’)
// 也可以emit传递参数
ee.on(‘chifan’, function(address, food) { console.log(吃饭了,我们去${address}吃${food}!
) })
ee.emit(‘chifan’, ‘三食堂’, ‘铁板饭’) // 此时会打印两条信息,因为前面注册了两个chifan事件的监听者
// 测试移除事件监听
const toBeRemovedListener = function() { console.log(‘我是一个可以被移除的监听者’) }
ee.on(‘testoff’, toBeRemovedListener)
ee.emit(‘testoff’)
ee.off(‘testoff’, toBeRemovedListener)
ee.emit(‘testoff’) // 此时事件监听已经被移除,不会再有console.log打印出来了
// 测试移除chifan的所有事件监听
ee.offAll(‘chifan’)
console.log(ee) // 此时可以看到ee.listeners已经变成空对象了,再emit发送chifan事件也不会有反应了
有了这个自己写的简单版本的EventEmitter
,我们就不用依赖第三方库啦。对了,vue
也可以帮我们做这样的事情。
const ee = new Vue();
ee.KaTeX parse error: Expected '}', got 'EOF' at end of input: …le.log(`吃饭了,我们去{address}吃${food}!`) })
ee.$emit(‘chifan’, ‘三食堂’, ‘铁板饭’)
所以我们可以单独new
一个Vue
的实例,作为事件管理器导出给外部使用。想测试的朋友可以直接打开vue
官网,在控制台试试,也可以在自己的vue
项目中实践下哦。
=========================================================================
其实仔细看看,EventEmitter
就是一个典型的发布订阅模式,实现了事件调度中心。发布订阅模式中,包含发布者,事件调度中心,订阅者三个角色。我们刚刚实现的EventEmitter
的一个实例ee
就是一个事件调度中心,发布者和订阅者是松散耦合的,互不关心对方是否存在,他们关注的是事件本身。发布者借用事件调度中心提供的emit
方法发布事件,而订阅者则通过on
进行订阅。
如果还不是很清楚的话,我们把代码换下单词,是不是变得容易理解一点呢?
class PubSub {
constructor() {
// 维护事件及订阅行为
this.events = {}
}
/**
-
注册事件订阅行为
-
@param {String} type 事件类型
-
@param {Function} cb 回调函数
*/
subscribe(type, cb) {
if (!this.events[type]) {
this.events[type] = []
}
this.events[type].push(cb)
}
/**
-
发布事件
-
@param {String} type 事件类型
-
@param {…any} args 参数列表
*/
publish(type, …args) {
if (this.events[type]) {
this.events[type].forEach(cb => {
cb(…args)
})
}
}
/**
-
移除某个事件的一个订阅行为
-
@param {String} type 事件类型
-
@param {Function} cb 回调函数
*/
unsubscribe(type, cb) {
if (this.events[type]) {
const targetIndex = this.events[type].findIndex(item => item === cb)
if (targetIndex !== -1) {
this.events[type].splice(targetIndex, 1)
}
if (this.events[type].length === 0) {
delete this.events[type]
}
}
}
/**
-
移除某个事件的所有订阅行为
-
@param {String} type 事件类型
*/
unsubscribeAll(type) {
if (this.events[type]) {
delete this.events[type]
}
}
}
最后,我们画个图加深下理解:
-
发布订阅模式中,对于发布者
Publisher
和订阅者Subscriber
没有特殊的约束,他们好似是匿名活动,借助事件调度中心提供的接口发布和订阅事件,互不了解对方是谁。 -
松散耦合,灵活度高,常用作事件总线
-
易理解,可类比于
DOM
事件中的dispatchEvent
和addEventListener
。
- 当事件类型越来越多时,难以维护,需要考虑事件命名的规范,也要防范数据流混乱。
========================================================================
观察者模式与发布订阅模式相比,耦合度更高,通常用来实现一些响应式的效果。在观察者模式中,只有两个主体,分别是目标对象Subject
,观察者Observer
。
-
观察者需
Observer
要实现update
方法,供目标对象调用。update
方法中可以执行自定义的业务代码。 -
目标对象
Subject
也通常被叫做被观察者或主题,它的职能很单一,可以理解为,它只管理一种事件。Subject
需要维护自身的观察者数组observerList
,当自身发生变化时,通过调用自身的notify
方法,依次通知每一个观察者执行update
方法。
按照这种定义,我们可以实现一个简单版本的观察者模式。
// 观察者
class Observer {
/**
-
构造器
-
@param {Function} cb 回调函数,收到目标对象通知时执行
*/
constructor(cb){
if (typeof cb === ‘function’) {
this.cb = cb
} else {
throw new Error(‘Observer构造器必须传入函数类型!’)
}
}
/**
- 被目标对象通知时执行
*/
update() {
this.cb()
}
最后
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数初中级Android工程师,想要提升技能,往往是自己摸索成长,自己不成体系的自学效果低效漫长且无助。
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上Android开发知识点!不论你是刚入门Android开发的新手,还是希望在技术上不断提升的资深开发者,这些资料都将为你打开新的学习之门!
如果你觉得这些内容对你有帮助,需要这份全套学习资料的朋友可以戳我获取!!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!
链图片转存中…(img-6klOqzia-1715073537981)]
[外链图片转存中…(img-ng2aJuR0-1715073537981)]
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上Android开发知识点!不论你是刚入门Android开发的新手,还是希望在技术上不断提升的资深开发者,这些资料都将为你打开新的学习之门!
如果你觉得这些内容对你有帮助,需要这份全套学习资料的朋友可以戳我获取!!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!