欢迎讨论与交流 : ）

　　注

　　　　代码参考自——汇智网 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观察者模式的更多相关文章

  1. JS设计模式之观察者模式

    观察者模式,即发布与订阅模式,实现一对多的一种关系模式,当一种对象接受信号时其他所有依赖均有行为.我们在写code的时候总是会去自定义一些事件,这就是观察者常常使用的地方: JS中的观察者模式应用: ...

  2. Observable观察者模式的使用

    今天我们公司封装的类中没有加上Observable观察者模式,但是很多地方需要用到Observable观察者模式 接下来就向大家介绍一下我的使用吧! 在介绍之前我们写了一个方法 public clas ...

  3. [JS设计模式]：观察者模式(即发布-订阅者模式)（4）

    简介 观察者模式又叫发布---订阅模式,它定义了对象间的一种一对多的关系,让多个观察者对象同时监听某一个主题对象,当一个对象发生改变时,所有依赖于它的对象都将得到通知. 举一个现实生活中的例子,例如小 ...

  4. js设计模式——3.观察者模式

    js设计模式——观察者模式 /*js设计模式——.观察者模式*/ // 主题,保存状态,状态变化之后触发所有观察者对象 class Subject { constructor() { this.sta ...

  5. js中的观察者模式

    什么事观察者模式: 这是一种创建松散耦合代码的技术.它定义对象间 一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知.由主体和观察者组成,主体负责发布事件,同时观察者通过 ...

  6. js 设计模式之观察者模式

    观察者模式 又被称为“发布-订阅”模式,目的是解决主题对象和观察者之间功能的耦合性.发布者和订阅者之间是互不干扰的,没有联系的,通过观察者,当做中介,将二者联系起来. 例子:以学生和老师之间的为例 1 ...

  7. js 自定义事件观察者模式(发布/订阅)

    /* * 示例: * Event.create("namespace1").listen('click', function(a){ * console.log(a); * }); ...

  8. Js面向对象之观察者模式

    //模拟一个目标可能拥有的一些列依赖 function ObserverList() { this.observerList = []; }; //添加一个观察者 ObserverList.proto ...

  9. js中的观察者模式与发布者/订阅者模式的区别？

随机推荐

  1. Hibernate 小阶段总结

    (一)Hibernate入门 通俗的话来说:Hibernate是用于面向对象操控数据库,对JDBC进行轻量级封装.(在java世界中传统的来说是JDBC访问数据库.) 1)Hibernate定性:对象 ...

  2. 基于WCF MSMQ 的企业应用解决方案

    最近研究了一下基于MSMQ的WCF应用,从书上.网上查了很多资料,但始终没能彻底理解WCF-MSMQ的工作原理,也没能得到一个合理的应用解决方案.索性还是自己做个实验,探索一下吧.经过反复试验,颇有收 ...

  3. C#中==、Equals、ReferenceEquals的区别

    原文链接:http://www.studyofnet.com/news/1188.html 本文导读: C#中Equals , == , ReferenceEquals都可以用于判断两个对象的个体是不 ...

  4. JS图片自动和可控的轮播切换特效

    点击这里查看效果:http://hovertree.com/texiao/js/1.htm HTML文件代码如下: <!DOCTYPE html> <html xmlns=" ...

  5. sharepoint 提升权限报错

    现象: sharepoint中提升权限是为了模拟管理员操作,但是对于普通用户对item的更新和删除照成错误 解决办法: 去掉权限升级 说明: 升级权限能不用尽量不用,同时也不好排查权限问题.

  6. 把Sharepoint Desinger 工作流部署到生产环境

    下面是比较简单的方法,把Designer工作流从开发环境部署到生产环境. 在Sharepoint Desinger 2013 中点击需要部署的工作流. 点击保存,发布. 点Export to Visi ...

  7. Event 8306 5021 5059 5057发布安全令牌时异常

    现象:站点访问一个,应用程序池就自动停掉一个 日志报错       解决: 1.受域策略影响,作为批处理作业登录选项被锁定,需修改域策略: 更新后:     2.确保程序池账户倒在IIS_IUSER组 ...

  8. UTF-8和GBK等中文字符编码格式介绍及相互转换

    我们有很多时候需要使用中文编码格式,比如gbk.gb2312等,但是因为主要针对中文编码设置,因此并不完全通用,这样一来就有了在各编码间相互转换的需求,比如和UTF8的转换.可是在我使用的过程中,却发 ...

  9. iOS 开发中的争议（一）

    序言 打算分享一些有争议的话题,并且表达一下我的看法.这是该系列的第一篇,我想讨论的是:类的成员变量应该如何定义? 在 Objective-C 的语言的早期,类的私有成员变量是只能定义在 .h 的头文 ...

  10. Android 手机卫士--对话初次设置密码验证过程

    本文实现设置密码对话框的逻辑判断 本文地址:http://www.cnblogs.com/wuyudong/p/5940551.html,转载请注明出处. 首先添加上图按钮的监听事件代码 /** * ...