实现vue中的$on $emit

最新推荐文章于 2025-07-08 16:40:57 发布

weixin_30256505

最新推荐文章于 2025-07-08 16:40:57 发布

阅读量163

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/codejoker/p/10505516.html

本文介绍了一个简单的事件驱动编程示例，通过定义事件列表和事件处理函数，实现了不同类型的事件响应，包括名称显示、年龄显示和问候消息的打印。示例展示了如何使用事件驱动架构进行模块化编程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

    var eventList = {
            'sayName': [sayName]
        }
        var name = 'hehe'
        var age = 28
        function sayName() {
            console.log(this.name)
        }
        function sayAge() {
            console.log(this.age)
        }
        function $on(type, fn) {
            if (!this.eventList[type]) {
                this.eventList[type] = []
            }
            this.eventList[type].push(fn)
        }
        function $emit() {
            let type = Array.prototype.shift.call(arguments)
            let onCallbacks = eventList[type]
            onCallbacks.forEach(element => {
                element.apply(this, arguments)
            });
        }
        $emit('sayName') // hehe
        $on('sayAge', sayAge)
        $emit('sayAge') // 28
        $on('sayHello', (arg) => console.log(arg+ ', Hello!'))
        $emit('sayHello', 'John') // John, Hello!