文档章节

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

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Akka的Actor生命周期《Eight》译

Actor在创建时出现,然后在用户请求时停止。每当一个Actor停止时,它的所有孩子也会被递归停止。此行为极大地简化了资源清理,并有助于避免资源泄漏,例如由打开的套接字和文件引起的资源泄漏...

woshixin
8分钟前
0
0
Python 线程 条件锁 生产者消费者模型

创建多个生产者和消费者,并且加上条件锁,避免线程冲突 import threadingfrom threading import Threadfrom threading import Conditionimport timeimport randomc = Conditi...

阿豪boy
24分钟前
0
0
【七】组合Action

本章描述了常用定义Action的方法。 自定义action builders 我们在action一章已经看过如何声明一个action——有request parameter、无request parameter、有body parser等等。你可以在 asynch...

Landas
40分钟前
0
0
Spring Boot实战之基础回顾

本文作者: 吴伟祥 本文链接: https://wuweixiang.cn/2018/08/21/Spring-Boot实战之基础回顾/ 版权声明: 本博客所有文章除特别声明外均为原创,采用CC BY-NC-SA 4.0 许可协议。转载请在文章开...

吴伟祥
41分钟前
0
0
OAuth认证开发

提示: 以下测试是基于项目安装成功,初始化数据库(initial_db.ddl, oauth.ddl, initial_data.ddl)后的测试, 也可在页面上点击"client_details"菜单里进行测试 方式1:基于浏览器 (grant_type=...

舒文joven
49分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部