假设有一个发布者paper,它每天出版报纸及月刊杂志。订阅者joe将被通知任何时候所发生的新闻。
该paper对象需要一个subscribers属性,该属性是一个存储所有订阅者的数组。订阅行为只是将其加入到这个数组中。当一个事件发生时,paper将会循环遍历订阅者列表并通知它们。通知意味着调用订阅者对象的某个方法。故当用户订阅信息时,该订阅者需要向paper的subscribe()提供它的其中一个方法。
paper也提供了unsubscribe()方法,该方法表示从订阅者数组(即subscribers属性)中删除订阅者。paper最后一个重要的方法是publish(),它会调用这些订阅者的方法,总而言之,发布者对象paper需要具有以下这些成员:
1.subscribers 一个数组
2.subscribe() 将订阅者添加到subscribers数组中
3.unsubscribe() 从subscribers数组中删除订阅者
4.publish() 循环遍历subscribers数组中的每一个元素,并且调用他们注册时所提供的方法
所有这三种方法都需要一个type参数,因为发布者可能触发多个事件(比如同时发布一本杂志和一份报纸)而用户可能仅选择订阅其中一种,而不是另外一种。
由于这些成员对于任何发布者对象都是通用的,故将它们作为独立对象的一个部分来实现是很有意义的。那样我们可将其复制到任何对象中,并将任意给定对象变成一个发布者。
如下实现一个通用发布者
var publisher = {
subscribers: {
any: [] // event type: subscribers
},
subscribe: function (fn, type) {
type = type || 'any';
if (typeof this.subscribers[type] === "undefined") {
this.subscribers[type] = [];
}
this.subscribers[type].push(fn);
},
unsubscribe: function (fn, type) {
this.visitSubscribers('unsubscribe', fn, type);
},
publish: function (publication, type) {
this.visitSubscribers('publish', publication, type);
},
visitSubscribers: function (action, arg, type) {
var pubtype = type || 'any',
subscribers = this.subscribers[pubtype],
i,
max = subscribers.length;
for (i = 0; i < max; i += 1) {
if (action === 'publish') {
subscribers[i](arg);
} else {
if (subscribers[i] === arg) {
subscribers.splice(i, 1);
}
}
}
}
};
而这里有一个函数makePublisher(),它接受一个对象作为对象,通过把上述通用发布者的方法复制到该对象中,从而将其转换为一个发布者:
function makePublisher(o) {
var i;
for (i in publisher) {
if (publisher.hasOwnProperty(i) && typeof publisher[i] === "function") {
o[i] = publisher[i];
}
}
o.subscribers = {any: []};
}
现在,让我们来实现paper对象,它所做的就是发布日报和月刊:
var paper = {
daily: function () {
this.publish("big news today");
},
monthly: function () {
this.publish("interesting analysis", "monthly");
}
};
将paper构造成一个发布者:
makepublisher(paper);
由于已经有一个发布者,让我们来看看订阅者对象joe,该对象有两个方法:
var joe = {
drinkCoffee: function (paper) {
console.log('Just read ' + paper);
},
sundayPreNap: function (monthly) {
console.log('About to fall asleep reading this ' + monthly);
}
};
现在,paper注册joe(即joe向paper订阅):
paper.subscribe(joe.drinkCoffee);
paper.subscribe(joe.sundayPreNap, 'monthly');
即joe为默认“any”事件提供了一个可被调用的方法,而另一个可被调用的方法则用于当“monthly”类型的事件发生时的情况。现在让我们来触发一些事件:
paper.daily();
paper.daily();
paper.daily();
paper.monthly();
paper.monthly();
paper.monthly();
输出为:
Just read big news today
Just read big news today
Just read big news today
About to fall asleep reading this interesting analysis
About to fall asleep reading this interesting analysis
About to fall asleep reading this interesting analysis
【进一步扩展】让joe成为发布者(使用微博和博客时任何人者可以是发布者)。
makePublisher(joe);
joe.tweet = function (msg) {
this.publish(msg);
};
而paper的公关部门决定读取读者的tweet,并且订阅joe的信息,那么需要提供方法readTweets():
paper.readTweets = function (tweet) {
alert('Call big meeting! Someone ' + tweet);
};
joe.subscribe(paper.readTweets);
此时,只要joe发出tweet消息,paper都会得到提醒:
joe.tweet("hated the paper today");
完整性代码如下:
<!doctype html>
<html>
<head>
<title>Observer</title>
</head>
<body>
<script>
"use strict";
var publisher = {
subscribers: {
any: [] // event type: subscribers
},
subscribe: function (fn, type) {
type = type || 'any';
if (typeof this.subscribers[type] === "undefined") {
this.subscribers[type] = [];
}
this.subscribers[type].push(fn);
},
unsubscribe: function (fn, type) {
this.visitSubscribers('unsubscribe', fn, type);
},
publish: function (publication, type) {
this.visitSubscribers('publish', publication, type);
},
visitSubscribers: function (action, arg, type) {
var pubtype = type || 'any',
subscribers = this.subscribers[pubtype],
i,
max = subscribers.length;
for (i = 0; i < max; i += 1) {
if (action === 'publish') {
subscribers[i](arg);
} else {
if (subscribers[i] === arg) {
subscribers.splice(i, 1);
}
}
}
}
};
/*
var s1 = {log: console.log},
s2 = {err: console.error},
s3 = {warn: console.warn};
publisher.subscribe(s1.log);
publisher.subscribe(s2.err);
publisher.subscribe(s3.warn);
publisher.publish({hello: "World"});
publisher.unsubscribe(s2.err);
publisher.publish("hello");
publisher.subscribe(s1.log, "log");
publisher.publish({obj: "log this object"}, "log");
*/
function makePublisher(o) {
var i;
for (i in publisher) {
if (publisher.hasOwnProperty(i) && typeof publisher[i] === "function") {
o[i] = publisher[i];
}
}
o.subscribers = {any: []};
}
var paper = {
daily: function () {
this.publish("big news today");
},
monthly: function () {
this.publish("interesting analysis", "monthly");
}
};
makePublisher(paper);
var joe = {
drinkCoffee: function (paper) {
console.log('Just read ' + paper);
},
sundayPreNap: function (monthly) {
console.log('About to fall asleep reading this ' + monthly);
}
};
paper.subscribe(joe.drinkCoffee);
paper.subscribe(joe.sundayPreNap, 'monthly');
paper.daily();
paper.daily();
paper.daily();
paper.monthly();
makePublisher(joe);
joe.tweet = function (msg) {
this.publish(msg);
};
paper.readTweets = function (tweet) {
alert('Call big meeting! Someone ' + tweet);
};
joe.subscribe(paper.readTweets);
joe.tweet("hated the paper today");
</script>
</body></html>
相关推荐
NULL 博文链接:https://shiwuyisheng.iteye.com/blog/799423
一个比较有意思的js库可以为javascript的对象实现观察者模式,以往我们使用javascript实现的观察者模式都是通过使用回调函数配合dom上的event事件来操作的,而“Watch.js”可以为javascript的对象实现观察者模式,...
观察者JS 一个实现观察者模式的 JavaScript 库。
javascript观察者模式实现自动刷新效果.docx
闲着没事,突然想起Java的观察者模式中有一个PropertyChangeSupport与PropertyChangeListener,于是就想看看用js能不能也实现一个,毕竟有时候js写的东西也需要一个观察者模式,于是就写了点东西,应该能派上用场。
js代码-使用 Proxy 实现观察者模式
1.用js实现观察者模式 <!DOCTYPE html> <html> <head> <title></title> <style type=text/css> div{width: 100px;height: 100px;border: 1px #999 solid;margin-bottom: 5px;}...
主要介绍了JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法,结合实例形式分析了JavaScript观察者模式概念、原理、使用方法及相关操作注意事项,需要的朋友可以参考下
观察者模式也叫 发布者-订阅者模式,发布者发布事件,订阅者监听事件并做出反应 在传统的前端解耦方面,观察者模式作为比较常见一种设计模式,大量使用在各种框架类库的设计当中。 核心代码: // eventProxy.js '...
观察者模式又叫做发布订阅模式,它...在JavaScript中事件监听机制就可以理解为一种观察者模式。通过onclick进行事件绑定,然后通过交互行为进行触发或者事件主动触发。 下面给出一个JS自定义的PubSub,仔细阅读下面这段
本文实例讲述了JavaScript编程设计模式之观察者模式。分享给大家供大家参考,具体如下: 简介 简单的解释观察者模式,就是一个对象(subject)维护一个依赖他的对象(observers)列表,当自身状态发生变化时,自动...
主要介绍了Javascript设计模式之观察者模式的多个实现版本实例,本文给出3种实现版本代码,同时给出了Jquery实现版本,需要的朋友可以参考下
本文实例讲述了JavaScript观察者模式(publish/subscribe)原理与实现方法。分享给大家供大家参考,具体如下: 观察者模式又叫做发布订阅模式,它定义了一种一对多的关系,让多个观察者对象同时监听某一个主题对象,这...
也是js和dom之间实现的一种观察者模式. 代码如下: div.onclick = function click (){ alert ( ”click’ ) } 只要订阅了div的click事件. 当点击div的时候, function click就会被触发。 那么到底什么是...