vue-cli中，用eventemitter3，做发布订阅开发
class ClientAgent extends EventEmitter{
this.emit('onGetAgtGroups', groupInfo.agtGroups || [])//发布
}
Object.assign(ClientAgent.prototype, apiObj) //深拷贝拷贝到原型对象上
let clientAgent = new ClientAgent（）
clientAgent.emit('onGetAgtGroups', groupInfo.agtGroups || [])//发布
clientAgent.on('onConnect', (res) => {//监听
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
var event = {
list: [],
listen: function(key,fn) {
if(!this.list[key]) {
this.list[key] = [];
}
// 订阅的消息添加到缓存列表中
this.list[key].push(fn);
console.log(this.list)
},
trigger: function(){
var key = Array.prototype.shift.call(arguments);
var fns = this.list[key];
// 如果没有订阅过该消息的话，则返回
if(!fns || fns.length === 0) {
return;
}
for(var i = 0,fn; fn = fns[i++];) {
fn.apply(this,arguments);
}
}
};
/*
*对象深拷贝
**/
var initEvent = function(obj) {
for(var i in event) {
obj[i] = event[i];
}
};
// 我们再来测试下，我们还是给shoeObj这个对象添加发布-订阅功能；
var shoeObj = {};
initEvent(shoeObj);
console.log(shoeObj)
// 小红订阅如下消息
shoeObj.listen('red',function(size){
console.log("尺码是："+size);
setTimeout(()=>{
alert("message")
},2000)
});
// 小花订阅如下消息
shoeObj.listen('block',function(size){
console.log("再次打印尺码是："+size);
});
shoeObj.trigger("block",42);
shoeObj.trigger("red",40);
</script>
</body>
</html>
下边的更清晰些
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
var pubsub = {};
(function(q) {
var topics = {},//存放所有订阅者
subUid = -1;
//发布
q.publish = function(topic, args) {
debugger
if (!topics[topic]) {
return false;
}
var subscribers = topics[topic],
len = subscribers ? subscribers.length : 0;
while (len--) {
subscribers[len].func(topic, args);
}
return this;
};
//订阅
q.subscribe = function(topic, func) {
if (!topics[topic]) {
topics[topic] = [];
}
var token = (++subUid).toString();
topics[topic].push({
token: token,
func: func
});
return token;
};
//取消订阅
q.unsubscribe = function(token) {
for (var m in topics) {
if (topics[m]) {
for (var i = 0, j = topics[m].length; i < j; i++) {
if (topics[m][i].token === token) {
topics[m].splice(i, 1);
return token;
}
}
}
}
return this;
};
}(pubsub));
//测试
var messageLogger = function(topics, data) {
console.log("Logging: " + topics + ": " + data);
};
var subscription = pubsub.subscribe("inbox/newMessage", messageLogger);
pubsub.publish("inbox/newMessage", "hello world!");
// or
pubsub.publish("inbox/newMessage", ["test", "a", "b", "c"]);
// or
pubsub.publish("inbox/newMessage", {
sender: "hello@google.com",
body: "Hey again!"
});
</script>
</body>
</html>
网友评论