文档章节

js 发布订阅/观察者模式

appleZ
 appleZ
发布于 2015/04/13 10:26
字数 398
阅读 46
收藏 1

#程序员薪资揭榜#你做程序员几年了?月薪多少?发量还在么?>>>

js 观察者模式 或者叫订阅发布模式,应用比较广泛,几乎涉及到事件调用的都会用到,例如jQuery的Callbacks,seajs的event系统,但是实现起来却不难,简单看一下:

seajs 源码

var events = data.events = {}

// Bind event
seajs.on = function(name, callback) {
  var list = events[name] || (events[name] = [])
  list.push(callback)
  return seajs
}

// Remove event. If `callback` is undefined, remove all callbacks for the
// event. If `event` and `callback` are both undefined, remove all callbacks
// for all events
seajs.off = function(name, callback) {
  // Remove *all* events
  if (!(name || callback)) {
    events = data.events = {}
    return seajs
  }

  var list = events[name]
  if (list) {
    if (callback) {
      for (var i = list.length - 1; i >= 0; i--) {
        if (list[i] === callback) {
          list.splice(i, 1)
        }
      }
    }
    else {
      delete events[name]
    }
  }

  return seajs
}

// Emit event, firing all bound callbacks. Callbacks receive the same
// arguments as `emit` does, apart from the event name
var emit = seajs.emit = function(name, data) {
  var list = events[name]

  if (list) {
    // Copy callback lists to prevent modification
    list = list.slice()

    // Execute event callbacks, use index because it's the faster.
    for(var i = 0, len = list.length; i < len; i++) {
      list[i](data)
    }
  }

  return seajs
}

可以看到,seajs提供了 on、off用来注册销毁事件, emit用来触发事件,思路明显是一个发布订阅的标准思路;

自己写一个:

var PubSub ={
	subscribe:function(ev,callback){
		var callbacks = this.callbacks||(this.callbacks={});
		(this.callbacks[ev]||(this.callbacks[ev]=[])).push(callback);
		 return  this;
	},
	publish:function(){
		var args = Array.prototype.slice.call(arguments);
		var  ev = args.shift();
		var list,i,l;
		if(!this.callbacks) return this;
		if(!(list=this.callbacks[ev])) return this;
		for(var i=0,l=list.length;i<l;i++){
			list[i].apply(this,args);
		}  
		return this;
	},
	unSubscribe:function(ev, fn){
		var args = Array.prototype.slice.call(arguments);
		var  ev = args.shift();
		if(!this.callbacks) return this;
		if(!(list=this.callbacks[ev])) return this;
		if(!this.callbacks) return this;
		if(!this.callbacks[ev]) return this;
		if(args.length){
			list.splice(fn,1);
		}else{
			list.length = 0;
		}
		return this; 
	}
}

测试:

PubSub.subscribe("test",function(){alert(0)});
PubSub.subscribe("test",function(){alert(1)});
PubSub.publish("test");	// 0 1
PubSub.unSubscribe("test",function(){alert(0)});
PubSub.publish("test"); //0


© 著作权归作者所有

上一篇: js 事件委托
下一篇: http 缓存记录
appleZ
粉丝 1
博文 38
码字总数 9781
作品 0
深圳
私信 提问
加载中

评论(0)

JavaScript设计模式之观察者模式

前言 准备研究一下MVVM的一些东西,由于MVVM运用了观察者模式的思想,因此翻开了《JavaScript设计模式与开发实践》一书,将观察者模式学习了一遍,顺便有对一些常用的设计模式进行一些了解,...

Srtian
2018/05/22
0
0
javascript中的发布订阅模式与观察者模式

这里了解一下JavaScript中的发布订阅模式和观察者模式,观察者模式是24种基础设计模式之一。 设计模式的背景 设计模式并非是软件开发的专业术语,实际上设计模式最早诞生于建筑学。 设计模式...

osc_tehy8vur
2019/08/05
1
0
每天一个设计模式之订阅-发布模式

博主按:《每天一个设计模式》旨在初步领会设计模式的精髓,目前采用(靠这吃饭)和(纯粹喜欢)两种语言实现。诚然,每种设计模式都有多种实现方式,但此小册只记录最直截了当的实现方式 :)...

godbmw
2018/12/10
0
0
[JS设计模式]:观察者模式(即发布-订阅者模式)(4)

简介 观察者模式又叫发布---订阅模式,它定义了对象间的一种一对多的关系,让多个观察者对象同时监听某一个主题对象,当一个对象发生改变时,所有依赖于它的对象都将得到通知。 举一个现实生...

风雨后见彩虹
2019/07/09
0
0
从工厂模式说起,简单聊聊设计模式在前端中的应用

设计模式是一套可以被反复使用的、多数人知晓的、经过分类编目的、代码设计经验的总结。使用设计模式,是为了可重用代码,让代码更容易被他人理解并且提高代码的可靠性。 设计模式的基本原则...

罗辑思维前端开发团队
2019/07/26
0
0

没有更多内容

加载失败,请刷新页面

加载更多

好的可视化编辑器收集

国内 https://www.ivx.cn/index 国外 https://vectr.com

lilugirl
45分钟前
15
0
怎么在分享流程图的时候设置密码?迅捷画图教你保密小技巧!

怎么在分享流程图的时候设置密码?相信大家对分享链接和密码已经不陌生了,毕竟现在分享资源主要用的网盘、网站等等,基本上都需要先获取密码,才能进入分享链接页面,从分享资源的角度来说,...

赛利亚大姐大
46分钟前
13
0
如何在Mac电脑中输入多种标点符号和文字表情

特殊的标点符号和表情怎么输入?MAC电脑有自己自带的输入法,但是对于一些表情符号很多人都不知道在哪里使用,现在就来介绍一下MAC如何输入多种标点符号和文字表情。 1、首先我们打开备忘录,...

mac小叮当
55分钟前
17
0
Ubuntu替换国内源

网络环境的原因,官方的apt的源的速度比较慢,打算替换为国内源,正好学校有Ubuntu的源,所以替换下 编辑文件/etc/apt/sources.list 将其中的内容换为对应的系统的目标源即可。 选择你的ubu...

zhangwenwen
今天
14
0
持续交付的最后一英里

如果开发人员的变更集在集成时并没有实现长期部署就绪的状态,那么你的团队其实就没有真正的实践持续交付。 想要完全优化产品开发周期,你需要在团队中强调无缝部署的重要性,使每位工程师都...

京东智联云开发者
今天
18
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部