模拟 Vue 自定义事件（订阅发布模式）
2020-09-15 本文已影响0人
阿畅_
- Vue 中使用
$on、$emit一般用来使用兄弟组件中的参数传递，其原理就是使用了订阅发布模式
Vue 的例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue 中发布订阅模式</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// Vue 的实例
let vm = new Vue()
// 订阅事件
vm.$on('change', (val) => {
console.log('change1 ---->', val)
})
vm.$on('change', (val) => {
console.log('change2 ---->', val)
})
// 发布事件
vm.$emit('change', 'hello')
console.log(vm.$on)
</script>
</body>
</html>
使用 JavaScript 模拟订阅发布
function EventElement2 () {
this.subs = {}
}
EventElement2.prototype.$on = function(event, fn) {
// 如果有值就直接赋值，如果为空赋值 []
this.subs[event] = this.subs[event] || []
// 存储事件
this.subs[event].push(fn)
}
EventElement2.prototype.$emit = function(event, params) {
// 判断事件是否存在，存在去执行相应的事件
if (this.subs[event]) {
this.subs[event].forEach((fn) => {
fn(params)
})
}
}
let em2 = new EventElement2
em2.$on('click', (val) => {
console.log('click2 ---->', val)
})
em2.$emit('click', 'hello')
使用 ES6 的方式实现
// 事件触发器
class EventElement {
constructor() {
// this.subs = {}
this.subs = Object.create(null) // 这样写性能会好一点
}
// 注册事件
$on(event, fn) {
// 如果有值就直接赋值，如果为空赋值 []
this.subs[event] = this.subs[event] || []
// 存储事件
this.subs[event].push(fn)
}
// 触发事件
$emit(event, params) {
// 判断时间是否存在，存在去执行相应的事件
if (this.subs[event]) {
this.subs[event].forEach((fn) => {
fn(params)
})
}
}
}
let em = new EventElement
em.$on('click', (val) => {
console.log('click1 ---->', val)
})
em.$emit('click', 'hello')
观察者模式和订阅发布模式的区别
-
观察者模式是由具体的目标调用，例如：当事件触发 Dep 就会去调用观察者的方法，所以订阅者和观察者之间是存在依赖的。 观察者模式
-
发布订阅模式是由统一的调度中心调用，因为发布者和订阅者不需要知道对方的存在。
