JS设计模式-观察者模式学习(一)

什么是观察者模式?

观察者模式又成为发布-订阅者模式,主要用来解决主题对象和观察者之间的耦合关系
举一个例子来说,笔者和朋友都很喜欢在美女开的一家衣服店买衣服,但是衣服不是每天都会上新的,所以就和朋友们
要了老板娘的电话,然后每隔一天打个电话问问有没有衣服上新啊,最终会发现老板娘把我们都拉黑了.哈哈哈,但其实
我们在日常生活不会这么做的,是美丽的老板娘把我们每个人的电话留下来,一旦有新装,会一个个的电话通知我们.
这也是发布-订阅者模式了,客户是订阅者,老板娘是发布者

代码实现

发布订阅模式规则,先订阅->在发布

// 先订阅
// 因为可以有多个订阅者,所以声明一个对象保存订阅者信息
const personList = {}
function Subscribe(key,cb){
    if(!personList[key]){
        personList[key] = []
    }
    personList[key].push(cb)

}
// 发布器
function trigger(){
    var key = arguments[0],
        cbs = personList[key];
    if (!cbs || cbs.length === 0) {
        console.log("暂无订阅消息");
        return false;
    }
    for (let index = 0,length = cbs.length; index < length; index++) {
        const cb = cbs[index];
        cb.apply(this, Array.prototype.slice.call(arguments,1)); // 执行回调函数
    }
}
// 小红小明分别在老板那里订阅自己的信息
Subscribe('小红',(goods)=>{
    console.log(`我们来新${goods}了`)
})
Subscribe('小明',(goods)=>{
    console.log(`我们来新${goods}了`)
})
function remove(key, cb) {
	var cbs = personList[key];
	if (!cbs) {
		console.log("尚未注册事件");
		return false;
	}
	if (!cb) {
		// 清空所有的注册事件
		console.log("清空所有事件");
		cbs.length = 0;
	} 
}
// 老板发现满足要求了,进行发布
trigger('小红','lv包')
trigger('小明','篮球鞋')

这样一个简单的发布-订阅者模式就完成了,在这里取消订阅方法会一次性取消某个订阅者的所有订阅消息,有兴趣的话,各位大佬可以自己实现一下取消单个订阅消息的方法.
当然实际运用中还是要更灵活的组织代码,可以参考在vue中发布订阅者模式的实现,下一篇文章会分析一下vue源码中的实现

总结

这是笔者写的第二篇博客,希望每天都能坚持下去,将自己以前,今后学习的知识总结起来,如有不正确的地方还请共同交流,希望和大家共同成长