<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script>
var events = {};//存储事件总线的对象
var eventEmitter = {
emit: function (eventName) {
/**
* 发送事件的时候获取发送事件携带的参数，在pubsubjs中是返回了所有的参数，这才看到了第一个参数是事件名
* 第二个参数是事件携带的参数，我们在这里暂时只返回携带的参数给监听方法
* 发送方法可以有多个，参数内容也可以不断的改，但是监听的事件只有一个，每次都只是监听初始化发来的参数，
* 所以循环列表的时候如果有多个方法也只是执行第一次发来的参数，不合理，所以监听方法只能有一个
*
**/
var args = arguments[1]
var callbackArr = events[eventName];
//发送的事件到事件对象中按照事件名字去寻找指定的事件列表
if (callbackArr && callbackArr.length) {
for (var i = 0; i < callbackArr.length; i++) {
//然后循环执行列表中注册加入进来的事件连带参数
callbackArr[i](args||null);
}
}
},
};
var eventListener = {
on: function (eventName, callback) {
//eventName就是事件的名字，如果对象中没有指定的属性就创建一个空的指定对象属性的数组
if (!events[eventName]) {
events[eventName] = [];
}
//成为数组以后就把监听指定事件名称的函数放入数组
events[eventName].push(callback);
},
remove: function (eventName, callback) {
var callbackArr = events[eventName];
//移除事件的时候找到了指定事件名的属性，然后删除他的事件列表，这样发送事件后监听的时候就没有这个事件了
if (callbackArr && callbackArr.length) {
var index = callbackArr.indexOf(callback);
callbackArr.splice(index, 1);
}
},
};
var clickCallback = function () {
console.log("click callback");
};
eventListener.on("click", clickCallback);
// eventListener.on("say", (data)=>{
// console.log('早上好'+data.name)
// });
eventListener.on("click", function () {
console.log("other click callback");
});
eventEmitter.emit("click");
eventListener.remove("click", clickCallback);
eventEmitter.emit("click");
// eventEmitter.emit("say",{name:'张三'});
// eventEmitter.emit("say",{name:'李四'});
</script>
</body>
</html>