<!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. 三十七.MySQL视图 MySQL存储过程

    1.视图的基本使用 把/etc/passwd文件的内容存储到db9库下的user表里 添加新字段id 存储记录的行号(在所有字段的前边) 创建视图v1 结构及数据user表的字段.记录一样. 创建视图 ...

  2. Tkinter 之Label标签

    一.参数说明 语法 作用 Label(window,text=‘xxxxx’) 需要在界面显示的Label标签内容 Label(window,text=‘xxxxx’,height=2) 组件的高度( ...

  3. python3编程基础之一：代码封装

    几乎现代的编程语言都支持函数,函数是代码段的封装,并能实现一特定功能,并能重复使用的代码单位.之前的pow()和sqrt()和print()和input()等类似的内置函数,就是python内部已经实 ...

  4. 关于 Win10 下使用 IETester 的问题

    真没想到,现在都用上Win10了,居然还会有使用 IETester 的需求,今天一个客户反应界面出现变形.错位的情况,于是又想到了这个老古董,去它的官网一看,果然N年没更新了! 抱着试试看的心理,下载 ...

  5. 编程微语 2019-Summer

    不支持重新生成不是好的代码生成器.重新生成就会覆盖手工修改,实用性大打折扣.相比工具,更接近玩具.2019-05-04 有很多个标准,各自为政,就相当于没有标准.目前地球的文档(如纯文本/Word/P ...

  6. vim 操作命令大全（转）

    1. 关于Vim vim是我最喜欢的编辑器,也是Linux下第二强大的编辑器. 虽然emacs是公认的世界第一,我认为使用emacs并没有使用vi进行编辑来得高效. 如果是初学vi,运行一下vimtu ...

  7. linux物理内存与虚拟内存

    http://www.360doc.com/content/14/0123/14/14450281_347336709.shtml 1．查看内存占用情况 $ free -m -h total used ...

  8. Hive中导入Oracle数据错误：Listener refused the connection with the following error: ORA-12505

    问题: 今天往Hive中导入Oracle数据的时候碰到了如下错误:Listener refused the connection with the following error: ORA-12505 ...

  9. C++中的函数库

    函数库是由系统建立的具有一定功能的函数的集合. 库中存放函数的名称和对应的目标代码,以及连接过程中所需的重定位信息.用户也可以根据自己的需要建立自己的用户函数库. "cstdlib" ...

  10. 关于tomcat-users.xml添加用户被重复加载的问题mark

    今天用Eclipse启动tomcat带不起来项目,想进tomcat管理页面看我的工程是否已经发布,但是管理页面没有配置tomcat用户,于是进行tomcat-user.xml的用户添加. 本来想当然地 ...