<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>17-观察者模式</title>

</head>

<body>

    <input value="btn" id="ipt" type="button">

    <script type="text/javascript">

        //创建观察者

        var Observer = (function(){

            var __messages = {};

            return {

                //注册信息接口

                regist : function(type, fn){

                    //如果此消息不存在则创建一个该消息类型

                    if(typeof __messages[type] === 'undefined'){

                        //将动作推入到该消息对应的动作执行队列中

                        __messages[type] = [fn];//--> fn转为数组

                        //console.info(__messages);

                    //如果此消息存在

                    }else{

                        //将动作推入到该消息对应的动作执行队列中

                        __messages[type].push(fn);

                        //console.info(__messages);

                    }

                }

                //发布信息接口

                ,fire : function(type, args){

                    //如果该消息没有被注册，则返回

                    if(!__messages[type]){

                        return;

                    }

                    //定义消息信息

                    var events = {

                        type : type,                //消息类型

                        args : args || {}            //消息携带数据

                    },

                    i = 0,                            //消息动作循环变量

                    len = __messages[type].length;  //消息动作长度

                    //遍历消息动作

                    for(; i < len; i++){

                        //依次执行注册的消息对应的动作序列

                        __messages[type][i].call(this, events);

                    }

                }

                //移除信息接口

                ,remove : function(type, fn){

                    //如果消息动作队列存在

                    if(__messages[type] instanceof Array){

                        //从最后一个消息动作遍历

                        var i = __messages[type].length - 1;

                        for(; i >= 0; i--){

                            //如果存在该动作则在消息动作序列中移除相应动作

                            __messages[type][i] === fn && __messages[type].splice(i, 1);

                        }

                    }

                }

            }

        })();

        //console.info(Observer);

        /*Observer.regist('test',function(e1){

            console.info(e1.__proto__);

            console.info(e1.type,e1.args.msg);

        });

        Observer.fire('test',{msg:'传递参数'});*/

        (function(){

            var h  = 555;

            function aa(e){

                console.info(e);

                console.info("a的代码",e.args.text);

                console.info("a的代码",e.args.num);

            }

            Observer.regist('addCM',aa);

        })();

        (function(){

            function bb(e){

                console.info('b的代码',e.args.text);

                console.info('b的代码',e.args.num);

            }

            Observer.regist('addCM',bb);

            //.regist('removeCM',bb);

        })();

        (function(){

            var ipt = document.getElementById('ipt');

            ipt.onclick = function(){

                //Observer.fire('removeCM'{num:-1});

                console.info(123);

                Observer.fire('addCM',{text:"我是text内容",num:3});

            }

            /*function cc(){

                console.info('c的代码');

            }*/

        })();

    </script>

</body>

</html>

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

  1. js - 观察者模式与订阅发布模式

    零.序言 转载&参考: 1.JavaScript 设计模式系列 - 观察者模式 2.JavaScript 设计模式(六):观察者模式与发布订阅模式 一.观察者模式(observer) 概要: ...

  2. JavaScript基础17——js的Date对象

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. js观察者模式

    观察者模式存在观察者和被观察者 被观察者的状态发生改变,通知观察者调用观察者的update方法,观察者的update方法对被观察者的状态进行检测,做出相应的操作 被观察者存在接口attach,deta ...

  4. 浅谈js观察者模式

    观察者模式又叫发布订阅模式,它可以让多个观察者对象同时监听某一个主题对象,即在一个事件发生时,不同的对象迅速对其进行相应.就比如当又人闯红灯,不同的人对这件事迅速发起响应,当然这个比喻不太恰当,不过在 ...

  5. js观察者模式与Model

    目的 观察者模式是常见的设计模式,可以被应用到MV*框架的Model上,来实现对数据变化的监听. 基本概念 观察者模式是一种常见的设计模式.被观察者可以被订阅(subscribe),并在状态发生改变时 ...

  6. js观察者模式学习

    function Events(){ var obj = {}; this.on=function(key,fn){ var stack; stack = obj[key] || (obj[key] ...

  7. 2016.02.17 JS DOM编程艺术 第四五六章

    看完这三章内容,集中精力,加快速度.

  8. JS 观察者模式

    Events = function() { var listen, log, obj, one, remove, trigger, __this; obj = {}; __this = this; l ...

  9. js自己总结的小东西（打印出来方便学习）

    1.你对angular有哪些认识? 属于mvvm框架,现在非常的火,由谷歌开发出来并维护的框架,为了解决负责业务中ajax的开发痛苦,刚开始结果angular的时候,确实让我有一种耳目一些,原来代码还 ...

  10. 100多个基础常用JS函数和语法集合大全

    网站特效离不开脚本,javascript是最常用的脚本语言,我们归纳一下常用的基础函数和语法: 1.输出语句:document.write(""); 2.JS中的注释为//3.传统 ...

随机推荐

  1. MongoDB 系统分析器

    1.1 系统分析器作用 可以利用系统分析器(system profiler)来查找耗时过长的操作. 系统分析器可记录特殊集合system.profile中的操作,并提供大量有关耗时长的操作信息,但相应 ...

  2. learning scala PartialFunction

    Partial函数的定义 scala> val isVeryTasty: PartialFunction[String, String] = { case "Glazed Donut& ...

  3. MySQL 语句整理 2019-5-3

    MySQL 语句整理 在整理完Oracle的一些常见用语句后,由于MySQL的语法跟Oracle略有不同,随跟PN的MySQL视频进行了间接整理. 查询薪水大于1800, 并且部门编号为20或30的员 ...

  4. AtCoder Grand Contest 002题解

    传送门 \(A\) 咕咕 int main(){ cin>>a>>b; if(b<0)puts(((b-a+1)&1)?"Negative": ...

  5. AWS API Gateway Swagger定义

    导出Swagger接口定义文件 在AWS API Gateway界面上,可以导出swagger接口定义文件. 而后利用Node js swagger-ui 依赖,生成swagger接口地址 Cloud ...

  6. php cookie 操作

    创建 cookie <?php setcookie(); ?> 取回 Cookie 的值 <?php // Print a cookie echo $_COOKIE["us ...

  7. 树莓派4硬件---GPIO篇

    树莓派拿到手已经两个多月了,其实从最开始的期待安装好ROS,到前几天完成了ROS的源码编译安装,对linux的调教也时花了些时间的.现在终于想起来,树莓派上还有GPIO,还没有用过了.说干就干,开始. ...

  8. POI2010 Bridges

    好题\(Q\omega Q\) 我们考虑这个东西要求最大值最小,显然一眼二分答案对吧. 问题在于如何\(check\),我们二分答案之后把问题转换成了混合图如何求欧拉回路. 考虑欧拉回路的性质,每一个 ...

  9. SpringCloud学习整理

    参考文档 [1]: Spring Cloud Ribbon负载均衡

  10. 学习笔记：Linux下共享内存的方式实现进程间的相互通信

    一.常用函数 函数系列头文件 #include <sys/types.h> #include <sys/ipc.h> #include <sys/shm.h> ft ...