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 相关文章推荐
JavaScript CSS修改学习第三章 修改样式表
Feb 19 Javascript
动态加载外部javascript文件的函数代码分享
Jul 28 Javascript
点弹代码 点击页面任何位置都可以弹出页面效果代码
Sep 17 Javascript
jquery实现网站超链接和图片提示效果
Mar 21 Javascript
禁用键盘上的(全局)指定键兼容iE、Chrome、火狐
May 14 Javascript
酷! 不同风格页面布局幻灯片特效js实现
Feb 19 Javascript
Vue.js实现文章评论和回复评论功能
May 30 Javascript
JS实现图片点击后出现模态框效果
May 03 Javascript
浅谈Node.js 中间件模式
Jun 12 Javascript
VUE预渲染及遇到的坑
Sep 03 Javascript
基于JavaScript伪随机正态分布代码实例
Nov 07 Javascript
nuxt 自定义 auth 中间件实现令牌的持久化操作
Nov 05 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
cache_lite试用
2007/02/14 PHP
php遍历数组的4种方法总结
2014/07/05 PHP
犀利的js 函数集合
2009/06/11 Javascript
JS 图片缩放效果代码
2010/06/09 Javascript
jquery中dom操作和事件的实例学习 仿yahoo邮箱登录框的提示效果
2011/11/30 Javascript
extjs ColumnChart设置不同的颜色实现代码
2013/05/17 Javascript
JQuery Tips相关(1)----关于$.Ready()
2014/08/14 Javascript
JavaScript面试开发常用的知识点总结
2016/08/08 Javascript
js实现3d悬浮效果
2017/02/16 Javascript
关于javascript作用域的常见面试题分享
2017/06/18 Javascript
vue.js 图片上传并预览及图片更换功能的实现代码
2018/08/27 Javascript
解决layui 三级联动下拉框更新时回显的问题
2019/09/03 Javascript
layer.confirm()右边按钮实现href的例子
2019/09/27 Javascript
vant 中van-list的用法说明
2020/11/11 Javascript
在Python中操作时间之mktime()方法的使用教程
2015/05/22 Python
python 性能提升的几种方法
2016/07/15 Python
Python面向对象之继承和组合用法实例分析
2018/08/27 Python
pandas中DataFrame修改index、columns名的方法示例
2019/08/02 Python
python实现XML解析的方法解析
2019/11/16 Python
Python 内置函数globals()和locals()对比详解
2019/12/23 Python
Python调用shell命令常用方法(4种)
2020/05/11 Python
DataFrame 数据合并实现(merge,join,concat)
2020/06/14 Python
Solid & Striped官网:美国泳装品牌
2019/06/19 全球购物
趣天网日本站:Qoo10 JP
2019/09/18 全球购物
毕业生优秀推荐信
2013/11/26 职场文书
毕业生就业协议书
2014/04/11 职场文书
特岗教师个人总结
2015/02/10 职场文书
病人慰问信范文
2015/02/15 职场文书
项目合作意向书
2015/05/08 职场文书
电视新闻稿
2015/07/17 职场文书
实习报告怎么写
2019/06/20 职场文书
nginx简单配置多个server的方法
2021/03/31 Servers
如何获取numpy array前N个最大值
2021/05/14 Python
MongoDB数据库常用的10条操作命令
2021/06/18 MongoDB
Python使用openpyxl批量处理数据
2021/06/23 Python
Python实现列表拼接和去重的三种方式
2021/07/02 Python