<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>Untitled Document</title>

        <script type=text/javascript charset=utf-8>

        //发布者(被观察者)

        var Publish = function(name){

            this.name = name ;

            this.subscribers = [];//所有的订阅者数组(每一个元素是函数类型fn)

        };

        //发布者发布消息

        Publish.prototype.deliver = function(news){//当成员函数看

            var publish = this ;

            this.subscribers.forEach(function(fn){//fn是遍历过程中每一个元素

                fn(news,publish);    //把新消息发给一个订阅者

            });

            return this ; //return this 可以继续调用本函数或其他函数

        };

        Function.prototype.subscribe = function(publish){//当成员函数看

            var sub = this;

            //some:数组的每一个元素，如果其中有一个返回true,那么整体返回true

            var alreadyExists = publish.subscribers.some(function(item){

                return item === sub ;

            });

            //如果当前出版社里不存在这个人 则将其加入其中

            if(!alreadyExists){

                 publish.subscribers.push(this);

            }

            return this; //return this 可以继续调用本函数或其他函数

        };

        Function.prototype.unsubscribe = function(publish){//当成员函数看

            var sub = this ;

            // filter (过滤函数:循环便利数组的每一个元素，执行一个函数如果不匹配，则删除该元素)

            publish.subscribers = publish.subscribers.filter(function(item){

                return item !== sub ;

            });

            return this; //链式编程

        };

        //发布者对象

        var pub1 = new Publish('第一报社');

        //观察者(订阅者)

        var sub1 = function(news){ //sub1当成函数地址，当成普通变量看，也就是sub1类型是函数类型而已。

            alert(arguments[1].name + ':' + news + "sub1");

        };

        var sub2 = function(news){

            alert(arguments[1].name + ':' + news + "sub2");

        };

        sub1.subscribe(pub1);//订阅就是加入到发布者的数组中

        sub2.subscribe(pub1);

        pub1.deliver('text1');

        sub1.unsubscribe(pub1); //取消订阅

        </script>

    </head>

    <body>

    </body>

</html>

Function.prototype：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>Untitled Document</title>

        <script type=text/javascript charset=utf-8>

        var Publish = function(name){

            this.name = name ;

        };

        Function.prototype.subscribe = function(){  //加载函数类型的变量上

            alert(123);

        };

        var g = function(){}

        g.subscribe();//123

        var f = new Publish("sss");

        f.subscribe();//f.subscribe is not a function

        function h(){}

        h.subscribe();//123

        </script>

    </head>

    <body>

    </body>

</html>

js31---观察者模式的更多相关文章

  1. 23种设计模式--观察者模式-Observer Pattern

    一.观察者模式的介绍      观察者模式从字面的意思上理解,肯定有两个对象一个是观察者,另外一个是被观察者,观察者模式就是当被观察者发生改变得时候发送通知给观察者,当然这个观察者可以是多个对象,在项 ...

  2. 谈谈JS的观察者模式（自定义事件）

    呼呼...前不久参加了一个笔试,里面有一到JS编程题,当时看着题目就蒙圈...后来研究了一下,原来就是所谓的观察者模式.就记下来...^_^ 题目 [附加题] 请实现下面的自定义事件 Event 对象 ...

  3. ObserverPattern(观察者模式)

    import java.util.ArrayList; import java.util.List; /** * 观察者模式 * @author TMAC-J * 牵一发而动全身来形容观察者模式在合适 ...

  4. java观察者模式

      像activeMQ等消息队列中,我们经常会使用发布订阅模式,但是你有没有想过,客户端时如何及时得到订阅的主题的信息?其实就里就用到了观察者模式.在软件系统中,当一个对象的行为依赖于另一个对象的状态 ...

  5. Backbone源码解析（六）：观察者模式应用

    卤煮在大概一年前写过backbone的源码分析,里面讲的是对一些backbone框架的方法的讲解.这几天重新看了几遍backbone的源码,才发现之前对于它的理解不够深入,只关注了它的一些部分的细节和 ...

  6. PHP 高级编程(3/5) - 使用SPL(标准PHP库)实现观察者模式

    SPL(标准PHP库 - Standard PHP Library)是PHP5面向对象功能中重要的部分.原文解释是这样的“The Standard PHP Library (SPL) is a col ...

  7. 设计模式--观察者模式初探和java Observable模式

    初步认识观察者模式 观察者模式又称为发布/订阅(Publish/Subscribe)模式,因此我们可以用报纸期刊的订阅来形象的说明: 报社方负责出版报纸. 你订阅了该报社的报纸,那么只要报社发布了新报 ...

  8. 学C#之设计模式系列笔记（2）观察者模式

    一.借鉴说明 1.<Head First Design Patterns>(中文名<深入浅出设计模式>) 2.维基百科,观察者模式,https://zh.wikipedia.o ...

  9. PHP 观察者模式

    观察者模式:定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都得到通知并被自动更新. [观察者模式中主要角色] 1.抽象主题(Subject)角色: 抽象主题提供了增加 ...

  10. GJM: 设计模式 - 观察者模式

    GJM : 观察者模式 视频地址: http://www.imooc.com/learn/415 本课程通过一个天气预报的发布和订阅案例,来讲解观察者模式在Java项目中的应用.主要包括观察者模式的结 ...

随机推荐

  1. P3649 [APIO2014]回文串（回文树）

    题目描述 给你一个由小写拉丁字母组成的字符串 ss .我们定义 ss 的一个子串的存在值为这个子串在 ss 中出现的次数乘以这个子串的长度. 对于给你的这个字符串 ss ,求所有回文子串中的最大存在值 ...

  2. hiho 1068 重新整理的 Sparse-Table(RMQ)模板

    http://hihocoder.com/problemset/problem/1067代码: #include <iostream> #include <cstdio> #i ...

  3. Unity Shader （二）Cg语言

    一.Cg基本数据类型 float 32位浮点数 half 16位浮点数 int 32位整型 fixed 12位定点数 bool 布尔数据 simpler* 纹理对象的句柄( the handle to ...

  4. 洛谷 P1604 B进制星球

    P1604 B进制星球 题目背景 进制题目,而且还是个计算器~~ 题目描述 话说有一天,小Z乘坐宇宙飞船,飞到一个美丽的星球.因为历史的原因,科技在这个美丽的星球上并不很发达,星球上人们普遍采用B(2 ...

  5. 一个美丽的java烟花程序

    <img src="http://img.blog.csdn.net/20150625104525974?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi ...

  6. wcf rest系列文章

    http://www.cnblogs.com/artech/archive/2012/02/15/wcf-rest.html 需要注意的是,发布的服务,可以在web behavior中指定显示help ...

  7. 大吉大利，晚饭吃鸡！——accept关闭问题

    假期收尾了,学芽子们都军训了.一群张一山和周冬雨在校内晃晃悠悠,说起来春风十里也就军训比较有意思.对于我这种一年追一部剧的人,显然是有点对不住.在我假期任务即将圆满之际,我开始放慢脚步寻找生活的美妙时 ...

  8. Centos7.6下安装Python3.7

    前言 话说不会开发的运维不是一个好的DBA,所以我要开始学习python了,写博客记录一下我的学习过程,另外别欺负我新来的,那个每天更博的技术流ken是我哥. 不说了,时间宝贵,开整. 1.首先来看一 ...

  9. 小米开源便签Notes-源码研究(1)-导出功能整体思路

    NotesListActivity是入口Activity. 响应菜单事件,我的手机是"左键菜单".如果菜单项的ID是"R.id.menu_export_text" ...

  10. 免费css布局和模板集合

    Internet 上有很多基于 (X)HTML/CSS 标记的模板.如果你是一个 Web 开发人员,你不希望把时间一次又一次地浪费在重复代码设计上面,这里提供了一个列表,提供了基于 CSS 的免费模板 ...