<!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. Devtool-Console

    1. console面板展示 1.全屏展示 打开开发者工具(option+cmd+i),点击console的tab 2. 在其他面板展示的同时展示console面板 1)esc快捷命令 2)或者选择打 ...

  2. 【.Net设计模式系列】工作单元(Unit Of Work)模式 ( 二 )

    回顾 在上一篇博客[.Net设计模式系列]仓储(Repository)模式 ( 一 ) 中,通过各位兄台的评论中,可以看出在设计上还有很多的问题,在这里特别感谢 @横竖都溢 @ 浮云飞梦 2位兄台对博 ...

  3. 携程移动端案列（flex布局、背景图缩放，文字阴影）

    效果图如下: <body> <div class="nav"> <div class="row"> <div clas ...

  4. ROS常用工具

    先将这个package放到工作空间的 src 目录中, 链接:点击打开链接 密码:u98p 然后在工作空间中加入依赖, rosdep install --from-paths src --ignore ...

  5. linux 编写定时任务，查询服务是否挂掉

    shell 脚本 #!/bin/bash a=`netstat -unltp|grep fdfs|wc -l` echo "$a" if [ "$a" -ne ...

  6. ZR#998

    ZR#998 解法: 先把所有物品按照拿走的时间从小到大排序,拿走的时间相同就按照放上去的时间从大到小.那么一件物品上方的物品就一定会在它的前面. 考虑 $ dp $ ,设 $ f[i][j] $ 表 ...

  7. [CSP-S模拟测试]:跳房子（模拟）

    题目描述 跳房子,是一种世界性的儿童游戏,也是中国民间传统的体育游戏之一.跳房子是在$N$个格子上进行的,$CYJ$对游戏进行了改进,该成了跳棋盘,改进后的游戏是在一个$N$行$M$列的棋盘上进行,并 ...

  8. git 和conding.net 超详细超简单安装

    在做一下操作前,希望你能知道 1.什么是git? 可以参考https://blog.csdn.net/a909301740/article/details/81636662 如果还想多了解一下还可以参 ...

  9. 关于Flutter启动项目白屏，报错[ERROR:flutter/shell/gpu/gpu_surface_gl.cc(58)] Failed to setup Skia Gr context.问题的解决方案

    首先,环境如下: 1.系统:windows10 64位   Android SDK version: 28.0.3   Flutter SDK: v1.5.4-hotfix.2   模拟器: 网易Mu ...

  10. openstack 基镜像展开过程