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

本文实例讲述了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>

运行结果:

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

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

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

以上是 js实现的订阅发布者模式简单示例 的全部内容, 来源链接: utcz.com/z/328106.html

回到顶部