当前位置:   article > 正文

JavaScript-观察者模式(publish/subscribe)_jquery subscribe函数

jquery subscribe函数

JavaScript-观察者模式(publish/subscribe)

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

下面给出一个JS自定义的PubSub,仔细阅读下面这段代码有助于你理解观察者模式。相关代码请查看github

        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;
            },
            // 删除订阅事件
            off: function(eventType, handler){
                var currentEvent = this.handlers[eventType];
                var len = 0;
                if (currentEvent) {
                    len = currentEvent.length;
                    for (var i = len - 1; i >= 0; i--){
                        if (currentEvent[i] === handler){
                            currentEvent.splice(i, 1);
                        }
                    }
                }
                return this;
            }
        };

        var pubsub = new PubSub();
        var callback = function(data){
            console.log(data);
        };

        //订阅事件A
        pubsub.on('A', function(data){
            console.log(1 + data);
        });
        pubsub.on('A', function(data){
            console.log(2 + data);
        });
        pubsub.on('A', callback);

        //触发事件A
        pubsub.emit('A', '我是参数');

        //删除事件A的订阅源callback
        pubsub.off('A', callback);

        pubsub.emit('A', '我是第二次调用的参数');
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59

运行结果。
这里写图片描述

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/blog/article/detail/49824
推荐阅读
相关标签
  

闽ICP备14008679号