JavaScript设计模式-22.观察者模式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>javascript高级语法22-观察者模式</title>
</head>
<body onload="init()">
<div id="box"></div>
<script>
//扩展函数 forEach和filter Function.prototype.method = function(name, fn) {
this.prototype[name] = fn;
return this;
};
if (!Array.prototype.forEach) {
Array.method('forEach', function(fn, thisObj) {
var scope = thisObj || window;
for ( var i = 0;len < this.length; ++i ) {
//这样写不是简单的函数调用,是在函数调用的同事把this重新定位
fn.call(scope, this[i], i, this);
}
});
}
//Array过滤器
if (!Array.prototype.filter ) {
Array.method('filter', function(fn, thisObj) {
var scope = thisObj || window;
var a = [];
for ( var i = 0;len < this.length; ++i ) {
//看看过滤函数,真留下来,假的删除
if ( !fn.call(scope, this[i], i, this) ) {
continue;
}
a.push(this[i]);
}
//返回新的数组
return a;
});
} /*观察者模式：
* 分为两个角色:观察者和被观察者
* 观察者模式的目的在于对程序的内在变化进行观察，当其有变化的时候可以得知，并作出相应反应
*/ /*模拟订阅者和报社之间的关系
*实际操作分为（推模式，拿模式）
* 推送->长链接技术
* 拿模式->定时去后台取得
*/ function BusinessOne(name){
this.name = name;
//订阅者集合
this.subscribers = new Array();
}
//订阅者的发送消息的方法（推模式）
BusinessOne.prototype.delive = function(news){
var self = this;
//给每一个订阅者发送消息
this.subscribers.forEach(function(fn){
//调用接收者处理信息的函数
fn(news,self);
})
}
//扩展公共订阅的函数和取消订阅的函数
Function.prototype.subscribe = function(publisher){
var that = this;
//some访问数组对象，并且以参数的形式传回回调函数
//至少有一次返回是true的 那么some就是真
var alreadyExist = publisher.subscribers.some(
function(el){
//处理不能重复订阅的功能
if(el == that){
return;
}
}
);
//没有订阅就可以订阅
if(!alreadyExist){
publisher.subscribers.push(that);
}
return this;
}
//取消
Function.prototype.unsubscribe = function(publisher){
var that = this;
publisher.subscribers = publisher.subscribers.filter(
function(el){
if(el !== that){
return el;
}
}
);
return this;
} //创建发布者的实例
var b1 = new BusinessOne("CCTV");
var b2 = new BusinessOne("中国国防部"); //发布（门面模式）
function addEventFacada(el,type,fn){
if(window.addEventListener){
//firefox
el.addEventListener(type,fn,false);
}else if(window.attachEvent){
//IE
el.attachEvent("on"+type,fn);
}else{
el["on"+type] = fn;
}
}
//主应用函数
var init = function(){
//创建观察者
var pageOne = function(news){
document.getElementById("info").value =
"我发现了： "+"["+arguments[1].name +"] 发来的信息 --->"+news;
}
//订阅
pageOne.subscribe(b1).subscribe(b2);
//增加绑定事件
addEventFacada(document.getElementById("cctv"),"click",function(){
b1.delive(document.getElementById("cctvText").value);
});
addEventFacada(document.getElementById("gfb"),"click",function(){
b2.delive(document.getElementById("gfbText").value);
});
}
</script> <input type="text" id="cctvText"/>
<input type="button" value='cctv发送' id="cctv"/>
<br />
<input type="text" id="gfbText"/>
<input type="button" value='国防部发送' id="gfb"/>
<br />
<textarea id="info" cols="60" rows="20"></textarea> </body>
</html>
JavaScript设计模式-22.观察者模式的更多相关文章
- JavaScript设计模式之观察者模式（学习笔记）
设计模式(Design Pattern)对于软件开发来说其重要性不言而喻,代码可复用.可维护.可扩展一直都是软件工程中的追求!对于我一个学javascript的人来说,理解设计模式似乎有些困难,对仅切 ...
- 再起航，我的学习笔记之JavaScript设计模式18(观察者模式)
观察者模式 观察者模式(Observer): 又被称为发布-订阅者模式或消息机制,定义了一种依赖关系,解决了主体对象与观察者之间功能的耦合. 创建一个观察者对象 首先我们创建一个闭包对象,让其在页面加 ...
- 再起航，我的学习笔记之JavaScript设计模式22(访问者模式)
访问者模式 概念介绍 访问者模式(Visitor): 针对于对象结构中的元素,定义在不改变该对象的前提下访问结构中元素的新方法 解决低版本IE兼容性 我们来看下面这段代码,这段代码,我们封装了一个绑定 ...
- javascript设计模式之观察者模式
观察者模式又称发布/订阅模式 publish/subscribe 它是一种一对多的关系,让多个观察者对象同时监听某一主题对象,这个主题对象的状态发生变化时就会通知所有的观察者对象,使得他们能够自动 ...
- javascript 设计模式之观察者模式
观察者模式又叫发布——订阅模式,顾名思义pub——sub就是被动触发的,:不要给我......,我会给你.......就是一个发布订阅的解释,实质就是对程序中的某个对象状态进行监听观察,并且在该对象发 ...
- JavaScript设计模式(10)-观察者模式
观察者模式 1. 介绍 发布者与订阅者是多对多的方式 通过推与拉获取数据:发布者推送到订阅者或订阅者到发布者那边拉 使并行开发的多个实现能彼此独立地进行修改 其实我们在前端开发中使用到的时间监听就是浏 ...
- JavaScript设计模式与开发实践 - 观察者模式
概述 观察者模式又叫发布 - 订阅模式(Publish/Subscribe),它定义了一种一对多的关系,让多个观察者对象同时监听某一个目标对象(为了方便理解,以下将观察者对象叫做订阅者,将目标对象叫做 ...
- javaScript 设计模式系列之一：观察者模式
介绍 观察者模式又叫发布订阅模式(Publish/Subscribe),一个目标对象管理所有相依于它的观察者对象.该模式中存在两个角色:观察者和被观察者.目标对象与观察者之间的抽象耦合关系能够单独扩展 ...
- Javascript设计模式之我见：观察者模式
大家好!本文介绍观察者模式及其在Javascript中的应用. 模式介绍 定义 定义对象间一种一对多的依赖关系,使得每当一个对象改变状态,则所有依赖于它的对象都会得到通知并被自动更新. 类图及说明 S ...
随机推荐
- （4）-optXXX方法的使用
在JSONObject获取value有多种方法,如果key不存在的话,这些方法无一例外的都会抛出异常.如果在线环境抛出异常,就会使出现error页面,影响用户体验,针对这种情况最好是使用optXXX方 ...
- Windows服务器管理与优化
一.服务器自动重启windows服务器运行时间长了,内存会爆满,比如数据库会缓存大量的数量,IIS进程也会缓存数据而没有及时释放.这样需要定时重启服务器来释放内存. 创建任务计划,如在 每周一/周三/ ...
- Visifire图表
引用DLL: WPFToolkit WPFVisifire.Charts.dll WPFVisifire.Gauges.dll 1.柱状图 代码: public void BindChart1() { ...
- C#基础笔记(第十八天)
1.HTMLHyper Text Markup Language 超文本标记语言在HTML当中存在着大量的标签,我们用HTML提供的标签,将要显示在网页中的内容包含起来.就构成了我们的网页. CSS: ...
- Java : java.util.ConcurrentModificationException
在删除 List 元素的时候,要用 Iterator,不要直接遍历 List,否则会出现 Fatal Exception: java.util.ConcurrentModificationExcept ...
- kali linux之取证
取证简介: CSI:物理取证 指纹.DNA.弹道.血迹 无力取证的理论基础是物质交换原则 数字取证/计算机取证 智能设备.计算机.手机平板.loT.有线及无线信道.数据存储 事件响应调查------黑 ...
- Django 项目拆分配置文件settings.py
使用Django命令生成一个项目的基本结构时, 配置信息默认保存在和项目目录同名的目录下的settings.py文件里, 对于一个项目而言, 这样往往是不合适的, 在实际的开发中,需要将配置文件拆分为 ...
- 64位虚拟机中安装CentOS_6.7
虚拟机VirtualBox-4.3.24-98716-Win.1425444683.exe,操作系统选用CentOS-6.7-x86_64-LiveDVD .iso. 1) 启动VirtualBox, ...
- USB-Redirector-Technician 永久破解版（USB设备映射软件）
USB-Redirector-Technician 这个软件对于搞安卓刷机的人想必非常熟悉,淘宝破解版售价:38 一个的东西 除了远程刷机,用于映射一些小型设备是没问题的,只要网跟得上~ USB-Re ...
- Python内置函数查询表——总结篇
Python3.5版本中的68个内置函数,按顺序逐个进行了自认为详细的解析,现在是时候进行个总结了.为了方便记忆,将这些内置函数进行了如下分类: 数学运算(7个) 类型转换(24个) ...