文档章节

js 发布订阅/观察者模式

appleZ
 appleZ
发布于 2015/04/13 10:26
字数 398
阅读 24
收藏 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


© 著作权归作者所有

共有 人打赏支持
appleZ
粉丝 1
博文 38
码字总数 9774
作品 0
深圳
JavaScript设计模式之观察者模式

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

Srtian
05/22
0
0
JavaScript 中常见设计模式整理

开发中,我们或多或少地接触了设计模式,但是很多时候不知道自己使用了哪种设计模式或者说该使用何种设计模式。本文意在梳理常见设计模式的特点,从而对它们有比较清晰的认知。 JavaScript 中...

牧云云
05/18
0
0
使用合适的设计模式一步步优化前端代码

作者:晓飞 本文原创,转载请注明作者及出处 --- 在后端语言中,设计模式应用的较为广泛。如Spring中常见的工厂模式、装饰者模式、单例模式、迭代器模式。但是在日常的前端开发中,设计模式使...

iKcamp
2017/10/27
0
0
你需要了解的23种JavaScript设计模式

为什么要学习设计模式? 在许多访谈中,你可能会遇到很多面向对象编程中的接口,抽象类,代理和以及其他与设计模式相关的问题。 一旦了解了设计模式,它会让你轻松应对任何访谈,并可以在你的...

java高级架构牛人
06/02
0
0
JavaScript 观察者 (发布/订阅) 模式

定义 观察者模式定义了对象之间一对对多的依赖关系,当一个对象改变了状态,它的所有依赖会被通知,然后自动更新。 和其他模式相比,这种模式又增加了一个原则: 在相互作用的对象之间进行松散...

缪宇
06/29
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Go interface{} to string

package mainimport "fmt"func main() {var a interface{}a = "dsadjaldaldad"var b stringb = a.(string) // 话说,用人话说的话,这叫什么操作?fmt.Println(a, b)}...

taadis
16分钟前
0
0
数据库防火墙

数据库防火墙顾名思义是一款数据(库)安全设备,从防火墙这个词可以看出,其主要作用是做来自于外部的危险隔离。换句话说,数据库防火墙应该在入侵在到达数据库之前将其阻断,至少需要在入侵...

突突突酱
26分钟前
1
0
RDBMS 关系型数据库与 NoSQL 全面比较

随着互联网的不断发展,各种类型的应用层出不穷,所以导致在这个云计算的时代,对技术提出了更多的需求,主要体现在下面这四个方面: 低延迟的读写速度:应用快速地反应能极大地提升用户的满...

PeakFang-BOK
34分钟前
1
0
徒弟做了一个Python的实战小项目——银行系统

国际惯例:实践是检验真理的唯一标准。 众所周知,在编程过程中理论知识再充实也需要通过项目的炼金石。下面给大家看一下我徒弟做的一个小项目实战要求,是做一个银行系统,就是我们去银行办...

无也Python
41分钟前
2
0
vue.js响应式原理解析与实现

从很久之前就已经接触过了angularjs了,当时就已经了解到,angularjs是通过脏检查来实现数据监测以及页面更新渲染。之后,再接触了vue.js,当时也一度很好奇vue.js是如何监测数据更新并且重新...

peakedness丶
59分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部