什么是观察者模式?

观察者模式又叫做发布订阅模式,它定义了一种一对多的关系,让多个观察者对象同时监听某一个主题对象,这个主题对象的状态发生改变时就会通知所有观察着对象。它是由两类对象组成,主题和观察者,主题负责发布事件,同时观察者通过订阅这些事件来观察该主体,发布者和订阅者是完全解耦的,彼此不知道对方的存在,两者仅仅共享一个自定义事件的名称。

理解观察者模式:

JS传统事件就是一个观察者模式,之所以要有观察者模式,是因为有时候和传统事件无关的事件,比如:2个或者更多模块的直接通信问题,比如说我有个index.html页面,我有很多JS文件,比如:

a.js: function a(){};    b.js: function b(){};  c.js  function c(){};  等等。后面还有许多这样的JS,那么我要在index.html初始化这些函数的话,我需要这样调用a();b();c()等等,也就是说页面调用的时候 我要这样调用,增加了依赖性,我要知道有多少个函数要这样初始化调用,但是如果我们现在用观察者模式就不需要知道有哪些订阅者,比如一个模块(或者多个模块)订阅了一个主题(或者事件),另一个模块发布这个主题时候,订阅这个主题模块就可以执行了,观察者主要让订阅者与发布者解耦,发布者不需要知道哪些模块订阅了这个主题,它只管发布这个主题就可以了,同样订阅者也无需知道那个模块会发布这个主题,它只管订阅这个主题就可以了。这样2个模块(或更多模块)就实现了关联了。而不需要和上面代码一样,我要知道哪些模块要初始化,我要怎样初始化。这只是一个简单的列子解释观察者模式要使用在什么地方,我也看过很多博客关于这方面的资料,但是很多人写博客只是讲了如何实现观察者模式及观察者模式的好处,并没有讲我们什么时候该使用观察者模式,所以我列举了上面的列子,就是多个不同业务模块需要相互关联的时候,可以使用观察者模式。就好比requireJS,seaJS,KISSY解决依赖的问题一样(比如A依赖于B,B依赖于C,只要一个解决入口文件,其他都会异步加载出来一样)。也就是说各个模块之间的关联性可以使用观察者模式来设计。

这种模式有多种实现,比如jquery插件 pub/sub

比如如下代码:

jQuery.subscribe(“done”,fun2);

function fun1(){

jQuery.publish(“done”);

}

上面的jQuery.publish(“done”);意思是执行fun1函数后,向信号中心jquery发布done信号,而jquery.subscribe(“done”,fun2)的意思是:绑定done信号,执行fun2函数。

我们还可以看看nodejs核心模块Events提供EventEmitter对象,也实现了分布式事件。如下代码:

var Emitter = require('events').EventEmitter;

var emitter = new Emitter();

emitter.on('someEvent',function(stream){

console.log(stream + 'from eventHandler1');

});

emitter.on('someEvent',function(stream){

console.log(stream + 'from eventHandler2');

});

emitter.emit('someEvent','I am a stream!');

上面nodejs的 emitter对象中的 emitter.on是指发布事件”someEvent”,而emitter.emit是指触发事件,事件名称为”someEvent”.从而执行回掉函数。在nodeJS中我们可以发布很多事件,事件名称为someEvent,这样每一个回掉就实现了一个业务逻辑,这样代码耦合性降低了。

我们现在可以实现自己的Pub/Sub模式,代码如下:

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;
}
};

// 调用方式如下:

var pubsub = new PubSub();

pubsub.on('A',function(data){

console.log(1 + data);  // 执行第一个回调业务函数

});

pubsub.on('A',function(data){

console.log(2 + data); // 执行第二个业务回调函数

});

// 触发事件A

pubsub.emit('A',"我是参数");

二:javascript自定义事件

Javascript传统事件有 点击事件(click),鼠标移上去事件(mouseover)等等,那么什么是自定义事件呢?自定义事件可以这样理解传统事件没有的,就好比很多人发明东西一样,何谓发明?就是世界上没有的东西,现在被自己做到了,这叫发明,所以我们自定义事件也可以这样理解---目前传统事件没有的。

2. 为什么要自定义事件,自定义事件要使用在地方?

传统的事件不能满足我们的需求,所以我们需要自定义事件,比如传统的事件有单击,双击,但是突然某一天我想要三击 那就要用到自定义事件了,自定义事件一般使用在观察者模式上,比如主体需要发布各种消息通过创建各种自定义事件来实现,对于消息的订阅则通过注册监听器来实现。

   3. 如何创建自定义事件?

1. 在标准浏览下(除IE8及以下) 我们可以如下这样创建自定义事件.比如如下代码:

<div id="longen">我来测试</div>
var test = document.getElementById("longen");
// 创建事件
var evt = document.createEvent('Event');
// 定义事件类型
evt.initEvent('customEvent',true,true);
// 监听事件
test.addEventListener('customEvent',function(){
console.log("111"); },false);
// 触发事件
test.dispatchEvent(evt);

如上,在标准浏览下 运行下 在控制台可以看到 输入111内容了,说明自定义事件成功触发,在这个过程中,createEvent方法创建了一个空事件evt,然后使用initEvent方法定义事件的类型为约定好的自定义事件,再对元素进行监听,最后使用dispatchEvent来触发事件了。自定义事件无非就是监听事件,然后自己运行回调函数,上面的initEvent的第二个参数的意思是:是否冒泡,第三个参数的意思是:是否可以使用preventDefault()来阻止默认行为。但是上面的自定义事件只能对标准浏览器下生效,IE8及以下都不生效,不支持createEvent()这个方法,所以我们现在需要IE8及以下的事件。在IE下我们可以使用onpropertychange事件来监听,当DOM的某个属性发生改变时就触发onpropertychange事件的回调,再在回调中判断改变的属性是否是我们自定义的属性,假如是则执行我们的回调,否则不执行。

如下在IE8及以下代码可以实现如下测试:

<div id="longen">我来测试</div>
var test = document.getElementById("longen");
document.documentElement.myEvent = 0;
function foo(){
alert('已经监听到了'); }
document.documentElement.attachEvent("onpropertychange",function(event) {
if (event.propertyName == "myEvent") {
foo();
}
});
document.documentElement.myEvent++;

如上代码就可以在IE下自定义成功触发了。

综合:我们可以写一个跨浏览器的自定义事件了,代码如下:

function DefineEvent(element) {
this.init(element);
}
DefineEvent.prototype = {
constructor: DefineEvent,
init: function(element) {
this.element = (element && element.nodeType == 1) ? element : document;
return this;
},
/*
* 添加监听事件
* @param {string} type 监听的事件类型
* @param {Function} callback 回调函数
*/
addEvent: function(type,callback) {
var self = this;
if(self.element.addEventListener) { // 标准浏览器下
self.element.addEventListener(type,callback,false);
}else if(self.element.attachEvent){ // IE
if(isNaN(self.element[type])) {
self.element[type] = 0;
}
var fun = function(evt){
evt = evt ? evt : window.event;
if(evt.propertyName == type) {
callback.call(self.element);
}
}
self.element.attachEvent('onpropertychange',fun);
// 在元素上存储绑定回调,方便移除事件绑定
if(!self.element['callback' + callback]) {
self.element['callback' + callback] = fun; }
}else {
self.element.attachEvent('on' + type,callback);
}
return self;
}, /*
* 移除事件
* @param {string} type 监听的事件类型
* @param {Function} callback 回调函数
*/
removeEvent: function(type,callback){
var self = this;
if(self.element.removeEventListener) {
self.element.removeEventListener(type,callback,false);
}else if(self.element.detachEvent) {
// 移除对应的自定义属性监听
self.element.detachEvent('onpropertychange',self.element['callback' + callback]);
// 删除储存在 DOM 上的自定义事件的回调
self.element['callback' + callback] = null; }else {
self.element.detachEvent('on' + type,callback);
}
return self;
}, /* * 触发事件 * @param {String} type 触发事件的类型 * @return {object} 返回的对象 */ triggerEvent: function(type){ var self = this; if(self.element.dispatchEvent) { // 标准浏览器下 // 创建事件 var evt = document.createEvent('Event'); // 定义事件的类型 evt.initEvent(type,true,true); // 触发事件 self.element.dispatchEvent(evt); }else if(self.element.fireEvent) { // IE self.element[type]++; } return self; } };

HTML

<div id="longen">我来测试</div>

调用如下:

var testBox = document.getElementById('longen');

var defineEvent = new DefineEvent(testBox);

// 回调函数1

function triggerEvent(){

console.log('触发了一次自定义事件 customConsole');

}

// 回调函数2

function triggerAgain(){

console.log('再一次触发了自定义事件 customConsole');

}

// 同时绑定两个回调函数,支持链式调用

defineEvent.addEvent('aa', triggerEvent).addEvent('aa', triggerAgain);

defineEvent.triggerEvent('customConsole');

我们可以在控制台看到已经输出来了2条信息。我们也可以对某个自定义函数进行移除操作,比如如下:

defineEvent.removeEvent('aa',triggerAgain);

defineEvent.triggerEvent('aa');

我对triggerAgain函数进行移除,可以看到就不会这个函数的信息了。

理解javascript观察者模式(订阅者与发布者)的更多相关文章

  1. 深入理解JavaScript系列(32):设计模式之观察者模式

    介绍 观察者模式又叫发布订阅模式(Publish/Subscribe),它定义了一种一对多的关系,让多个观察者对象同时监听某一个主题对象,这个主题对象的状态发生变化时就会通知所有的观察者对象,使得它们 ...

  2. 【干货理解】理解javascript中实现MVC的原理

    理解javascript中的MVC MVC模式是软件工程中一种软件架构模式,一般把软件模式分为三部分,模型(Model)+视图(View)+控制器(Controller); 模型:模型用于封装与应用程 ...

  3. 深入理解JavaScript系列(36):设计模式之中介者模式

    介绍 中介者模式(Mediator),用一个中介对象来封装一系列的对象交互.中介者使各对象不需要显式地相互引用,从而使其耦合松散,而且可以独立地改变它们之间的交互. 主要内容来自:http://www ...

  4. 深入理解javascript之设计模式

    设计模式 设计模式是命名.抽象和识别对可重用的面向对象设计实用的的通用设计结构. 设计模式确定类和他们的实体.他们的角色和协作.还有他们的责任分配. 每个设计模式都聚焦于一个面向对象的设计难题或问题. ...

  5. 深入理解JavaScript系列

    转自http://www.cnblogs.com/TomXu/archive/2011/12/15/2288411.html 深入理解JavaScript系列(1):编写高质量JavaScript代码 ...

  6. 深入理解JavaScript系列(转自汤姆大叔)

    深入理解JavaScript系列文章,包括了原创,翻译,转载,整理等各类型文章,如果对你有用,请推荐支持一把,给大叔写作的动力. 深入理解JavaScript系列(1):编写高质量JavaScript ...

  7. [转]深入理解JavaScript系列

    文章转自:汤姆大叔-深入理解JavaScript系列文章 深入理解JavaScript系列文章,包括了原创,翻译,转载,整理等各类型文章,如果对你有用,请推荐支持一把,给大叔写作的动力. 深入理解Ja ...

  8. 深入理解 JavaScript 异步系列(1)—— 什么是异步

    前言 2014年秋季写完了<深入理解javascript原型和闭包系列>,已经帮助过很多人走出了 js 原型.作用域.闭包的困惑,至今仍能经常受到好评的留言. 很早之前我就总结了JS三座大 ...

  9. 深入理解 JavaScript 异步系列(1)——基础

    前言 2014年秋季写完了<深入理解javascript原型和闭包系列>,已经帮助过很多人走出了 js 原型.作用域.闭包的困惑,至今仍能经常受到好评的留言. 很早之前我就总结了JS三座大 ...

随机推荐

  1. Hadoop在启动时的坑——start-all.sh报错

    1.若你用的Linux系统是CentOS的话,这是一个坑: 它会提示你JAVA_HOME找不到,现在去修改文件: .修改hadoop配置文件,手动指定JAVA_HOME环境变量 [${hadoop_h ...

  2. Oracle Index 索引无效原因

    索引无效原因 最近遇到一个SQL语句的性能问题,修改功能之前的运行时间平均为0.3s,可是添加新功能后,时间达到了4~5s.虽然几张表的数据量都比较大(都在百万级以上),但是也都有正确创建索引,不知道 ...

  3. JS 模块 p6

    利用了闭包的模块: 简单模块例子: function fn(){ ; function y(){ console.log(x); } return { y:y} }var do1 = fn() do1 ...

  4. luogu P4108 [HEOI2015]公约数数列——solution

    -by luogu 不会啊.... 然后%了一发题解, 关键是 考虑序列{$a_n$}的前缀gcd序列, 它是单调不升的,且最多只会改变$log_2N$次,因为每变一次至少除2 于是,当我们询问x时: ...

  5. Android之在linux终端执行shell脚本直接打印当前运行app的日志

    1.问题 我们一般很多时候会需要在ubuntu终端上打印当前运行app的日志,我们一般常见的做法是 1).获取包名 打开当前运行的app,然后输入如下命令,然后在第一行TASK后面的就可以看到包名 a ...

  6. 关于Mobx中装饰器语法的环境配置

    1.弹出项目配置 npm run eject 此处注意,若弹出项目配置失败,请先执行以下两行代码(若没有安装git则请跳过,本人是在安装git的情况下解决问题的) 1.git add . 2.git ...

  7. qtcreator minggw 支持c++11

    pro文件添加 QMAKE_CXXFLAGS += -std=c++11

  8. Django开发笔记(一)

    Django开发笔记(一) 标签(空格分隔): Django Python 1. 创建并运行Django项目 创建开发环境 安装Django pip install django==version 执 ...

  9. python的函数(二)

    1,函数的变量 2,函数的返回值 1,函数的变量 1.0,函数的变量分为局部变量和全局变量. def fun(): x = 100 print x 这个x是局部变量,函数执行完后,x的变量就会销毁,只 ...

  10. 将float转换为数据类型numeric时出现算术溢出错误

    今天修改数据库字段类型,把float转换成decimal类型. 找了好多资料都没从根本上解决问题.多亏了下面的这个blog http://blog.csdn.net/wangchao1982/arti ...