黑马程序员技术交流社区

标题: 理解javascript观察者模式(订阅者与发布者) [打印本页]

作者: 绮罗 时间: 2020-3-6 17:01
标题: 理解javascript观察者模式(订阅者与发布者)
什么是观察者模式？

观察者模式又叫做发布订阅模式，它定义了一种一对多的关系，让多个观察者对象同时监听某一个主题对象，这个主题对象的状态发生改变时就会通知所有观察着对象。它是由两类对象组成，主题和观察者，主题负责发布事件，同时观察者通过订阅这些事件来观察该主体，发布者和订阅者是完全解耦的，彼此不知道对方的存在，两者仅仅共享一个自定义事件的名称。

理解观察者模式：

JS传统事件就是一个观察者模式，之所以要有观察者模式，是因为有时候和传统事件无关的事件，比如：2个或者更多模块的直接通信问题，比如说我有个index.html页面，我有很多JS文件，比如：

a.js: function a(){}; b.js: function b(){}; c.js function c(){}; 等等。后面还有许多这样的JS，那么我要在index.html初始化这些函数的话，我需要这样调用a();b();c()等等，也就是说页面调用的时候我要这样调用，增加了依赖性，我要知道有多少个函数要这样初始化调用，但是如果我们现在用观察者模式就不需要知道有哪些订阅者，比如一个模块(或者多个模块)订阅了一个主题(或者事件)，另一个模块发布这个主题时候，订阅这个主题模块就可以执行了，观察者主要让订阅者与发布者解耦，发布者不需要知道哪些模块订阅了这个主题，它只管发布这个主题就可以了，同样订阅者也无需知道那个模块会发布这个主题，它只管订阅这个主题就可以了。这样2个模块(或更多模块)就实现了关联了。而不需要和上面代码一样，我要知道哪些模块要初始化，我要怎样初始化。这只是一个简单的列子解释观察者模式要使用在什么地方，我也看过很多博客关于这方面的资料，但是很多人写博客只是讲了如何实现观察者模式及观察者模式的好处，并没有讲我们什么时候该使用观察者模式，所以我列举了上面的列子，就是多个不同业务模块需要相互关联的时候，可以使用观察者模式。就好比requireJS，seaJS，KISSY解决依赖的问题一样(比如A依赖于B，B依赖于C，只要一个解决入口文件，其他都会异步加载出来一样)。也就是说各个模块之间的关联性可以使用观察者模式来设计。

这种模式有多种实现，比如jquery插件 pub/sub

比如如下代码：

jQuery.subscribe(“done”,fun2);

function fun1(){

jQuery.publish(“done”);

}

上面的jQuery.publish(“done”);意思是执行fun1函数后，向信号中心jquery发布done信号，而jquery.subscribe(“done”,fun2)的意思是：绑定done信号，执行fun2函数。

我们还可以看看nodejs核心模块Events提供EventEmitter对象，也实现了分布式事件。如下代码：

var Emitter = require('events').EventEmitter;

var emitter = new Emitter();

emitter.on('someEvent',function(stream){

console.log(stream + 'from eventHandler1');

});

emitter.on('someEvent',function(stream){

console.log(stream + 'from eventHandler2');

});

emitter.emit('someEvent','I am a stream!');

上面nodejs的 emitter对象中的 emitter.on是指发布事件”someEvent”，而emitter.emit是指触发事件,事件名称为”someEvent”.从而执行回掉函数。在nodeJS中我们可以发布很多事件，事件名称为someEvent，这样每一个回掉就实现了一个业务逻辑，这样代码耦合性降低了。

我们现在可以实现自己的Pub/Sub模式，代码如下：

function PubSub() {

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2