<!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. Oracle 修改SID --不建议修改

    1.登录数据库查看SID select instance_name,status from v$instance; 2.关闭数据库 shutdown immdiate; 3.修改/etc/oratab ...

  2. 三十.数据库服务概述 构建MySQL服务器 、 数据库基本管理 MySQL数据类型

    mysql50:192.168.4.50 1.构建MySQL服务器 安装MySQL-server.MySQl-client软件包 修改数据库用户root的密码 确认MySQL服务程序运行.root可控 ...

  3. tesonflow实现word2Vec

    word2Vec 是实现从原始语料中学习字词空间向量的预测模型 使用word2Vec的skip_Gram模型 import collections import math import os impo ...

  4. 【原创】go语言学习（五）函数详解1

    目录 1.函数介绍 2.多返回值和可变参数 3.defer语句 4.内置函数介绍 1.函数介绍 1.1定义: 有输⼊入.有输出,⽤用来执⾏行行⼀一个指定任务的代码块. func functionnam ...

  5. 在学习ROS过程中碰到的一些问题--1

    好了,这是接触ROS的第三周了,初步了解了一下ROS,很多问题自己还是无法解决,但是想着很久没有在blog上记录自己的学习过程,就先胡乱写一下吧.^-^ 1.关于ROS各种基本概念的理解 这方面知识建 ...

  6. Vuex学习心得

    最近公司项目中使用Vuex做状态管理,就全面温习了一遍文档,然后在项目使用中遇到一些常见问题就一一总结下. 一.由来 我们知道Vue中数据是自顶向下单向流动的,但是以下两种情况单向数据流实现起来十分繁 ...

  7. springboot开启gzip压缩

    springboot 2.x开启gzip压缩 1.application.yml配置 server: compression: enabled: true min-response-size: mim ...

  8. vue组件的原理

    https://www.cnblogs.com/landeanfen/p/6518679.html

  9. NPM私有包部署到私有仓库

    NPM私有包部署到私有仓库1.项目部署到NPM2.私有仓库的搭建1,项目部署到NPM注册NPM账号注册地址:https://www.npmjs.com/ 注册完成后进入邮箱验证 账号登录 npm lo ...

  10. 深入理解JVM虚拟机1：JVM内存的结构与永久代的消失

    所有的Java开发人员可能会遇到这样的困惑?我该为堆内存设置多大空间呢?OutOfMemoryError的异常到底涉及到运行时数据的哪块区域?该怎么解决呢?其实如果你经常解决服务器性能问题,那么这些问 ...