<!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. sql sever 触发器的概念和使用

    触发器简介: 触发器是一种特殊的存储过程,它的执行不是由程序调用,也不是手动执行,而是由事件来触发.触发器是当对某一个表进行操作.例如:update.insert.delete这些操作的时候,系统会自 ...

  2. jq 字符串转数组

    一般我们在添加关键词时  会添加几组关键词     上传时怎么取值呢 取值时用以下格式 就能取到值 var FTag = "" //AAA,BBB if (FTag1 != &qu ...

  3. 十三.基础邮件服务、parted分区工具、交换分区、链路聚合

    1.基础邮件服务 DNS服务器:虚拟机classroom   以server0.example.com 为例  yg@server0.example.com    xln@server0.exampl ...

  4. Chrome安装.crx文件

    解决"只能通过Chrome网上应用商店安装该程序"的方法 http://chromecj.com/utilities/2015-04/423.html 1.更多工具->扩展程 ...

  5. RabbitMQ消息队列+安装+工具介绍

    1.MQ为Message Queue,消息队列是应用程序和应用程序之间的通信方法 2. 多种开发语言支持,其实就是一个驱动,如连接数据库的mysql驱动,oracle驱动等. 3. 4.采用以下语言开 ...

  6. learning scala view collection

    The view method will create a non-strict version of the collection which means that the elements of ...

  7. C++类中静态数据成员MAP如何初始化

    conv_xxx.hpp class convolution { ... ... typedef std::map<int, std::string> ConvDtMap; static ...

  8. 点云赋值 PointCloudT::Ptr 运行时崩溃

    PointCloudT::Ptr cloud; cloud.reset(new PointCloudT); cloud->points.resize(500);for(int index =0; ...

  9. Codeforces 1182D Complete Mirror [树哈希]

    Codeforces 中考考完之后第一个AC,纪念一下qwq 思路 简单理解一下题之后就可以发现其实就是要求一个点,使得把它提为根之后整棵树显得非常对称. 很容易想到树哈希来判结构是否相同,而且由于只 ...

  10. 用Java实现自动打开浏览器在搜索框中进行搜索

    主要使用了Java的剪切板操作和Robot类 上代码: package pers.jeaven.AutoRobot.main; import java.awt.Desktop; import java ...