当前位置： 移动技术网 > IT编程>开发语言>JavaScript > JavaScript观察者模式(publish/subscribe)原理与实现方法

JavaScript观察者模式(publish/subscribe)原理与实现方法

2019年06月09日  | 移动技术网IT编程  | 我要评论

本文实例讲述了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', '我是第二次调用的参数');

运行结果。

更多关于javascript相关内容可查看本站专题：《javascript面向对象入门教程》、《javascript中json操作技巧总结》、《javascript切换特效与技巧总结》、《javascript查找算法技巧总结》、《javascript动画特效与技巧汇总》、《javascript错误与调试技巧总结》、《javascript数据结构与算法技巧总结》、《javascript遍历算法与技巧总结》及《javascript数学运算用法总结》

希望本文所述对大家javascript程序设计有所帮助。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网