JavaScript设计模式（5）——发布者-订阅模式

我就是我 2021-09-02 10:41 307阅读 0赞

# 发布者订阅模式是什么？ #

发布者订阅模式又称观察者模式，它定义对象间的一种一对多的依赖关系，当一个对象的状 态发生改变时，所有依赖于它的对象都将得到通知。  
简(shuo)而(ju)言(ren)之(hua)，发布者-订阅模式就是由发布者和订阅者组成的一种应用场景。以项目组为例，产品经理（或甲方）往往承担发布者的责任，负责推送需求到某工作群里，发出需求后，其他打工仔的手机就会滴滴滴的响，滋滋滋的震，这是因为这些打工仔订阅了这些消息，然后不同职责的打工仔就可以做不同的事情去响应这个需求。当然在这个群里的可能还有公司的老板，平时他就把这个群给屏蔽了，这类人也属于“可订阅者”，他想订阅就订阅，不想订阅就退订。从上面的例子中可以得出以下结论：

1.  发布者和订阅者本身没有任何联系
2.  发布者可以在没有任何订阅者的情况下发布消息
3.  订阅者可以选择订阅任意发布者的信息，并针对不同的信息做不同的处理

# 从dom事件了解最常见的发布者-订阅模式 #

实际上，只要我们曾经在 DOM 节点上面绑定过事件函数，那我们就曾经使用过发布—订阅模式。例如我们在空白页面某处执行了点击操作，不管你点的地方有没有按钮，他都会触发许多事件，一次鼠标点击可以触发mousedown,mouseup以及click等等等等事件。但我们都知道，点击空白处是不会发生任何响应的，这是因为我们没有给这个操作绑定相关的订阅者，或者说没有人关心你点击空白处是为了干什么。这也正好对应了发布者订阅模式的前两个特征。

# 实现一个最简单的发布者-订阅模式 #

了解了发布者订阅模式的实践特性之后，我们就可以总结出一些关于发布者订阅模式的代码特性了。以工作群为例：

1.  我们需要一个发布者
2.  我们需要一个工作群（桥梁）
3.  我们需要一些订阅者

理清楚基本的思路后，我们把他翻译成代码。

let publisher = { 
    	mySubscriber:[],//订阅者们
    	addSubscriber:function(subscriber){ 
    		this.mySubscriber.push(subscriber)
    	}, //添加订阅者
    	releaseNews(msg){ 
    		this.mySubscriber.forEach((item)=>{ 
    			item.call(this,msg)
    		})
    	}//发布消息给订阅者
    }
    
    function ui(msg){ 
    	if(msg==='出图'){ 
    		//接收到自己的任务开始干活
    		console.log(msg)
    	}else{ 
    		console.log('指令卜对，不鸟你')
    	}
    }
    function manong(msg){ 
    	if(msg==='写代码'){ 
    		//接收到自己的任务开始干活
    		console.log(msg)
    	}else{ 
    		console.log('指令卜对，不鸟你')
    	}
    }
    
    publisher.addSubscriber(ui) //ui订阅消息
    publisher.addSubscriber(manong) //码农订阅消息
    publisher.releaseNews('出图')

我们还可以对上述代码进行一些小改造来让他变得更加完美，比如添加移除订阅者的功能，将msg参数替换成更为严谨的argument等。这些细节性的问题读者可以自行研究，我这边只给最好理解的例子以及最简单有效的代码，方便大家快速记忆。

# Vue中的发布者-订阅模式 #

vue的核心源码数据双向绑定(mvvm)就是参考了发布者订阅的模式，只是比发布者订阅模式再多加一层订阅，即虚拟dom和data都既是发布者又是订阅者，关于数据双向绑定的源码探究建议参考我之前的文章，写的非常非常非常非常详细，思路和代码非常非常非常非常清晰，不得不吹一波，我咋那么空去研究这个源码。传送门：[vue进阶测试——数据双向绑定原理探究。][vue]

[vue]: https://blog.csdn.net/dkr380205984/article/details/81204880