JavaScript观察者模式
时间:2022-06-19
本文章向大家介绍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[1].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="60" rows="20"></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 = 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;i < this.length; ++i ) {
//看看过滤函数,真留下来,假的删除
if ( !fn.call(scope, this[i], i, this) ) {//过滤的实质是返回除开与当前对象相等的其余所用的对象集合
continue;
}
a.push(this[i]);
}
//返回新的数组
return a;
});
}
总结:
1.支持简单的广播通信,自动通知所有的监听者。 2.当页面载入后,被观察对象很容易与观察者有一种动态关联的关系,来增加灵活性。 3.被观察对象,与观察者之间的抽象耦合关系能够单独的扩展和重用。
- Golang学习-第三篇 认识Web框架
- Golang学习-第二篇 搭建一个简单的Go Web服务器
- 数据说话:Go语言的Switch和Map性能实测
- Dora.Interception, 为.NET Core度身打造的AOP框架[4]:演示几个典型应用
- Dora.Interception, 为.NET Core度身打造的AOP框架[3]:Interceptor的注册
- Dora.Interception, 为.NET Core度身打造的AOP框架:不一样的Interceptor定义方式
- Dora.Interception,为.NET Core度身打造的AOP框架:全新的版本
- ASP.NET Core的路由[4]:来认识一下实现路由的RouterMiddleware中间件
- 浅谈 Java 并发编程中的若干核心技术
- ASP.NET Core的路由[3]:Router的创建者——RouteBuilder
- ASP.NET Core的路由[2]:路由系统的核心对象——Router
- ASP.NET Core的路由[1]:注册URL模式与HttpHandler的映射关系
- 学习ASP.NET Core, 怎能不了解请求处理管道[6]: 管道是如何随着WebHost的开启被构建出来的?
- 学习ASP.NET Core, 怎能不了解请求处理管道[5]: 中间件注册可以除了可以使用Startup之外,还可以选择StartupFilter
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- python第三十四课——1.匿名函数的定义和使用
- python第三十四课——2.匿名函数配合容器函数的使用
- 专家专栏|使用agent2自定义插件采集通过MQTT协议发送的数据
- Linux系统双网卡绑定配置教程
- python第三十五课——生成器
- python第三十六课——1.可迭代对象
- Linux系统Shell编程——脚本编写思路与过程
- python第三十六课——2.迭代器对象
- python第三十七课——模块
- Linux系统MySQL数据库主从同步实战过程
- 最火的java8新特性:Lambda 表达式
- python第三十九课——面向对象(二)之设计类
- python第三十九课——面向对象(二)之初始化属性
- LVS服务DR模式安装布署过程
- python第四十课——构造函数