您的位置：首页 > Web前端 > JavaScript

JavaScript学习之设计模式->观察者模式

2016-11-08 12:40 295 查看

观察者模式的对象分为以下几种：

观察者（抽象观察者，具体观察者）

主题（抽象主题，具体主题）（主题中有存放观察者的数组，发布消息的方法）

有时候，观察者模式也被称为订阅发布者模式。观察者模式定义了一种一对多的依赖关系，让多个观察者监听某一个主题，主题的状态发生变化时，会通知订阅该主题的所有观察者。使观察者做出反应。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>观察者模式</title>
<script type=text/javascript charset=utf-8>
var Publish = function(name){
this.name = name;
this.subscribers = [];
}
Publish.prototype = {
constructor:Publish,
delivery:function(news){
var pub = this;
this.subscribers.forEach(function(item){
//把新消息发送给订阅者
item.updateChange(pub.name,news);
});
},
subscribe:function(subscriber){
var alreadyExists =this.subscribers.some(function(item){
return item == subscriber;
});
if(!alreadyExists){
this.subscribers.push(subscriber);
}
return this;
},
unsubscribe:function(subscriber){
this.subscribers = this.subscribers.filter(function(item){
return item !== subscriber;
})
return this;
}
}
//订阅者
var Subscriber = function(element){
this.element = element;
}
Subscriber.prototype = {
constructor:Subscriber,
updateChange:function(pub,news){
this.element.innerHTML = pub + "发布了:" + news;
}
}

window.onload = function(){
var pub1 = document.getElementById("pub1");//发布者按钮
var pub2 = document.getElementById("pub2");
var pub3 = document.getElementById("pub3");

var pub11 = new Publish(pub1.value);//按钮绑定发布者类
var pub22 = new Publish(pub2.value);
var pub33 = new Publish(pub3.value);

pub1.onclick = function(){//将按钮绑定到发布者时间中
pub11.delivery(document.getElementById("text1").value);//按钮点击将消息发布出去
}
pub2.onclick = function(){
pub22.delivery(document.getElementById("text2").value);
}
pub3.onclick = function(){
pub33.delivery(document.getElementById("text3").value);
}

var subs1 = new Subscriber(document.getElementById("sub1"));//声明订阅者
var subs2 = new Subscriber(document.getElementById("sub2"));
var subs3 = new Subscriber(document.getElementById("sub3"));

pub11.subscribe(subs1).subscribe(subs2).subscribe(subs3);//订阅
pub22.subscribe(subs1).subscribe(subs2);//订阅
pub33.subscribe(subs1);//订阅
pub11.unsubscribe(subs2);
};
</script>
</head>
<body>
<input id="pub1" type="button" value="第一报社" /><input id="text1" value="" /><br>
<input id="pub2" type="button" value="第二报社" /><input id="text2" value="" /><br>
<input id="pub3" type="button" value="第三报社" /><input id="text3" value="" /><br>

<textarea id="sub1" rows="5" cols="30" ></textarea>
<textarea id="sub2" rows="5" cols="30" ></textarea>
<textarea id="sub3" rows="5" cols="30" ></textarea>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航