<!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. MVC-@html.ActionLink的几种参数格式

    一 Html.ActionLink("linkText","actionName") 该重载的第一个参数是该链接要显示的文字,第二个参数是对应的控制器的方法, ...

  2. 无法定位序数XX于动态链接库XX.dll的解决的方法

    问题阐述: 开发环境:VS2008 使用RELEASE生成了可执行文件,发如今某些电脑上能够正常执行,但在部分电脑中执行失败提示:无法定位序数8523于动态链接库mfc90.dll 在网上查找了一些资 ...

  3. PHP中输出缓冲

    在PHP中,当运行echo,print的时候,输出并没有马上通过tcp传给client浏览器显示, 而是将数据写入php buffer.php output_buffering机制,意味在tcp bu ...

  4. [D3] 5 .rangeBands

    # d3.max ```js var xScale = d3.scale.ordinal() .domain(dataset) .rangeBands([0,w],0.3, 0.1);``` ### ...

  5. Hrbust1328 相等的最小公倍数 (筛素数,素因子分解)

    本文出自:http://blog.csdn.net/svitter/ 题意: 求解An 与 An-1是否相等. n分为两个情况-- 1.n为素数, 2.n为合数. =  =好像说了个废话..素数的时候 ...

  6. Android(java)学习笔记168:Java异常分类

    Java异常可分为3种: (1)编译时异常:Java.lang.Exception (2)运行期异常:Java.lang.RuntimeException (3)错误:Java.lang.Error

  7. Google C++ Style Guide在C++11普及后的变化

    转 http://www.cnblogs.com/chen3feng/p/5972967.html?from=timeline&isappinstalled=0&lwfrom=user ...

  8. (转) linux虚拟机中和主机三种网络连接方式的区别

    在介绍网络模式之前,关于网络的几个简单命令的使用 ifup eth0   //启动网卡eth0 ifdown eth0 //关闭网卡eth0 /etc/network/interfaces  //网络 ...

  9. 将应用程序中的一些参数写到xml配置文件中

    最近碰到一个问题,需要将程序中的一些基本参数写到xml文件中,虽然网上有好多现成的代码,但是觉得对xml不熟悉,果断就研究了一下.先说一下大体思路吧,我设计了一个用来读取和回填的类,然后定义了一个接口 ...

  10. enableEventValidation

    回发或回调参数无效.在配置中使用 <pages enableEventValidation="true"/> 或在页面中使用 <%@ Page EnableEve ...