面试手写js--发布订阅者模式实现

最新推荐文章于 2024-03-06 14:58:26 发布

ALKEN ABBY

最新推荐文章于 2024-03-06 14:58:26 发布

阅读量242

点赞数

分类专栏： javascript 文章标签： javascript 面试前端

本文链接：https://blog.csdn.net/qq_45803050/article/details/121688890

版权

javascript 专栏收录该内容

65 篇文章 0 订阅

订阅专栏

本文介绍了JavaScript中的发布订阅模式，通过一个简单的EventEmitter类实现，包括on方法用于事件监听，off方法用于移除监听，以及emit方法触发事件。示例中展示了如何使用该模式进行事件绑定和触发，适用于事件驱动的场景。

摘要由CSDN通过智能技术生成

发布订阅者模式实现

<!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>Document</title>
</head>

<body>
    <script>
        class EventEmitter {
            constructor() {
                this.cache = {}
            }
            on(name, fn) {
                if (this.cache[name]) {
                    this.cache[name].push(fn)
                } else {
                    this.cache[name] = [fn]
                }
            }
            off(name, fn) {
                let tasks = this.cache[name]
                if (tasks) {
                    const index = tasks.findIndex(f => f === fn || f.callback === fn)
                    if (index >= 0) {
                        tasks.splice(index, 1)
                    }
                }
            }
            emit(name, once = false, ...args) {
                if (this.cache[name]) {
                    // 创建副本，如果回调函数内继续注册相同事件，会造成死循环
                    let tasks = this.cache[name].slice()
                    for (let fn of tasks) {
                        fn(...args)
                    }
                    if (once) {
                        delete this.cache[name]
                    }
                }
            }
        }

        // 测试
        let eventBus = new EventEmitter()
        let fn1 = function (name, age) {
            console.log(`${name} ${age}`)
        }
        let fn2 = function (name, age) {
            console.log(`hello, ${name} ${age}`)
        }
        eventBus.on('aaa', fn1)
        eventBus.on('aaa', fn2)
        eventBus.emit('aaa', false, '布兰', 12)
// '布兰 12'
// 'hello, 布兰 12'


    </script>
</body>

</html>

ALKEN ABBY

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
面试手写js--发布订阅者模式实现

发布订阅者模式实现<!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"> <t
复制链接

扫一扫

专栏目录