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就是很好地运用 ...
随机推荐
- 201521123060 《Java程序设计》第7周学习总结
1. 本周学习总结 2. 书面作业 1.ArrayList代码分析 1.1 解释ArrayList的contains源代码 答:contains方法调用indexOf方法,遍历遍历内部用于保存数据的e ...
- Java中 == 和 equals()详解
java中的数据类型分为两种: 一 .基本数据类型: byte.short.int.long.float.double.char.boolean 比较它们需要用 == ,比较的是它们的值是否相等 ...
- 201521123034《Java程序设计》第十四周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多数据库相关内容. 2. 书面作业 1. MySQL数据库基本操作 建立数据库,将自己的姓名.学号作为一条记录插入.(截图,需出现自 ...
- 201521123040《Java程序设计》第14周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多数据库相关内容. 2. 书面作业 1. MySQL数据库基本操作 建立数据库,将自己的姓名.学号作为一条记录插入.(截图,需出现自 ...
- .net core 使用Redis的发布订阅
Redis是一个性能非常强劲的内存数据库,它一般是作为缓存来使用,但是他不仅仅可以用来作为缓存,比如著名的分布式框架dubbo就可以用Redis来做服务注册中心.接下来介绍一下.net core 使用 ...
- AJAX二级下拉联动【XML方式】
AJAX二级下拉联动案例 我们在购物的时候,常常需要我们来选择自己的收货地址,先选择省份,再选择城市- 有没有发现:当我们选择完省份的时候,出现的城市全部都是根据省份来给我们选择的.这是怎么做到的呢? ...
- Intellij IDEA WEB结构目录说明【转载】
https://my.oschina.net/lujianing/blog/186737?p=1#OSC_h2_1
- powerdesigner逆向工程 oracle
我们已经有了数据库,希望使用powerdesigner工具生成pdm文件. 本文使用的版本是 15.0 1, File-->Reverse Engineer-->Database... ...
- PHP 动态调整内存限制
最近公司的一个PHP项目在操作大文件的时候总是抛出这个异常 Fixing PHP Fatal Error: Allowed Memory Size Exhausted 经过一番调试后发现是达到了PHP ...
- Tomcat的四种基于HTTP协议的Connector性能比较
Tomcat从5.5版本开始,支持以下四种Connector的配置分别为: <Connector port="8081" protocol="org.apache. ...