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 相关文章推荐
飞鱼(shqlsl) javascript作品集
Dec 16 Javascript
JavaScript中rem布局在react中的应用
Dec 09 Javascript
浅谈javascript 函数表达式和函数声明的区别
Jan 05 Javascript
浅谈js中子页面父页面方法 变量相互调用
Aug 04 Javascript
jquery 点击元素后,滚动条滚动至该元素位置的方法
Aug 05 Javascript
Express本地测试HTTPS的示例代码
Jun 06 Javascript
小程序图片剪裁加旋转的示例代码
Jul 10 Javascript
vue列表单项展开收缩功能之this.$refs的详解
May 05 Javascript
关于layui 下拉列表的change事件详解
Sep 20 Javascript
JS中FormData类实现文件上传
Mar 27 Javascript
原生JS封装拖动验证滑块的实现代码示例
Jun 01 Javascript
js实现点击上传图片并设为模糊背景
Aug 02 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
PHP的单引号和双引号 字符串效率
2009/05/27 PHP
php数字每三位加逗号的功能函数
2015/10/22 PHP
Thinkphp和onethink实现微信支付插件
2016/04/13 PHP
PHP实现对数字分隔加千分号的方法
2019/03/18 PHP
EXT中xtype的含义分析
2010/01/07 Javascript
两种方法实现文本框输入内容提示消失
2013/03/17 Javascript
javascript抖动元素的小例子
2013/10/28 Javascript
html文本框提示效果的示例代码
2014/06/28 Javascript
如何使用HTML5地理位置定位功能
2015/04/27 Javascript
JS实现选择TextArea内文本的方法
2015/08/03 Javascript
Jquery uploadify上传插件使用详解
2016/01/13 Javascript
详解javascript传统方法实现异步校验
2016/01/22 Javascript
jquery制做精致的倒计时特效
2016/06/13 Javascript
详解JavaScript的闭包、IIFE、apply、函数与对象
2016/12/21 Javascript
实例分析nodejs模块xml2js解析xml过程中遇到的坑
2017/03/18 NodeJs
requirejs按需加载angularjs文件实例
2017/06/08 Javascript
vue.js todolist实现代码
2017/10/29 Javascript
JavaScript实现元素滚动条到达一定位置循环追加内容
2017/12/28 Javascript
tween.js缓动补间动画算法示例
2018/02/13 Javascript
vue项目中公用footer组件底部位置的适配问题
2018/05/10 Javascript
JS实现的简单下拉框联动功能示例
2018/05/11 Javascript
[38:21]2018DOTA2亚洲邀请赛3月30日 小组赛A组 LGD VS Newbee
2018/03/31 DOTA
python爬虫实战之爬取京东商城实例教程
2017/04/24 Python
Python计算一个点到所有点的欧式距离实现方法
2019/07/04 Python
解决django model修改添加字段报错的问题
2019/11/18 Python
python将数据插入数据库的代码分享
2020/08/16 Python
使用css3制作动感导航条示例
2014/01/26 HTML / CSS
德国运动营养和健身网上商店:Myprotein.de
2018/07/18 全球购物
Pandora西班牙官方商店:PandoraShop.es
2020/10/05 全球购物
酒店行政人事部经理职务说明书
2014/02/26 职场文书
2014两会学习心得:榜样精神伴我行
2014/03/17 职场文书
岗位标兵事迹材料
2014/05/17 职场文书
住房抵押登记委托书
2014/09/27 职场文书
财政局党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
2015年清明节网上祭英烈活动总结
2015/03/26 职场文书
Python Pandas数据分析之iloc和loc的用法详解
2021/11/11 Python