JS实现Observable观察者模式
2016-07-05 00:05
357 查看
欢迎讨论与交流 : )
注
代码参考自——汇智网 RxJS教程
前言
Observable观察者模式令小白笔者眼前一亮。数据生产者(observable)负责生产新鲜的数据,同时在生产完毕后'通知“消费者”:“hey!哥们,货已经准备好了,你可以过来拿啦!”
代码
注
代码参考自——汇智网 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利用正则表达式检验输入内容是否为网址
- JavaScript数组方法大全(推荐)
- 结合代码图文讲解JavaScript中的作用域与作用域链
- JS实现环形进度条(从0到100%)效果
- 纯JSP实现的简单登录示例
- 44 个 JavaScript 变态题解析
- shiro之JSP标签
- FastJson简单使用
- JavaScript语言基础知识总结
- JavaScript的Number()问题
- js中document.write和alert中有一点差别
- js设计模式之单例模式
- KindEditor + Jsp 使用总结
- JavaScript事件机制
- javascript框架设计-种子模块一
- JavaScript学习总结(五)原型和原型链详解
- 千份位Javascript Thousand Separator / string format
- String字符串对象
- 遍历、筛选for in / forEach()
- JavaScript 44 Puzzlers