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 相关文章推荐
你所要知道JS(DHTML)中的一些技巧
Jan 09 Javascript
javascript 事件查询综合 推荐收藏
Mar 10 Javascript
通过JavaScript控制字体大小的代码
Oct 04 Javascript
js 限制input只能输入数字、字母和汉字等等
Dec 18 Javascript
JavaScript实现简单图片滚动附源码下载
Jun 17 Javascript
javascript常用经典算法实例详解
Nov 25 Javascript
JS实现六边形3D拖拽翻转效果的方法
Sep 11 Javascript
jQuery滚动插件scrollable.js用法分析
May 25 jQuery
Vue动态获取width的方法
Aug 22 Javascript
使用Webpack 搭建 Vue3 开发环境过程详解
Jul 28 Javascript
教你使用vscode 搭建react-native开发环境
Jul 07 Javascript
js判断两个数组相等的5种方法
May 06 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
mysql4.1以上版本连接时出现Client does not support authentication protocol问题解决办法
2007/03/15 PHP
phpstorm配置Xdebug进行调试PHP教程
2014/12/01 PHP
php中mkdir()函数的权限问题分析
2016/09/24 PHP
PHP中call_user_func_array回调函数的用法示例
2016/11/26 PHP
Javascript attachEvent传递参数的办法
2009/12/14 Javascript
Array.prototype.slice.apply的使用方法
2010/03/17 Javascript
jQuery 实现侧边浮动导航菜单效果
2014/12/26 Javascript
javaScript中with函数用法实例分析
2015/06/08 Javascript
jquery实现简易的移动端验证表单
2015/11/08 Javascript
jQuery插件 Jqplot图表实例
2016/06/18 Javascript
ES5学习教程之Array对象
2017/04/01 Javascript
bootstrap+jQuery实现的动态进度条功能示例
2017/05/25 jQuery
[js高手之路]原型式继承与寄生式继承详解
2017/08/28 Javascript
angularjs获取到My97DatePicker选中的值方法
2018/10/02 Javascript
Vue CLI3.0中使用jQuery和Bootstrap的方法
2019/02/28 jQuery
js作用域和作用域链及预解析
2019/04/11 Javascript
在vue-cli中引入lodash.js并使用详解
2019/11/13 Javascript
vue随机验证码组件的封装实现
2020/02/19 Javascript
浏览器JavaScript调试功能无法使用解决方案
2020/09/18 Javascript
给你选择Python语言实现机器学习算法的三大理由
2017/11/15 Python
Django框架设置cookies与获取cookies操作详解
2019/05/27 Python
python判断所输入的任意一个正整数是否为素数的两种方法
2019/06/27 Python
python装饰器练习题及答案
2019/11/01 Python
python实现俄罗斯方块小游戏
2020/04/24 Python
CSS3中颜色线性渐变实战
2015/07/18 HTML / CSS
西班牙拥有最佳品牌的动物商店:Animalear.com
2018/01/05 全球购物
意大利在线购买隐形眼镜网站:VisionDirect.it
2019/03/18 全球购物
什么造成了Java里面的异常
2016/04/24 面试题
小学生学雷锋演讲稿
2014/04/25 职场文书
护士感人事迹
2014/05/01 职场文书
2014年国庆标语
2014/06/30 职场文书
学校安全责任书范本
2014/07/23 职场文书
护士工作失误检讨书
2014/09/14 职场文书
2015年小学生新年寄语
2014/12/08 职场文书
2014普法依法治理工作总结
2014/12/18 职场文书
教你怎么用Python操作MySql数据库
2021/05/31 Python