实现效果如下图所示：
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="count">点我</button>
<button id="show"></button>
<script>
/************* 封装的发布订阅模块start *************/
var event = {
clientList: {},
//订阅
listen: function(key, fn) {
if (!this.clientList[key]) {
this.clientList[key] = []
}
this.clientList[key].push(fn) //事件添加到clientList
},
//发布
trigger: function() {
var key = Array.prototype.shift.call(arguments), //获取trigger()第一个参数 /订阅事件名
fns = this.clientList[key]; //获取订阅事件名对应的事件
if (!fns || fns.length === 0) {
return false
}
for (var i = 0, fn; fn = fns[i++];) {
fn.apply(this, arguments); //一个一个执行
}
},
//删除
remove: function (key, fn) {
var fns = this.clientList[ key ]
if ( !fns ) { //是否有这个订阅的事件名
return false
}
if ( !fn ) { //2参没有值就全部清空该订阅事件
fns && (fns.length = 0)
} else {
for (var l = fns.length - 1; l >= 0; l--) {
var _fn = fns[l]
if (_fn === fn) {
fns.splice(l, 1) //删除订阅着的回调函数
}
}
}
}
}
/************* 封装的发布订阅模块end *************/
//制造发布订阅函数
var installEvent = function(obj) {
for (var i in event) {
obj[i] = event[i]
}
}
//制造一个名为Event的发布订阅方法
var Event = {}
installEvent(Event)
var a = (function () {
var count = 0
var button = document.getElementById('count')
button.onclick = function () {
//2. 当点击id=count按钮后发布执行add集合内所有的方法
Event.trigger('add', count++)
}
})()
var b = (function () {
var div = document.getElementById('show')
//1. 先在key为add的方法集合内订阅一个方法
Event.listen('add', function(count) {
div.innerHTML = count
})
})()
</script>
</body>
</html>