<!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. Excel中如何查找并列出所有链接（外部数据链接）？

    在 Excel 中,有时会需要创建外部链接来引用其他工作簿的单元格内容,但是如果想要找出所有链接并且还要将这些外部数据链接列在一个工作簿当中是有点难度的.下面我会介绍一些快捷方法,不仅能够快速帮你找出 ...

  2. 百度的android采访分析

    今天早上10分,我接到一个电话采访百度.当然,我说提前.我的病是多么强烈延迟.所以我也没怎么准备,当然,我也看他们的真实水平的思考.在这次审查中! ! ! ! ! !! .! ! ! !.!! !.! ...

  3. GCC扩展（转--对看kernel代码有帮助

    http://my.oschina.net/senmole/blog?catalog=153878 Linux Kernel的代码,上次就发现一个结构体的定义形式看不懂,后来才知道它用的不是标准的AN ...

  4. Java实现直接插入查找

    import java.util.Scanner; /*算法思想:每趟将一个待排序的元素作为关键字,按照关键字值大小插入到已排好序的那部分序列的适当位置上,直到插入完成,*/ /*平均时间复杂度O(n ...

  5. .net+easyui系列--验证框

    1.允许从 0 到 10个字符 <input id="vv" class="easyui-validatebox" data-options=" ...

  6. 关于C++和C#类型比较的相关内容

    转载:http://www.csharpwin.com/csharpspace/6825r9922.shtml   C#类型比较 类别 类名 说明 Visual Basic 数据类型 C# 数据类型 ...

  7. javascript - 清空一个 array

    我觉得javascript不容易, 许多人觉得js容易, 因为他们觉得很容易写出常用的需求, 但是当我们实际做项目的时候, 对于javascript的要求是很高的, 特别是在性能需求方面. 我写这句话 ...

  8. .NET下的加密解密大全（3）：非对称加密

    本博文列出了.NET下常用的非对称加密算法,并将它们制作成小DEMO,希望能对大家有所帮助. RSA[csharp]static string EnRSA(string data,string pub ...

  9. acrobat GetSize 返回 x,y 值单位

    GetSize:LPDISPATCH GetSize();Description:Gets a page’s width and height in points.Parameters:Return ...

  10. c#基础-----数据类型，转义字符，引用类型，类型转换

    数据类型,转义字符,引用类型,类型转换 百度一下