什么是事件驱动编程?

本贴最后更新于 620 天前,其中的信息可能已经事过境迁

2019-02-11

回答

事件驱动编程是一种涉及通过发送和接受事件来构建应用程序的范式。当程序触发事件时,他可以通过运行注册到该事件和上下文中的任意回调函数来进行响应,同时还可以将相关数据传递给响应的函数。在这种模式下如果程序没有订阅任何函数,当事件被触发时也不会因为事件被发送到"异次元空间"而抛出错误。

一个常见的例子就是 DOM 元素上的事件监听,如 clickmouseenter,当点击或鼠标事件发生时回调函数就会被运行,如:

document.addEventListener("click", function(event) {
    // 当用户点击 document 时,就会打印出 "hi"
    console.log('hi')
}) 

如果没有 DOM 的化,可以这样使用事件驱动:

const hub = createEventHub()
hub.on("message", function(data) {
  console.log(`${data.username} said ${data.text}`)
})
hub.emit("message", {
  username: "John",
  text: "Hello?"
}) 

在上面的代码片断中,通过 on 可以订阅 message 事件,通过 emit 可触发订阅好的 message 事件并向其传递参数。

加分回答

class PubSub {
     constructor(){
        this.events = {};
    }

    pub(eventName, data) {
        if (this.events[eventName]) {
            this.events[eventName].forEach(function(fn) {
                fn(data);
            });
        }
    }

    sub(eventName, fn) {
        this.events[eventName] = this.events[eventName] || [];
        this.events[eventName].push(fn);
    }
}
const pubsub = new PubSub()
pubsub.sub('message', (data) => {
    console.log(`sub message: ${data}`)
})
pubsub.pub('message', 'hi, b3log') // sub message: hi, b3log

返回总目录

每天 30 秒

  • 30Seconds

    📙 前端知识精选集,包含 HTML、CSS、JavaScript、React、Node、安全等方面,每天仅需 30 秒。

    • 精选常见面试题,帮助您准备下一次面试
    • 精选常见交互,帮助您拥有简洁酷炫的站点
    • 精选有用的 React 片段,帮助你获取最佳实践
    • 精选常见代码集,帮助您提高打码效率
    • 整理前端界的最新资讯,邀您一同探索新世界
    488 引用 • 379 回帖 • 4 关注
  • JavaScript

    JavaScript 一种动态类型、弱类型、基于原型的直译式脚本语言,内置支持类型。它的解释器被称为 JavaScript 引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在 HTML 网页上使用,用来给 HTML 网页增加动态功能。

    670 引用 • 1132 回帖 • 748 关注
  • 面试

    面试造航母,上班拧螺丝。多面试,少加班。

    273 引用 • 1355 回帖 • 189 关注

赞助商 我要投放

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • smart

    在这种模式下如果程序没有订阅任何函数,当事件被触发时也不会因为事件 被发送到异次元空间而抛出错误。😅

    1 回复
  • Vanessa
    作者

    想了好久不知道用什么词语

  • monday

    事件驱动还有一种场景,是在微服务化之后,实体之间的同步问题,举个例子,两个服务,用户服务和商品服务,用户服务里修改了用户的基本资料之后,商品服务里有关联的用户领域对象也需要同步,就需要使用事件溯源即时更新多个服务的用户信息,需要在修改用户事务成功之后,广播用户已修改事件,订阅的其他服务需要及时处理事件,更新用户信息

    1 回复
  • Vanessa
    作者

    嗯,消息订阅比较常见