js實現的訂閱釋出者模式簡單示例
阿新 • • 發佈：2020-03-16
本文例項講述了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程式設計有所幫助。