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中的观察者模式与发布者/订阅者模式的区别？
随机推荐
- python之网络编程
本地的进程间通信(IPC)有很多种方式,但可以总结为下面4类: 消息传递(管道.FIFO.消息队列) 同步(互斥量.条件变量.读写锁.文件和写记录锁.信号量) 共享内存(匿名的和具名的) 远程过程调用 ...
- php动态更改post_max_size, upload_max_filesize等值
在配置文件里 有些PHP 配置选项可以用int_set() 函数 直接在 项目里修改.但是有些值确不行.例如和上传文件有关的post_max_size和upload_max_filesize int_ ...
- jquery实现表格的搜索功能
版权声明:作者原创,转载请注明出处! HTML代码如下: <input type="text" id="txt" value="" / ...
- Android项目实战（二十五）：Android studio 混淆+打包+验证是否成功
前言: 单挑Android项目,最近即时通讯用到环信,集成sdk的时候 官方有一句 在 ProGuard 文件中加入以下 keep. -keep class com.hyphenate.** {*;} ...
- Android工程师常见面试题集
本文汇总了朋友同事在面试过程中被经常问道的一些问题,讲解不详细,有需要特别了解的可以留言告诉我.持续更新中…… 1.接口回调机制 ①定义一个接口,定义接口中的方法: ②在数据产生的地方持有接口,并提供 ...
- CoreData
之前在学习使用SQLite时, 需要编写大量的sql语句,完成数据的增删改查,但对于不熟悉sql语句的开发人员来说,难度较大,调试程序比较困难. 由此出现CoreData框架,将sql的操作转换成为对 ...
- jdb - The Java Debugger
jdb 是一个简单的命令行调试器,可以调试本地或远程 Java Virtual Machine. jdb [ options ] [ class ] [ arguments ] options 命令行 ...
- sublime text2 bracketHighLighter 配置
一.BracketHighlighter能为ST提供括号,引号这类高亮功能,但安装此插件后,默认没有高亮,只有下划线表示,不是很醒目,需要如下配置1. 在ST中用package control安装Br ...
- Symantec Backup Exec 2012 Agent for Linux 卸载
本文介绍一下如何卸载Symantec Backup Exec 2012 Agent for Linx.首先我们来看看Symantec_Backup_Exec2012管理员手册的文档介绍: 卸载 Age ...
- Ant ：Property
Property Ant 内置的Property 系统属性 Ant附加的属性 自定义Property Ant :Property properties是由key-value组成的集合,就是Java中 ...