如何理解js的发布-订阅模式

最新推荐文章于 2022-10-25 14:11:12 发布

JIseven

最新推荐文章于 2022-10-25 14:11:12 发布

阅读量151

点赞数 1

分类专栏：宝典文章标签： http 设计模式 vue.js 事件处理机制前端

本文链接：https://blog.csdn.net/qq_37833745/article/details/119806661

版权

宝典专栏收录该内容

13 篇文章 0 订阅

订阅专栏

发布订阅模式【应该场景父子组件传值】

<!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>
        // 事件触发器
        class EventEmitter {
            constructor () {
                // this.subs = { click: [fn1, fn1, fn3], change: [fn] }
                // Object.create(prototype) ：prototype是该对象的原型，我们只是创建一个对象，没有原型所以设为null
                this.subs = Object.create(null)
            }
            // 注册事件(订阅消息)
            $on (eventType, handler) {
                // 判断this.subs有没有需要注册的事件，如果有直接获取该事件对应的方法数组，并往数组里添加新的方法，
                // 如果this.subs没有需要注册的事件，则增加该事件，并给该事件添加一个对应的空数组，并往数组里添加新的方法
                this.subs[eventType] = this.subs[eventType] || []
                this.subs[eventType].push(handler)
            }
            // 触发事件(发布消息)
            $emit (eventType) {
                // 从this.subs里找到该触发事件，并循环遍历该事件对应的方法，并执行方法
                if (this.subs[eventType]) {
                    this.subs[eventType].forEach(handler => {
                        handler()
                    })
                }
            }
        }
        // 测试
        let em = new EventEmitter()
        em.$on('click', () => {
           console.log(111)
        })
        em.$on('click', () => {
           console.log(222)
        })
        em.$emit('click')
    </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>
        // 发布者【目标】
        class Dep {
            constructor () {
                // 记录所有订阅者
                this.subs = []
            }
            // 添加订阅者
            addSub (sub) {
                // 订阅者存在，且订阅者的updta事件存在
                if (sub && sub.update) {
                   this.subs.push(sub)
                }
            }
            // 发布通知
            notify () {
               this.subs.forEach(sub => {
                 sub.update()
               })
            }
 
        }
 
        // 订阅者1【观察者】
        class watcher {
            update () {
                console.log('update')
            }
        }
        // 订阅者2【观察者】
        class watcher2 {
            update () {
                console.log('update2222')
            }
        }
        // 测试
        let dep = new Dep()
        let wc = new watcher()
        let wc2 = new watcher2()
        
        // 添加订阅者
        dep.addSub(wc)
        dep.addSub(wc2)
        // 触发，发布通知订阅者执行update
        dep.notify()
    </script>
</body>
</html>