<!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. Java程序猿学习C++之字符串

    #include <iostream> #include <string.h> using namespace std; int my_len(const char *str) ...

  2. [Node.js] Exporting Modules in Node

    In this lesson, you will learn the difference between the exports statement and module.exports. Two ...

  3. Qt 国际化之二：多国语界面动态切换的实现

    第一步在你的pro里面加入 TRANSLATIONS = myexec_zh.ts (根据对应的ts文件修改)第二步用lupdate 操作pro 将要翻译的提取到ts文件 命令是 lupdate my ...

  4. Java基础知识强化之集合框架笔记61：Map集合之统计字符串中每个字符出现的次数的案例

    1. 首先我们看看统计字符串中每个字符出现的次数的案例图解: 2. 代码实现: (1)需求 :"aababcabcdabcde",获取字符串中每一个字母出现的次数要求结果:a(5) ...

  5. RedHat搭建IPA-Server

    ipa-server是红帽身份验证的一个完整解决方案,上游的开源项目是freeIPA,它本身不提供具体功能,而是整合了389-ds.ipa-server-dns.krb5-server等核心软件包,形 ...

  6. Linux命令后台执行技巧小结

    1.最简单的方法: command & 例如: top & 此时显示job编号和后台进程号 [] 2.正在运行的程序放入后台 Ctrl - Z 3.查看有哪些后台进程及状态 jobs ...

  7. HDU 4336 Card Collector(容斥)

    题意:要收集n种卡片,每种卡片能收集到的概率位pi,求收集完这n种卡片的期望.其中sigma{pi} <=1; 思路:容斥原理.就是一加一减,那么如何算期望呢.如果用二进制表示,0表示未收集到, ...

  8. oracle如何获取上个月的月份

    --转载   这个要用到add_months()函数 参数 负数 代表 往前 正数 代表 往后.select to_char(add_months(trunc(sysdate),-1),'yyyymm ...

  9. mysql连接错误：Cannot get hostname for your address

    问题 环境:win7 + 64Bit + 本地mysql5.6 问题:navicat连接本地mysql数据库,提示“Cannot get hostname for your address”,但是连接 ...

  10. Jquery Datatables(三)

    最近在项目中又使用Datatables的一个有趣功能,官网列子如下图: 点击“+”,展开列表,再次点击收缩. 官网的列子点击展开后的数据也是原来行中的数据,这边有了一个想法是否可以利用Ajax去动态加 ...