<!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. SQL Server连接Oracle详细步骤

    http://blog.csdn.net/weiwenhp/article/details/8093105 我们知道SQL Server和Oracle其实很多原理都类似.特别是一些常用的SQL语句都是 ...

  2. [Javascript] delete keyword

    delete keyword doesn't actually delete the value but just the reference. var me = { name: { first: & ...

  3. [Javascript + rxjs] Using the map method with Observable

    Like an array, Observable has a map method that allows us to transform a sequence into a new Observa ...

  4. 启动MYSQL密码审计插件

    http://www.innomysql.com/article/25717.html [root@server-mysql plugin]# pwd /usr/local/mysql56/lib/p ...

  5. Android开发之UI的编程方式创建

    我们知道,android中一个activity对应一个xml的UI配置文件,除了用xml文件配置的方式创建用户界面外,还可以使用代码编程的方式来创建一个用户界面.如果用户界面需要在运行过程中动态生成的 ...

  6. JSTL时间比较，jstl日期比较，jsp比较时间

    >>>>>>>>>>>>>>>>>>>>>>>>> ...

  7. Nunit概要

    一.NUnit是一个单元测试框架,专门针对于.NET来写的.其实在前面有JUnit(Java),CPPUnit(C++),他们都是xUnit的一员.最初,它是从JUnit而来.现在的版本是2.2.接下 ...

  8. （转）Spring读书笔记-----Spring的Bean之Bean的基本概念

    从前面我们知道Spring其实就是一个大型的工厂,而Spring容器中的Bean就是该工厂的产品.对于Spring容器能够生产那些产品,则取决于配置文件中配置. 对于我们而言,我们使用Spring框架 ...

  9. 微信热修复tinker及tinker server快速接入

    博客: 安卓之家 掘金: jp1017 微博: 追风917 CSDN: 蒋朋的家 简书: 追风917 当前热修复方案很多,今天研究了下微信的tinker,使用效果还是不错的,配合tinker serv ...

  10. TCP服务器端和客服端（一）

    就是一个客服端(Socket)和服务器(ServerSocket)端的链接间.我的理解是一个服务端可以链接多个客服端. 在客服端有输入流outPutStream. 用于发送数据 在服务器端有输出流.i ...