定义:
发布订阅模式其实是一种对象间一对多的依赖关系,当一个对象的状态发送改变时,所有依赖于它的对象都将得到状态改变的通知。
发布订阅模式与观察者模式的区别在于,观察者模式是松耦合,而发布者与订阅者是解耦的,它们彼此互不认识,发布者需要告诉调度中心要发的消息是什么,订阅者需要向调度中心订阅事件,当发布者发布此类事件时,也就是该事件触发,再由调度中心通知订阅者。
示例:
当用户们在购物网站购物发现没有现货时,用户们收藏了该店铺,等商家补货时会通知他们。
实现思路:
1、想好谁是发布者
2、给发布者添加一个缓存列表,用于存放回调函数来通知订阅者
3、发布消息,发布者遍历缓存列表,一次触发里面存放的订阅者回调函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>发布订阅模式</title>
</head>
<body>
<script>
var Event = (function(){
var list = {},
listen,
trigger,
remove;
listen = function (key, fn) {
if(!this.list[key]) {
this.list[key] = []
}
this.list[key].push(fn)
}
trigger = function () {
//取出对应的key
var key = Array.prototype.shift.call(arguments) //因为arguments是个类数组对象,所以不能直接使用shift()方法
var fns = this.list[key]
if (!fns || fns.length == 0) {
return
}
for (var i = 0, fn; fn = fns[i++];) {
//fn.apply(this, arguments) ES5写法
fn(...arguments)
}
}
remove = function (key, fn) {
var fns = this.list[key]
if (!fns) {
return false
}
if (!fn) {
fn && (fns.length = 0)
} else {
for (var i = fns.length - 1; i >= 0; i--) {
var _fn = fns[i]
if (_fn == fn) {
fns.splice(i, 1)
}
}
}
}
return {
listen,
trigger,
remove
}
})()
</script>
</body>
</html>
以上仅做为个人学习使用。