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就是很好地运用 ...
随机推荐
- 团队作业4——第一次项目冲刺（Alpha版本）2017.4.26
2017.04.26 天气热. 时间:上午 9:35 ---10:10分 地点:陆大304实验室 会议内容:今天将昨天的的一些问题进行了讨论,以及针对助教提出的问题进行了分析,是因为我们昨天经过讨论后 ...
- 201521123069 《Java程序设计》 第6周学习总结
1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 注1:关键词与内容不求多,但概念之间的联系要清晰,内容覆盖 ...
- 201521123055 《Java程序设计》第3周学习总结
1. 本章学习总结 2. 书面作业 Q1.代码阅读 public class Test1 { private int i = 1;//这行不能修改 private static int j = 2; ...
- Java第十四周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多数据库相关内容. 2. 书面作业 1. MySQL数据库基本操作 建立数据库,将自己的姓名.学号作为一条记录插入.(截图,需出现自 ...
- SVN不出现绿色对勾的情况
就目前而言,我出现了两种情况. Num1:电脑云盘可能不兼容,导致无法出现svn提示小icon:----->删除云盘重新启动. Num2:被设置覆盖.----->鼠标右键-->Tor ...
- 你必知必会的SQL面试题
写在前面的话 本文参考原博<走向面试之数据库基础:一.你必知必会的SQL语句练习-Part 1>和<走向面试之数据库基础:一.你必知必会的SQL语句练习-Part 2>进行练习 ...
- Python学习笔记011_模块_标准库_第三方库的安装
容器 -> 数据的封装 函数 -> 语句的封装 类 -> 方法和属性的封装 模块 -> 模块就是程序 , 保存每个.py文件 # 创建了一个hello.py的文件,它的内容如下 ...
- Coder的好伙伴Github
网络越来越发达,各式各样的网盘.云存储也走进日常生活, 在老师的指导下,我第一次接触了GitHub. 什么是Github? Github是一个基于git的代码托管平台,付费用户可以建私人仓库,我们一 ...
- [转载]iOS开发之手势识别
感觉有必要把iOS开发中的手势识别做一个小小的总结.在上一篇iOS开发之自定义表情键盘(组件封装与自动布局)博客中用到了一个轻击手势,就是在轻击TextView时从表情键盘回到系统键盘,在TextVi ...
- Codeforces Round #436 (Div. 2) E. Fire
http://codeforces.com/contest/864/problem/E 题意: 有一堆物品,每个物品有3个属性,需要的时间,失效的时间(一开始)和价值.只能一件一件的选择物品(即在选择 ...