JavaScript观察者模式
观察者模式
观察者模式又叫发布订阅模式（Publish/Subscribe），它定义了一种一对多的关系，让多个观察者对象同时监听某一个主题对象，这个主题对象的状态发生变化时就会通知所有的观察者对象，使得它们能够自动更新自己。
* 它分为2个角色：（1）观察者 （2）被观察者
* 观察者模式的目的：对程序的内在变化进行观察,当其有变化的时候，你可以得知,并且可以做出相应的反应。
现在我们通过一个需求来学习该模式：模拟订阅者和报社之间的关系
在这个过程中：实际的操作分为(推模式,拿模式)
（1）推送-->长连接技术
（2）拿模式-->定时去后台去取得
使用代码实现如下：
（1）发布类
//发布类
function BusinessOne(name){
this.name=name;
//订阅者集合
this.subscribers=new Array();
}
（2）扩展一个发布者的发布消息的方法（推模式）
//发布者的发送消息的方法(推模式)
BusinessOne.prototype.delive=function (news) {
var self=this;
//给每一个订阅者发布消息
this.subscribers.forEach(function (fn) {
//调用接受者处理信息的函数
fn(news,self);
})
}
（3）扩展公共订阅的函数,和取消订阅的函数
订阅的函数：
Function.prototype.subscribe=function (publisher) {
var that=this;
//some 访问数组度i型并且以参数的形式传回回调函数中
//只要至少有一次返回是true那么some就是true
var alreadyExists=publisher.subscribers.some(function (el) {
if(el==that){
//处理不能重复订阅的功能
return ;
}
});
//没用订阅你就可以订阅
if(!alreadyExists){
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;
}
（4）创建发布的实例
//创建发布者的实例
var b1 = new BusinessOne("CCTV");
var b2 = new BusinessOne("中国国防部报社");
（5）发布部分
（5.1）使用门面模式--针对各浏览器的事件绑定兼容问题
function addEventFacade(el,type,fn) {
if(window.addEventListener){
//firefox
el.addEventListener(type,fn);
}else if(window.attachEvent){
//使用是IE
el.attachEvent("on"+type,fn);
}else {
el["on"+type] = fn;
}
}
（5.2）创建主应用函数
var inint=function () {
//创建观察者
var pageOne=function (news) {
document.getElementById("info").value="我发现了： "+"["+arguments[].name+"]发来的信息--->"+news
};
//订阅1
pageOne.subscribe(b1).subscribe(b2);
addEventFacade(document.getElementById("cctv"),"click",function () {
b1.delive(document.getElementById("cctvText").value);
})
//订阅2
addEventFacade(document.getElementById("gfb"),"click",function () {
b2.delive(document.getElementById("gfbText").value);
})
}
最后，订阅者界面
<body onload="inint()">
<div id="div01"></div>
<script type="text/javascript" src="observer.js"></script>
<input type="button" value="CCTV发送" id="cctv">
<input type="text" id="cctvText">
<br><br><br>
<input type="button" value="国防部报社发送" id="gfb">
<input type="text" id="gfbText">
<br><br><br>
<textarea id="info" cols="" rows=""></textarea>
<script src="Js/设计模式第三部分/观察者模式/lib.js"></script>
<script src="Js/设计模式第三部分/观察者模式/观察者模式.js"></script>
</body>
效果为：
（1）cctv模块的
（2）gfb的效果为：
补充：上述用到的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 = ;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 = ;i < this.length; ++i ) {
//看看过滤函数,真留下来,假的删除
if ( !fn.call(scope, this[i], i, this) ) {//过滤的实质是返回除开与当前对象相等的其余所用的对象集合
continue;
}
a.push(this[i]);
}
//返回新的数组
return a;
});
}
总结：
1.支持简单的广播通信，自动通知所有的监听者。
2.当页面载入后，被观察对象很容易与观察者有一种动态关联的关系，来增加灵活性。
3.被观察对象，与观察者之间的抽象耦合关系能够单独的扩展和重用。
JavaScript观察者模式的更多相关文章
- 轻松掌握：JavaScript观察者模式
观察者模式 观察者模式也叫"订阅者/发布者"模式,定义对象间的一种一对多的依赖关系,发布者可以向所有订阅者发布消息. 观察者模式被广泛地应用于JavaScript客户端编程中.所有 ...
- 理解javascript观察者模式(订阅者与发布者)
什么是观察者模式? 观察者模式又叫做发布订阅模式,它定义了一种一对多的关系,让多个观察者对象同时监听某一个主题对象,这个主题对象的状态发生改变时就会通知所有观察着对象.它是由两类对象组成,主题和观察者 ...
- Javascript观察者模式（Object.defineProperty、Reflect和Proxy实现）
什么是观察者模式? 答:在数据发生改变时,对应的处理函数自动执行.函数自动观察数据对象,一旦对象有变化,函数就会自动执行. 参考<原生JavaScript实现观察者模式>(https:// ...
- 《JavaScript 模式》知识点小抄本（下）
介绍 最近开始给自己每周订个学习任务,学习结果反馈为一篇文章的输出,做好学习记录. 这一周(02.25-03.03)我定的目标是<JavaScript 模式>的第七章学习一遍,学习结果的反 ...
- JavaScript实现的发布/订阅(Pub/Sub)模式
JavaScript实现的发布/订阅(Pub/Sub)模式 时间 2016-05-02 18:47:58 GiantMing's blog 原文 http://giantming.net/java ...
- 收藏的js学习小例子
1.js模拟java里的Map function Map(){ var obj = {} ; this.put = function(key , value){ obj[key] = value ; ...
- observeMode
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>& ...
- js设计模式之发布订阅模式
1. 定义 发布-订阅模式其实是一种对象间一对多的依赖关系,当一个对象的状态发送改变时,所有依赖于它的对象都将得到状态改变的通知. 订阅者(Subscriber)把自己想订阅的事件注册(Subscri ...
- javascript 设计模式-----观察者模式
观察者模式在设计模式中被重点提到,因为它应用的场景非常多,而且在模块化设计当中扮演着非常重要的角色.MVC模式中最底层的就是观察者模式,当下流行的javascript框架backbone就是很好地运用 ...
随机推荐
- 201521123061 《Java程序设计》第十三周学习总结
201521123061 <Java程序设计>第十三周学习总结 1. 本周学习总结 2. 书面作业 1. 网络基础 1.1 比较ping www.baidu.com与ping cec.jm ...
- 201521123055《Java程序设计》第1周学习总结
1. 本章学习总结 (1)JAVA环境配置(JDK,JVM) (2)编写简易程序熟练代码结构 2. 书面作业 1.为什么java程序可以跨平台运行?执行java程序的步骤是什么? JAVA程序需要 ...
- oracle客户端plsql设置字符集
感谢一个新朋友的到来,我帮他的过程中有好些东西都不怎么想的起来了,所以从现在起我需要记录下每一点一滴, 因为我觉得写下来的东西才不会丢,而且欢迎以后的朋友到来. 使用plsql查数据的时候有时候中文会 ...
- Linux-exec命令试验驱动(12)
对于做驱动经常会使用exec来试验驱动,通过exec将-sh进程下的描述符指向我们的驱动,来实现调试 -sh进程常用描述符号: 0:标准输入 1:标准输出 2:错误信息 5:中断服务 exec命令使用 ...
- eastcom——eclipse中运行vtmserver项目
1, vtmserver项目必须在tomcat7上运行. 2, 在Eclipse中vtmserver的截图 3, 在eclipse中配置一个tomcat7并将vtmserver加入其中 4, 在ecl ...
- GMF常见问题
1.问题:连接线旁边没有文字标签和箭头 文字标签:在gmfmap里的Connection Mappping下增加Label Mapping元素:箭头:在gmfgraph里为Polyline Conne ...
- 关于MySQL 事务,视图,索引,数据库备份,恢复
/*创建数据库*/ CREATE DATABASE `mybank`;/*创建表*/USE mybank;CREATE TABLE `bank`( `customerName` CHAR(1 ...
- Maven在Windows中的配置以及IDE中的项目创建
Maven在Windows下的配置 1.Maven下载地址:http://maven.apache.org/download.cgi,下载红框里的版本即可. 2.解压到D盘: 3.修改配置文件sett ...
- js中判断对象数据类型的方法
对js中不同数据的布尔值类型总结:false:空字符串:null:undefined:0:NaN.true:除了上面的false的情况其他都为true: 如下: var o = { 'name':'l ...
- [USACO 3.3.1]骑马修栅栏t
[USACO 3.3.1]骑马修栅栏 时间限制: 1 Sec 内存限制: 64 MB提交: 39 解决: 17[提交][状态][讨论版] 题目描述 农民John每年有很多栅栏要修理.他总是骑着马穿 ...