前端PubSub模式简单实现

PubSub是一种设计模式,中文叫发布订阅模式,简单来说就是消息发布者不直接向订阅者发布消息,而是发布到中介,而中介根据不同主题对消息进行过滤,并通知对该主题感兴趣的订阅者。该模式在前端现在很火的组件化开发十分常用,因为该模式松耦合,易于扩展的优点正式组件化开发所需要的。

一个PubSub模型主要方法有3个,订阅,退订,发布,下面尝试在前端实现一个最简单的PubSub模块。

var PubSub = {};
// 用于储存事件队列
var queue = {};

// 订阅接口
PubSub.on = function(event, cb) {
  if (!queue[event]) {
    queue[event] = [];
  }
  queue[event].push(cb);
};

// 退订接口
PubSub.off = function(event, cb) {
  var currentEvent = queue[event];
  var len = 0;
  if (currentEvent) {
    len = currentEvent.length;
    for (var i = len - 1; i >= 0; i--) {
      if (currentEvent[i] === cb) {
        currentEvent.splice(i, 1);
      }
    }
  }
};

// 发布接口
PubSub.emit = function(event) {
  var currentEvent = queue[event];
  if (currentEvent) {
    for (var i = 0; i < currentEvent.length; i++) {
      currentEvent[i]();
    }
  }
};

使用:

// 订阅
var callbackA = function () {
    console.log('event a happened')
};
PubSub.on('a', callbackA);
PubSub.on('b', function() {
    console.log('event b happened')
});

// 退订 , 第二个参赛传入回调函数的引用
PubSub.off('a', callbackA);

// 发布
PubSub.emit('a');
PubSub.emit('b');

当然,重复发明轮子的事情还是不要做了,前端目前已经有比较成熟的PubSub库,其中用的最多的应该eventemitter2,感兴趣的同学可以去了解下。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏惨绿少年

网络基础一 交换机 路由器 OSI7层模型

第1章 网络基础 1.1 网络的出现 解决计算机通讯的需求 实现计算机信息可以传递 1.2 主机之间实现通讯基本要求(三要素) ①. 需要在两台主机之间建...

1930
来自专栏腾讯开源的专栏

腾讯 Node.js 非侵入开发框架 Tars.js 2.0 正式发布

882
来自专栏jessetalks

异步编程 In .NET

概述   在之前写的一篇关于async和await的前世今生的文章之后,大家似乎在async和await提高网站处理能力方面还有一些疑问,博客园本身也做了不少的...

3036
来自专栏EAWorld

微服务RPC框架选美

1、RPC 框架谁最美? ? Hello,everybody!说到RPC框架,可能大家能想到一堆RPC开源框架,那么在微服务平台中,微服务间的服务调用,不可...

4708
来自专栏CSDN技术头条

容器化RDS|计算存储分离架构下的IO优化

在基于 Kubernetes 和 Docker 构建的私有 RDS 中,普遍采用了计算存储分离架构。该架构优势明显, 但对于数据库类 Latency Sensi...

2666
来自专栏IT大咖说

容器化RDS|计算存储分离架构下的 IO 优化

摘要 在基于 Kubernetes 和 Docker 构建的私有 RDS 中,普遍采用了计算存储分离架构。该架构优势明显, 但对于数据库类 Latency Se...

3218
来自专栏Golang语言社区

高并发服务器的设计--架构与瓶颈的设计

做架构设计,难免有时候被人问及系统的瓶颈在哪,那首先来了解下什么是瓶颈? 打个形象的比方,人的嘴巴可以吞下一整个面包,但是却咽不下去,因为食管不给力,它比较细,...

5458
来自专栏Kevin-ZhangCG

什么是事务?事务的四个特性以及事务的隔离级别

2249
来自专栏SDNLAB

数据中心SDN技术发展应用之MP-BGP

当前云计算技术已经成为数据中心基本部署要求,针对云计算中对网络虚拟化的需求,业界厂家提出了各种解决思路,SDN网络技术得到了大力发展,具有资源虚拟化、自动化等特...

3775
来自专栏沃趣科技

容器化RDS|计算存储分离架构下的IO优化

在基于 Kubernetes 和 Docker 构建的私有 RDS 中, 普遍采用了计算存储分离架构. 该架构优势明显, 但对于数据库类 Latency Sen...

4496

扫码关注云+社区