什么是观察者模式?

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

理解观察者模式:

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. Android - 注解

    原理: http://www.cnblogs.com/Fndroid/p/5354644.html http://www.jianshu.com/p/28edf5352b63 开源库: ButterK ...

  2. 【10-2】复杂业务状态的处理(从状态者模式到FSM)

    一.概述 我们平常在开发业务模块时,经常会遇到比较复杂的状态转换.比如说用户可能有新注册.实名认证中.已实名认证.禁用等状态,支付可能有等待支付.支付中.已支付等状态.OA系统里的状态处理就更多了. ...

  3. POJ3694(KB9-D 割边+LCA)

    Network Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 10371   Accepted: 3853 Descript ...

  4. HDU3359(SummerTrainingDay05-I 高斯消元)

    Kind of a Blur Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)To ...

  5. vue 自定义组件的自定义属性

    <auto-com :value="value"></auto-com> //带 : 的属性传入的是动态的值 <auto-com value=&quo ...

  6. 葡萄城报表模板库再次更新!补充医院Dashboard及房地产销售行业报表

    新增模板介绍 近日,葡萄城报表再次对报表模板库进行了更新,除了补充医院用于整体运营监控的5张 Dashboard 报表外,还增加了房地产销售场景中常见的12张报表. 5张 Dashboard 报表模板 ...

  7. paste 命令

    Linux paste命令用于合并文件的列. paste指令会把每个文件以列对列的方式,一列列地加以合并. 语法: paste [-s][-d <间隔字符>][--help][--vers ...

  8. Python 在子类中调用父类方法详解(单继承、多层继承、多重继承)

    Python 在子类中调用父类方法详解(单继承.多层继承.多重继承)   by:授客 QQ:1033553122   测试环境: win7 64位 Python版本:Python 3.3.5 代码实践 ...

  9. AndroidKiller报.smali文件丢失问题解决(关闭Android Studio的Instant Run)

    第一节编写一个Android程序里我们生成了一个验证激活码的apk,当我们输入的激活码正确时才能注册成功,输入错误时注册失败. 现在我们想输入错误的激活码也能注册.我们用Android反编译工具进行反 ...

  10. 获取windows鼠标的当前坐标

    #先下载pyautogui库,pip install pyautogui import os,time import pyautogui as pag try: while True: print ( ...