<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title></title>
<script src="../jquery/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
//观察者模式：对程序中某一个对象的进行实时的观察，当该对象状态发生改变的时候，进行通知
//观察者、被观察者
//经典案例：订报纸:(报社(发布者)、订阅者)
//发布者（被观察者）
var Publish = function(name) {
this.name = name;
this.subscribers = []; //接受所有的订阅者（每一个元素是函数类型fn）数组
}
//报社：Publish类的实例对象发布消息的方法
Publish.prototype.deliver = function(news) {
var publish = this;
this.subscribers.forEach(function(item) {
var fn = item;
fn(publish, news); //把新消息发给一个订阅者
})
return this; //链式编程
}
//订阅者：订阅报纸的方法
Function.prototype.subscribe = function(publish) {
var sub = this; //取得具体订阅者这个人 z3
//some方法：循环遍历数组的每一个元素，执行一个函数，如果其中有一个返回true,那么整体返回true
var alreadyExists = publish.subscribers.some(function(item) { //[z4,z5,z6,z7]
return item === sub
});
//如果当前出版蛇不存在这个人，则将其加入其中
if (!alreadyExists) {
publish.subscribers.push(this);
}
return this;
}
//订阅者取消订阅
Function.prototype.unsubscribe = function(publish) {
var sub = this; //取得具体订阅者这个人 z3
//filter方法：循环遍历数组的每一个元素，执行一个函数如果return 为false，则删除该元素
publish.subscribers.filter(function(item) {
return item !== sub
})
return this;
}
window.onload = function() {
//实例化发布者对象（报社对象、被观察者）
var pub1 = new Publish("报社一");
var pub2 = new Publish("报社二");
var pub3 = new Publish("报社三");

//观察者（订阅者）
var sub1 = function(publish,news){
$('#sub1').append('来自'+publish.name+'消息是'+news+"<br/>")
}
var sub2 = function(publish,news){
$('#sub2').append('来自'+publish.name+'消息是'+news+"<br/>")
}
sub1.subscribe(pub1).subscribe(pub2).subscribe(pub3)
sub2.subscribe(pub1).subscribe(pub2);

//事件绑定
$('#pub1').click(function(){
pub1.deliver($('#text1').val())
})
$('#pub2').click(function(){
pub2.deliver($('#text2').val())
})
$('#pub3').click(function(){
pub3.deliver($('#text3').val())
})
}
</script>
</head>

<body>
<input id="pub1" type="button" value="报社一" />
<input id="text1" />
<br />
<input id="pub2" type="button" value="报社二" />
<input id="text2" />
<br />
<input id="pub3" type="button" value="报社三" />
<input id="text3" />
<br />
<textarea cols="20" rows="5" id="sub1"></textarea>
<textarea cols="20" rows="5" id="sub2"></textarea>
</body>

</html>

observeMode的更多相关文章

随机推荐

  1. RichtextBox 行和列

    获得光标所在的行号 获得光标所在的列号 设置光标到指定行号 设置光标到指定列号 http://www.huifangseo.com/blog/6/7.html 获得光标所在的行号和列号 方法1 int ...

  2. Web Service实例——天气预报

    上述只是模拟了一下服务端和本地端的通信,但是却没有涉及到真正获取其他网站信息的操作.现在我们通过一个案例,是关于获取天气预报,来实际掌握该项技能. 原本可以使用MyEclipse自动生成客户端,然后很 ...

  3. (转载)equals与==

    引言:从一个朋友的blog转过来的,里面解决了两个困扰我很久的问题.很有久旱逢甘霖的感觉. 概述:        A.==可用于基本类型和引用类型:当用于基本类型时候,是比较值是否相同:当用于引用类型 ...

  4. python学习笔记--easy_install和pip

    "A tool for installing and managing Python packages"     --pip easy_insall和pip都提供了在线一键安装模块 ...

  5. mysql 导入excel 或 .csv

    第一步 导出excel 去掉列头,设置文本里面格式

  6. java 流程执行 循环 foreach循环

    一. if分支 1. 结构  if  else if   else 2.执行原则 if  if  if 结构  会一直去执行()里的判断语句 if else if  else if 结构  只要一条( ...

  7. HTML5 Canvas 2D绘图

    为了防止无良网站的爬虫抓取文章,特此标识,转载请注明文章出处.LaplaceDemon/ShiJiaqi. http://www.cnblogs.com/shijiaqi1066/p/4851774. ...

  8. bootstrap-datetimepicker 时间表箭头不能显示

    我使用的是bootstrap-datetimepicker+bootstrap v3,但这个插件使用的时候,并没有和V3相匹配,仍然调用的是bootstrap V2的图标,代码是: <i cla ...

  9. css3 盒模型

    0,前言 在css2.1 之前,我们都熟知的两种盒模型,一种是w3c标准盒模型,另外一种是怪异模式下的盒模型.在css3之前我们一直使用的是标准盒模型,但是标准盒模型的宽度总是需要小心的去使用,稍有不 ...

  10. Cocos2d-x 学习资料收集

    框架源代码: http://code.google.com/p/cocos2d-x/downloads/list 搭建环境 http://blog.csdn.net/ccf19881030/artic ...