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就是很好地运用 ...
随机推荐
- 【Alpha】Daily Scrum Meeting——Day4
站立式会议照片 1.本次会议为第四次Meeting会议: 2.本次会议在大课间09:40,在图书馆一楼楼道召开,本次会议为30分钟讨论昨天的任务完成情况以及接下来的任务安排. 燃尽图 每个人的工作分配 ...
- 201521123074 《Java程序设计》第7周学习总结
1. 本周学习总结 以你喜欢的方式(思维导图或其他)归纳总结集合相关内容. (嗯..都画了那么久的导图,还是用导图归纳吧~) 2. 书面作业 ArrayList代码分析 1.1 解释ArrayList ...
- 201521123036 《Java程序设计》第13周学习总结
本周学习总结 以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. 书面作业 网络基础 1.1 比较ping www.baidu.com与ping cec.jmu.edu.cn,分 ...
- JAVA课程设计 猜数游戏 团队
团队名称,成员介绍 名称: 猜数游戏 成员: 网络1514 201521123086 周颖强 网络1514 201521123087蒋勃超 项目git地址 git.oschina.net/jbc113 ...
- 201521123019 《Java程序设计》第10周学习总结
1. 本周学习总结 2. 书面作业 本次PTA作业题集异常.多线程 1.finally 题目4-2 1.1 截图你的提交结果(出现学号) 1.2 4-2中finally中捕获异常需要注意什么? 只有执 ...
- self、parent和$this关键字
self.parent和$this关键字的区别: self关键字用来指定当前的类,而且该关键字通常用来访问类的静态成员.方法和常量.parent关键字用于指向父类,所以使用该关键字调用父类的属性和方法 ...
- sed命令基础2
我在sed命令基础里面说了一下sed的基础用法,sed还有一些高级用法,由于我也是在学习中,写的博客可能会有想不到的地方,有问题希望大家指出. sed的高级用法主要在于两个空间的使用,模式空间和保持空 ...
- python 作用域(LEGB)
def fa(a): b = 200 c = 888 def fb(b): print(b) print(a) print(c) print(sum) return fb c = 2 sum = 10 ...
- JavaScript中的alert、confirm、prompt
alert: var a=alert('Alert');//界面只有一個確定alert(a); //返回值為undefined confirm: var c= confirm('Confirm') ...
- 自学Unity3D 之 贪吃蛇 添加摄像机跟随
在Unity的世界中, 物体的位置都是由向量构成的. 今天所需要做的就是让摄像机保持跟蛇头的相对距离. 首先 设蛇头的位置在A 点 , 摄像机的位置在B 点 则 我们可以知道 他们的offse ...