JS实现Observable观察者模式
欢迎讨论与交流 : ）
注
代码参考自——汇智网 RxJS教程
前言
Observable观察者模式令小白笔者眼前一亮。数据生产者(observable)负责生产新鲜的数据，同时在生产完毕后'通知“消费者”：“hey！哥们，货已经准备好了，你可以过来拿啦！”
代码
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
</head> <body>
<div class="ez-led" id="clock">00:00:00</div> <script type="text/javascript">
var Observabel = function(generator) {
// 构造函数 generator 1. 定义数据生产的动作 2. generator内必有'通知'消费者的动作(函数)
this._generator = generator;
}
Observabel.prototype.subscribe = function(Observer) {
// 链接生产者与消费者
this._generator.call(this, Observer);
}
var Observer = function(consumer) {
// 数据消费者 定义数据消费的动作
this._consumer = consumer;
}
Observer.prototype.onNotify = function(data) {
// 触发消费者“消费”这一动作
this._consumer.call(this, data)
}
window.onload = function() {
var elClock = document.getElementById('clock');
var getTime = function() {
var _ = ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09'], //补零
d = new Date(),
h = d.getHours(),
m = d.getMinutes(),
s = d.getSeconds();
return [_[h] || h, _[m] || m, _[s] || s].join(":");
}
var uiRefresh = new Observer(function(data) {
elClock.textContent = data
})
var tickStream = new Observabel(function(observer) {
setInterval(function() {
// 生产者内调用消费者的“通知”动作
observer.onNotify(getTime())
}, 1000)
// 链式调用：连接数据生产者与消费者
}).subscribe(uiRefresh);
}
</script>
</body> </html>
JS实现Observable观察者模式的更多相关文章
- JS设计模式之观察者模式
观察者模式,即发布与订阅模式,实现一对多的一种关系模式,当一种对象接受信号时其他所有依赖均有行为.我们在写code的时候总是会去自定义一些事件,这就是观察者常常使用的地方: JS中的观察者模式应用: ...
- Observable观察者模式的使用
今天我们公司封装的类中没有加上Observable观察者模式,但是很多地方需要用到Observable观察者模式 接下来就向大家介绍一下我的使用吧! 在介绍之前我们写了一个方法 public clas ...
- [JS设计模式]：观察者模式(即发布-订阅者模式)（4）
简介 观察者模式又叫发布---订阅模式,它定义了对象间的一种一对多的关系,让多个观察者对象同时监听某一个主题对象,当一个对象发生改变时,所有依赖于它的对象都将得到通知. 举一个现实生活中的例子,例如小 ...
- js设计模式——3.观察者模式
js设计模式——观察者模式 /*js设计模式——.观察者模式*/ // 主题,保存状态,状态变化之后触发所有观察者对象 class Subject { constructor() { this.sta ...
- js中的观察者模式
什么事观察者模式: 这是一种创建松散耦合代码的技术.它定义对象间 一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知.由主体和观察者组成,主体负责发布事件,同时观察者通过 ...
- js 设计模式之观察者模式
观察者模式 又被称为“发布-订阅”模式,目的是解决主题对象和观察者之间功能的耦合性.发布者和订阅者之间是互不干扰的,没有联系的,通过观察者,当做中介,将二者联系起来. 例子:以学生和老师之间的为例 1 ...
- js 自定义事件观察者模式(发布/订阅)
/* * 示例: * Event.create("namespace1").listen('click', function(a){ * console.log(a); * }); ...
- Js面向对象之观察者模式
//模拟一个目标可能拥有的一些列依赖 function ObserverList() { this.observerList = []; }; //添加一个观察者 ObserverList.proto ...
- js中的观察者模式与发布者/订阅者模式的区别？
随机推荐
- ABP 初探 之 AbpSession 扩展
Abp的权限管理是基于 Identity,所有的扩展也是基于 claims .claims 有许多默认属性,具体连接 关于 Identity的详细介绍,可以参考园友博客 继承 Microsoft.As ...
- 如何用ORM支持SQL语句的CASE WHEN？
OQL如何支持CASE WHEN? 今天,一个朋友问我,OQL可否支持CASE WHEN语句?他给的示例SQL如下: then '启用' else '停用' from tb_User OQL是SOD框 ...
- Xdebug文档（七） 远程调试
Xdebug提示调试客户端接口与PHP运行相联系.该章节解释如何设置PHP与xdebug,并推荐一些客户端. 介绍 Xdebug的远程调试器允许你检查数据结构,交互式地穿过和调试你的代码.该协议已经开 ...
- CSS3过渡详解-遁地龙卷风
第二版 0.环境准备 (1)过渡需要浏览器的支持,使用这些属性要加上浏览器厂商的前缀,我用的chrome49已经不需要前缀了, -o- Opera -webkit- Safari.Chrome -mo ...
- Mac 下安装Jenkins
Mac 下安装Jenkins 开始 Jenkins是一个基于Java开发的一种持续集成工具,用于建工持续重复的工作,功能包括: 持续的软件版本发布/测试项目 监控外部调用执行的工作. 近期打算搭建自动 ...
- C++实现Ping
这是一个老话题了,但是我刚学会... 我们的目的是实现这么个东西: 之所以用红框框一下是因为,从baidu.com到123.125.114.144的过程是DNS解析,我们暂时先实现ping的部分. 基 ...
- Android—判断当前时间段
思路:获取当前时间相对于当天的分钟数,然后按照时间顺序依次与时间段后面的时间(转化为分钟数)比较(如8:00-9:00,跟9:00比较). 部分代码: 当前时间 Calendar calendar = ...
- python之局部变量引用赋值前的结果
通过正则表达式,实现加减 昨晚在做计算器的时候,被一个BUG搞懵比了.现在再看看,发现我好小白啊~~ #++- num = input("please input:") sa = ...
- 压缩Sqlite数据文件大小，解决数据删除后占用空间不变的问题
最近有一网站使用Sqlite数据库作为数据临时性的缓存,对多片区进行划分 Sqlite数据库文件,每天大概新增近1万的数据量,起初效率有明显的提高,但历经一个多月后数据库文件从几K也上升到了近160M ...
- SSIS 2010 BUG 一例
Sample data :abc|"edfg|xyz Test 1: Text Qualified is set to nothing. the result is in good for ...