AutoCAD 3DMAX C语言 Pro/E UG JAVA编程 PHP编程 Maya动画 Matlab应用 Android
Photoshop Word Excel flash VB编程 VC编程 Coreldraw SolidWorks A Designer Unity3D
 首页 > JavaScript

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

51自学网 http://www.wanshiok.com
JavaScript,观察者模式,publish,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);};//订阅事件Apubsub.on('A', function(data){  console.log(1 + data);});pubsub.on('A', function(data){  console.log(2 + data);});pubsub.on('A', callback);//触发事件Apubsub.emit('A', '我是参数');//删除事件A的订阅源callbackpubsub.off('A', callback);pubsub.emit('A', '我是第二次调用的参数');

运行结果。

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

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


JavaScript,观察者模式,publish,subscribe  
上一篇:详解Angular.js数据绑定时自动转义html标签及内容  下一篇:Angular.js去除页面中显示的空行方法示例