11月阅读周·编写可测试的JavaScript代码:基于事件的架构之事件的响应篇

举报
叶一一 发表于 2024/11/21 10:40:36 2024/11/21
【摘要】 背景去年下半年,我在微信书架里加入了许多技术书籍,各种类别的都有,断断续续的读了一部分。没有计划的阅读,收效甚微。新年伊始,我准备尝试一下其他方式,比如阅读周。每月抽出1~2个非连续周,完整阅读一本书籍。这个“玩法”虽然常见且板正,但是有效,已经坚持阅读十个月。已读完书籍:《架构简洁之道》、《深入浅出的Node.js》、《你不知道的JavaScript(上卷)》、《你不知道的JavaScri...

背景

去年下半年,我在微信书架里加入了许多技术书籍,各种类别的都有,断断续续的读了一部分。

没有计划的阅读,收效甚微。

新年伊始,我准备尝试一下其他方式,比如阅读周。每月抽出1~2个非连续周,完整阅读一本书籍。

这个“玩法”虽然常见且板正,但是有效,已经坚持阅读十个月。

已读完书籍《架构简洁之道》、《深入浅出的Node.js》、《你不知道的JavaScript(上卷)》、《你不知道的JavaScript(中卷)》、《你不知道的JavaScript(下卷)》、《数据结构与算法JavaScript描述》、《WebKit技术内幕》、《前端架构:从入门到微前端》、《秒懂算法:用常识解读数据结构与算法》、《JavaScript权威指南》、《JavaScript异步编程设计快速响应的网络应用》

当前阅读周书籍编写可测试的JavaScript代码

事件的响应

有三种方式响应所抛出的事件:不响应、普通响应或特定响应。使用事件进行消息传递而又不需要回复时是最简单的。在典型的事件系统中,发送事件很简单,但接受响应却可能会有问题。可以直接对所触发的事件设置一个监听器。这种方法类似于给每一个事件一个唯一的ID,然后可以监听请求中包含ID的特定事件,以便获取响应。但这确实很不恰当,这就是为什么事件通常被认定为“单向”通信的原因,比如日志记录、UI操作以及通知(通常是表示已经准备好了)等类似最常见的场景。然而,使用回调函数处理通用和特定响应,是可以进行双向异步通信的。让我们来看一些例子。

很显然,如果不需要响应,可以简单触发事件并继续:

eventHub.fire('LOG', { level:'debug', message: 'This is cool' });

如果不需要特定的事件响应,而且普通响应又够用的话,远程监听器可以监听普通的事件响应。例如,新用户注册一个普通的USER_REGISTERED事件后,普通响应可能就是唯一的必要“回复”了:

// somewhere on server
eventHub.on('REGISTER_USER', function (obj) {
  //s stick obj.name into user db
  eventHub.fire('REGISTER_USER', { name: obj.name });
});
// somewhere global
eventHub.on('REGISTER_USER', function (user) {
  console.log(user.name + ' registered!');
});
// somewhere specific
eventHub.fire('REGISTER_USER', { name: 'mark' });

在该例中,处于服务器端的REGISTER_USER事件处理程序用于数据库的写操作。通过向数据库添加一个用户进行注册后,该事件处理程序触发了另外一个USER_REGISTERED事件。而另外一个监听器又监听了这个USER_REGISTERED事件。在用户注册后,该监听器用于处理程序的逻辑操作——例如,更新UI。当然,每个事件都可以有多个监听器,所以,也许USER_REGISTERED的其中一个监听器可以更新管理面板,而另外一个监听器则更新特定用户的UI,还有一个监听器可以给管理员发送一个包含新用户信息的邮件。

最后,在某些情况下,必须要直接给事件返回特定的响应。这和方法调用完全相同,但它是异步的。如果非要直接响应,事件集线器可以给事件触发器提供事件回调。事件回调作为事件触发器的参数传递给事件集线器。示例如下:

// somewhere on the server
eventHub.on('ADD_TO_CART', function (userId, itemId, callback) {
  d.cart.push(itemId);
  callback(null, { items: userId.cart.length });
});
// meanwhile, somewhere else (in the bre the browser,probably)
function addItemToCart(userId, itemId) {
  eventHub.fire('ADD_TO_CART', { user_id: userId, item_id: itemId }, function (err, result) {
    if (!err) {
      console.log('Cart now has:' + result.cart.items + ' items');
    }
  });
}

上述代码中,我们触发了一个普通的ADD_TO_CART事件,并提供了一些信息,然后等待回调。为事件集线器提供的回调在接收监听器提供的数据之后被调用了。

总结

有三种方式响应所抛出的事件:不响应、普通响应或特定响应。

使用事件进行消息传递而又不需要回复时是最简单的。

在典型的事件系统中,发送事件很简单,但接受响应却可能会有问题。可以直接对所触发的事件设置一个监听器。

使用回调函数处理通用和特定响应,是可以进行双向异步通信的。


作者介绍
非职业「传道授业解惑」的开发者叶一一。
《趣学前端》、《CSS畅想》等系列作者。华夏美食、国漫、古风重度爱好者,刑侦、无限流小说初级玩家。
如果看完文章有所收获,欢迎点赞👍 | 收藏️ | 留言📝

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。