<!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. 【转】Android Studio 的小小配置

    这篇博文的内容列表: 1.编辑器的字体设置 2.预览XML布局 3.导入项目  4.显示行号  5.新建Java类和Component的子类 额~~程序猿一般话都不多,嘿嘿,那咱就直接图文吧~ ^_^ ...

  2. 使用OpenXML将Excel内容读取到DataTable中

    前言:前面的几篇文章简单的介绍了如何使用OpenXML创建Excel文档.由于在平时的工作中需要经常使用到Excel的读写操作,简单的介绍下使用 OpenXML读取Excel中得数据.当然使用Open ...

  3. Run-Time Check Failure #2 - Stack around the variable 'ucPriKey' was corrupt

    Run-Time    Check    Failure    #2        一般是栈被破坏,你的代码可能有缓冲区溢出一类的问题. Run-Time Check Failure #2 - Sta ...

  4. HDU 5046 Airport ( Dancing Links 反复覆盖 )

    今年上海网络赛的一道题目 , 跟 HDU 2295 如出一辙 . 就是距离的计算一个是欧几里得距离 , 一个是曼哈顿距离 学完DLX感觉这题好水 ,就是一个裸的反复覆盖 注意下别溢出即可了 #incl ...

  5. 磁盘性能指标--IOPS 理论

    机械硬盘的连续读写性很好, 但随机读写性能很差.这是因为磁头移动至正确的磁道上需要时间,随机读写时,磁头不停的移动,时间都花在了磁头寻道上,所以性能不高.  如下图:在存储小文件(图片).OLTP数据 ...

  6. MYSQL 源代码 学习

    http://blog.sina.com.cn/s/articlelist_1182000643_1_1.html http://blog.csdn.net/gao1738/article/detai ...

  7. careercup-栈与队列 3.1

    3.1 描述如何只用一个数组来实现三个栈. 解答 我们可以很容易地用一个数组来实现一个栈,压栈就往数组里插入值,栈顶指针加1: 出栈就直接将栈顶指针减1:取栈顶值就把栈顶指针指向的单元的值返回: 判断 ...

  8. NDK开发之访问域

    Java有两类域,实例域和静态域.类的每个实例都有自己的实例域副本,而一个类的所有实例共享一个静态域(Java SE基础). JNI提供了相应的函数来访问这两类域,总体步骤是这样的: 1.通过对象引用 ...

  9. Linux下安装GAMS建模优化工具

    1.下载GAMS wget http://d37drm4t2jghv5.cloudfront.net/distributions/24.5.6/linux/linux_x64_64_sfx.exe 2 ...

  10. winform鼠标滚轮事件

    #region 进入窗体时加载 public FormAlarmInfoQuery() { InitializeComponent(); pictureBox1.ImageLocation = &qu ...