理解 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() {
    this.handlers = {};
}
PubSub.prototype = {
    // 订阅事件
    on: function(eventType,handler){
        var self = this;
        if(!(eventType in self.handlers)) {
             self.handlers[eventType] = [];
        }
        self.handlers[eventType].push(handler);
        return this;
       },
       // 触发事件(发布事件)
       emit: function(eventType){
           var self = this;
           var handlerArgs = Array.prototype.slice.call(arguments,1);
           for(var i = 0; i < self.handlers[eventType].length; i++) {
                 self.handlers[eventType][i].apply(self,handlerArgs);
           }
           return self;
       }
};// 调用方式如下：

var pubsub = new PubSub();

pubsub.on('A',function(data){

console.log(1 + data);  // 执行第一个回调业务函数

});

pubsub.on('A',function(data){

console.log(2 + data); // 执行第二个业务回调函数

});

// 触发事件A

pubsub.emit('A',"我是参数");复制代码

二：javascript自定义事件

Javascript传统事件有点击事件(click)，鼠标移上去事件(mouseover)等等，那么什么是自定义事件呢？自定义事件可以这样理解传统事件没有的，就好比很多人发明东西一样，何谓发明？就是世界上没有的东西，现在被自己做到了，这叫发明，所以我们自定义事件也可以这样理解---目前传统事件没有的。

2. 为什么要自定义事件，自定义事件要使用在地方？

传统的事件不能满足我们的需求，所以我们需要自定义事件，比如传统的事件有单击，双击，但是突然某一天我想要三击那就要用到自定义事件了，自定义事件一般使用在观察者模式上，比如主体需要发布各种消息通过创建各种自定义事件来实现，对于消息的订阅则通过注册监听器来实现。

3. 如何创建自定义事件？

1. 在标准浏览下(除IE8及以下) 我们可以如下这样创建自定义事件.比如如下代码：

我来测试
var test = document.getElementById("longen");
 // 创建事件
var evt = document.createEvent('Event');
// 定义事件类型
evt.initEvent('customEvent',true,true);
// 监听事件
test.addEventListener('customEvent',function(){
     console.log("111");

},false);
// 触发事件
test.dispatchEvent(evt);复制代码

如上，在标准浏览下运行下在控制台可以看到输入111内容了，说明自定义事件成功触发，在这个过程中，createEvent方法创建了一个空事件evt，然后使用initEvent方法定义事件的类型为约定好的自定义事件，再对元素进行监听，最后使用dispatchEvent来触发事件了。自定义事件无非就是监听事件，然后自己运行回调函数，上面的initEvent的第二个参数的意思是：是否冒泡，第三个参数的意思是：是否可以使用preventDefault()来阻止默认行为。但是上面的自定义事件只能对标准浏览器下生效，IE8及以下都不生效，不支持createEvent()这个方法，所以我们现在需要IE8及以下的事件。在IE下我们可以使用onpropertychange事件来监听，当DOM的某个属性发生改变时就触发onpropertychange事件的回调，再在回调中判断改变的属性是否是我们自定义的属性，假如是则执行我们的回调，否则不执行。

如下在IE8及以下代码可以实现如下测试：

我来测试
var test = document.getElementById("longen");
document.documentElement.myEvent = 0;
function foo(){
    alert('已经监听到了');

}
document.documentElement.attachEvent("onpropertychange",function(event) {
    if (event.propertyName == "myEvent") {
          foo();
    }
});
document.documentElement.myEvent++;复制代码

如上代码就可以在IE下自定义成功触发了。

综合：我们可以写一个跨浏览器的自定义事件了，代码如下：

function DefineEvent(element) {
   this.init(element);
}
DefineEvent.prototype = {
    constructor: DefineEvent,
    init: function(element) {
    this.element = (element && element.nodeType == 1) ? element : document;
    return this;
    },
    /*
     * 添加监听事件     * @param {string} type 监听的事件类型
     * @param {Function} callback 回调函数
     */
    addEvent: function(type,callback) {
        var self = this;
        if(self.element.addEventListener) { // 标准浏览器下
          self.element.addEventListener(type,callback,false);
         }else if(self.element.attachEvent){ // IE
          if(isNaN(self.element[type])) {
             self.element[type] = 0;
           }
           var fun = function(evt){
             evt = evt ? evt : window.event;
             if(evt.propertyName == type) {
                callback.call(self.element);
             }
            }
            self.element.attachEvent('onpropertychange',fun);
            // 在元素上存储绑定回调，方便移除事件绑定
           if(!self.element['callback' + callback]) {
              self.element['callback' + callback] = fun;

             }
        }else {
            self.element.attachEvent('on' + type,callback);
        }
        return self;
    },

    /*
     * 移除事件
     * @param {string} type 监听的事件类型
     * @param {Function} callback 回调函数
     */
    removeEvent: function(type,callback){
         var self = this;
         if(self.element.removeEventListener) {
            self.element.removeEventListener(type,callback,false);
        }else if(self.element.detachEvent) {
            // 移除对应的自定义属性监听
            self.element.detachEvent('onpropertychange',self.element['callback' + callback]);
            // 删除储存在 DOM 上的自定义事件的回调
            self.element['callback' + callback] = null;

        }else {
            self.element.detachEvent('on' + type,callback);
        }
        return self;
    },

    /*

     * 触发事件

     * @param {String} type 触发事件的类型

     * @return {object} 返回的对象

     */

    triggerEvent: function(type){

        var self = this;

        if(self.element.dispatchEvent) {  // 标准浏览器下

            // 创建事件

            var evt = document.createEvent('Event');

            // 定义事件的类型

            evt.initEvent(type,true,true);

            // 触发事件

            self.element.dispatchEvent(evt);

        }else if(self.element.fireEvent) {  // IE

            self.element[type]++;

        }

        return self;

    }

};复制代码

HTML

我来测试

调用如下：

var testBox = document.getElementById('longen');

var defineEvent = new DefineEvent(testBox);

// 回调函数1

function triggerEvent(){

console.log('触发了一次自定义事件 customConsole');

// 回调函数2

function triggerAgain(){

console.log('再一次触发了自定义事件 customConsole');

// 同时绑定两个回调函数，支持链式调用

defineEvent.addEvent('aa', triggerEvent).addEvent('aa', triggerAgain);

defineEvent.triggerEvent('customConsole');

我们可以在控制台看到已经输出来了2条信息。我们也可以对某个自定义函数进行移除操作，比如如下：

defineEvent.removeEvent('aa',triggerAgain);

defineEvent.triggerEvent('aa');复制代码

我对triggerAgain函数进行移除，可以看到就不会这个函数的信息了。

提示

根据我国《网络安全法》，您需要绑定手机号后才可在掘金社区内发布内容。

理解 javascript 观察者模式 (订阅者与发布者)