<!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. 01 if

    if - else     if语句是一种控制语句,执行一代码块,如果一个表达式计算为true if (expression)     statement1 else   statement2   如 ...

  2. Day02 - Python 基本数据类型

    1 基本数据类型 Python有五个标准的数据类型: Numbers(数字) String(字符串) List(列表) Tuple(元组) Dictionary(字典) 1.1 数字 数字数据类型用于 ...

  3. CentOS 更新yum源

    公司买了一台刀片机服务器,安装的系统版本太低,导致yum源不合适,安装就会报错. 在网上找了好长时间,才发现是yum源的问题.   转载原文: 突然想起试试 Docker,在一台计算机上安装了 Cen ...

  4. JavaScript 应用开发 #2：视图与模板

    在用 Backbone 开发的 JavaScript 应用里面,除了模型与集合以外,另一个重要的部分就是视图,英文是 View .在视图里面,我们可以去监听在页面上发生的事件,还有与视图相关的模型和集 ...

  5. System Operations on AWS - Lab 5W - Managing Resources (Windows)

    登陆到CommandHost实例,通过AWS CLI来管理各个资源 1. 通过Tags来管理资源 1.1 登陆到CommandHost实例 1.2 找出development实例 1.2.1 打开Po ...

  6. 第三天关于网页sip的学习。平台win7 64位 freeSwitch jssip架构web网络电话

    上次我们出现了一种问题就是,当我们采用iis架构出jssipweb端的时候,我们无法注册freeswitch的电话.. 我们用别的客户端已经成功能够互通电话,可以录音,唯独使用jssip架构的web端 ...

  7. DEDE自带的采集功能，标题太短的解决方法

    DEDE自带的采集功能,标题太短获取不全的解决方法搜索了好多之后,终于还是在dede的官方论坛找到了答案.增加采集标题长度:255  目的:原标题长度太小,影响文件采集⑴修改系统参数设置(文档标题最大 ...

  8. jsoup:解析HTML用法小结

    1.解析方式 (1)从字符串解析 ? 1 2 3 String html = "<html><head><title>First parse</ti ...

  9. Java23种设计模式之单例模式

    一.单例模式简介 单例模式是Java设计模式中常见的一种模式.主要分为懒汉式单例.饿汉式单例.登记式单例: 单例模式的特点:  1.单例类只能有一个实例:  2.单例类必须自己创建自己的唯一的实例: ...

  10. C# 控制台程序 托盘图标 事件响应

    static void Main(string[] args) { NotifyIconHelper ni = new NotifyIconHelper(); NotifyIconHelper.Sho ...