js实现的订阅发布者模式简单示例


Posted in Javascript onMarch 14, 2020

本文实例讲述了js实现的订阅发布者模式.分享给大家供大家参考,具体如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <script>
    var pubsub = (function(){
      var q = {}
        topics = {},
        subUid = -1;
      //发布消息
      q.publish = function(topic, args) {
        //判断有没有当前的话题
        if(!topics[topic]) {return;}
        var subs = topics[topic],//当前话题订阅者数组
          len = subs.length;
        while(len--) {
          subs[len].func(topic, args);
        }
        return this;
      };
      //订阅事件
      //接收两个参数 要订阅的话题,处理程序
      q.subscribe = function(topic, func) {
        //如果当前话题已经有订阅者,获取到订阅者数组
        //一个话题名下的 订阅者事件可以是多个fn1, fn2, fn3
        topics[topic] = topics[topic] ? topics[topic] : [];
        
        //给每个订阅者添加唯一的token
        var token = (++subUid).toString();
        topics[topic].push({
          token : token,
          func : func
        });
        return token;
      };
      //取消订阅
      q.unsubscribe = function(token){
        Object.keys(topics).map( key => {
          topics[key].map((fn, fnIndex) => {
            if(fn.token == token){
              topics[key].splice(fnIndex,1)
            }
          })
        })
      }
      return q;
    })();
    //触发的事件(订阅者的处理程序)
    var logmsg1 = function(topics, data) {
      console.log("logging1:" + topics + ":" + data);
    }
 
    var logmsg2 = function(topic, data) {
      
      console.log("logging2:" + topic + ":" + data,'我是订阅者2');
    }
    //监听指定的消息'msgName'
    var sub1 = pubsub.subscribe('msgName', logmsg1);
    var sub2 = pubsub.subscribe('msgName', logmsg2);
    //pubsub.unsubscribe(sub1)
    //发布消息'msgName'
    pubsub.publish('msgName', 'hello world');
    //发布无人监听的消息'msgName1'
    pubsub.publish('anotherMsgName', 'me too!');
  </script>
</body>
</html>

运行结果:

js实现的订阅发布者模式简单示例

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
极酷的javascirpt,让你随意编辑任何网页
Feb 25 Javascript
jQuery+.net实现浏览更多内容(改编php版本)
Mar 28 Javascript
使用js修改客户端注册表的方法
Aug 09 Javascript
jQuery实现鼠标划过修改样式的方法
Apr 14 Javascript
javascript每日必学之基础入门
Feb 16 Javascript
JS原型、原型链深入理解
Feb 27 Javascript
javascript移动开发中touch触摸事件详解
Mar 18 Javascript
jquery网页日历显示控件calendar3.1使用详解
Nov 24 Javascript
vue.js选中动态绑定的radio的指定项
Jun 02 Javascript
jQuery插件jsonview展示json数据
May 26 jQuery
vue项目首屏打开速度慢的解决方法
Mar 31 Javascript
antd vue table跨行合并单元格,并且自定义内容实例
Oct 28 Javascript
vue插槽slot的简单理解与用法实例分析
Mar 14 #Javascript
es6中new.target的作用和使用场景简单示例分析
Mar 14 #Javascript
JS中类的静态方法,静态变量,实例方法,实例变量区别与用法实例分析
Mar 14 #Javascript
js中forEach,for in,for of循环的用法示例小结
Mar 14 #Javascript
JS原型prototype和__proto__用法实例分析
Mar 14 #Javascript
JS数组的高级使用方法示例小结
Mar 14 #Javascript
vue-resource post数据时碰到Django csrf问题的解决
Mar 13 #Javascript
You might like
无线电波是什么?它是怎样传输的?
2021/03/01 无线电
PHP常见错误提示含义解释(实用!值得收藏)
2016/04/25 PHP
php字符串过滤strip_tags()函数用法实例分析
2019/06/24 PHP
符合W3C网页标准的iframe标签的使用方法
2007/07/19 Javascript
js获取键盘按键响应事件(兼容各浏览器)
2013/05/16 Javascript
ext combobox动态加载数据库数据(附前后台)
2014/06/17 Javascript
jQuery针对各类元素操作基础教程
2014/08/29 Javascript
javascript中createElement的两种创建方式
2015/05/14 Javascript
js+html5实现可在手机上玩的拼图游戏
2015/07/17 Javascript
Angular2 (RC5) 路由与导航详解
2016/09/21 Javascript
Angular.js基础学习之初始化
2017/03/10 Javascript
nodejs body-parser 解析post数据实例
2017/07/26 NodeJs
vue 动态改变静态图片以及请求网络图片的实现方法
2018/02/07 Javascript
使用ngrok+express解决本地环境中微信接口调试问题
2018/02/26 Javascript
微信小程序绑定手机号获取验证码功能
2019/10/22 Javascript
vue项目引入ts步骤(小结)
2019/10/31 Javascript
electron 如何将任意资源打包的方法步骤
2020/04/16 Javascript
Python 文件读写操作实例详解
2014/03/12 Python
python中from module import * 的一个坑
2014/07/20 Python
在Python中使用判断语句和循环的教程
2015/04/25 Python
Python实现Smtplib发送带有各种附件的邮件实例
2017/06/05 Python
python使用turtle库与random库绘制雪花
2018/06/22 Python
python解决字符串倒序输出的问题
2018/06/25 Python
python 在指定范围内随机生成不重复的n个数实例
2019/01/28 Python
分享一个pycharm专业版安装的永久使用方法
2019/09/24 Python
详解使用django-mama-cas快速搭建CAS服务的实现
2019/10/30 Python
解决tensorflow由于未初始化变量而导致的错误问题
2020/01/06 Python
Python写捕鱼达人的游戏实现
2020/03/31 Python
使用分层画布来优化HTML5渲染的教程
2015/05/08 HTML / CSS
Bluebella法国官网:英国性感内衣品牌
2019/05/03 全球购物
美国智能家居专家:tink
2019/06/04 全球购物
《自然之道》教学反思
2014/02/11 职场文书
创建绿色学校先进个人材料
2014/08/20 职场文书
小班教师个人总结
2015/02/05 职场文书
Python爬虫中urllib3与urllib的区别是什么
2021/07/21 Python
修改并编译golang源码的操作步骤
2021/07/25 Golang