前端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 条评论
登录 后参与评论

相关文章

来自专栏开源项目

码云推荐 | J2EE 快速开发平台 renren-security-boot

renren-security-boot 是一款基于代码生成器的 J2EE 快速开发平台,其核心设计目标是开发迅速、学习简单、轻量级、易扩展;使用 Spring...

3138
来自专栏美团技术团队

WebView性能、体验分析与优化

在App开发中,内嵌WebView始终占有着一席之地。它能以较低的成本实现Android、iOS和Web的复用,也可以冠冕堂皇的突破苹果对热更新的封锁。 然而便...

55211
来自专栏逸鹏说道

大公司都有哪些开源项目之腾讯

1.WeUI 为微信Web服务量身设计 WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信 Web 开发量身设计,可以令用户的使用感知...

4426
来自专栏张善友的专栏

SignalR 项目介绍

SignalR 是 ASP.NET 团队正在开发的一个 Microsoft .NET Framework 库和 jQuery 插件,可能包括在以后版本的 ASP...

17810
来自专栏Google Dart

AngularDart 4.0 高级-HTTP 客户端 顶

大多数前端应用程序使用HTTP协议与后端服务进行通信。 Dart网络应用程序通常使用XMLHttpRequest(XHR)API执行此操作,使用dart:htm...

631
来自专栏Web 开发

各种Kill跨域Boss的方法

对于JSON数据,可以很容易的获取。不过在结合Android的WebView后会存在一个很严重的问题。

470
来自专栏逸鹏说道

跨站请求伪造(CSRF/XSRF)

简介   CSRF(Cross-site request forgery跨站请求伪造,也被称为“One Click Attack”或者Session Ridin...

3266
来自专栏何俊林

美团猫眼电影Android模块化实战总结

首先一句话概括:我想把这几个月做的事情记录下来,并且希望尽量详细,希望读者读了这篇文章能够知道项目进行模块化,项目改业务框架可能会遇到哪些问题,具体每个步骤都做...

892
来自专栏腾讯IVWEB团队的专栏

通信方式进阶

在几年前,天空一声巨响,ajax 闪亮登场。 前端宝宝们如获至宝, 已经表单提交神马的,真的太 心累了。 有了ajax之后,网页的性能可大幅提升,告别刷新,告别...

6171
来自专栏程序猿的那些趣事

实施前端微服务化的方式

微前端架构是一种类似于微服务的架构,它将微服务的理念应用于浏览器端,即将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。

631

扫码关注云+社区