观察者模式又叫发布订阅模式,它可以让多个观察者对象同时监听某一个主题对象,即在一个事件发生时,不同的对象迅速对其进行相应。就比如当又人闯红灯,不同的人对这件事迅速发起响应,当然这个比喻不太恰当,不过在团队开发中,每个人做自己不同的模块,那你在通过不去动其它人的代码或者说在不去看其他人的代码时怎么去将它们所要的事情做出来呢,这个时候就可以用da到观察者模式了。前面我们说过了单例对象,这里的观察者其实我们也可以只用一个对象,并且这个对象的功能不需要更改。

首先我们定义一个对象,这个对象包括3个方法,注册,发布,还有解除,注册就是把触发我事件的信号加载到数据对象中去,发布就是去触发这个信号,解除就是把某个事件从我的事件库中删除。

var mapleTao={
  message:{},
  //注册
  register:function(type,fn){
  if(this.message[type]){
    this.message[type].push(fn);
  }else{
    this.message[type]=[fn];
  }
  },
//发布
  fire:function(type,opt){
    if(!this.message[type]) return false;
    this.message[type].forEach(function(item){
      item(opt);
    });
  },
  //取消
  remove:function(type,fn){
    var i=this.message[type].indexOf(fn);
    if(!this.message[type]||i==-1) return false;
    this.message[type].splice(i,1);
  }
};

上述就是创建了一个观察者对象,接下来就是对其简单调用了。

(function(){
  var maple=function(){
    console.log("i am maple");
  }
  //注册事件introduce
  mapleTao.register("introduce",maple);
})();
(function(){
  var tao=function(){
    console.log("i am tao");
  }
  //注册事件introduce
  mapleTao.register("introduce",tao);
    setTimeout(function(){
  mapleTao.remove("introduce",tao); //introduce在事件库中去除tao
    mapleTao.fire("introduce");      //触发introduce信号 结果为i am maple
  },0)
})();

mapleTao.fire("introduce"); //触发introduce信号 结果为i am maple,i am tao

(function(){
  var maple=function(obj){ //对参数处理
    console.log("i am maple,i am "+obj.status);
  }
//注册事件status
  mapleTao.register("status",maple);
})();
(function(){
  var tao=function(obj){
    console.log("i am tao,i am "+obj.name);
}
//注册事件status
  mapleTao.register("status",tao);
})();

mapleTao.fire("status",{status:"working",name:"studying"}); //结果 i am maple,i am working   i am tao,i am studying

总的来说,观察者模式可以在一个对象发生变化时,其它对象自动更新。

浅谈js观察者模式的更多相关文章

  1. 浅谈JS之AJAX

    0x00:什么是Ajax? Ajax是Asynchronous Javascript And Xml 的缩写(异步javascript及xml),Ajax是使用javascript在浏览器后台操作HT ...

  2. 浅谈JS中的闭包

    浅谈JS中的闭包 在介绍闭包之前,我先介绍点JS的基础知识,下面的基础知识会充分的帮助你理解闭包.那么接下来先看下变量的作用域. 变量的作用域 变量共有两种,一种为全局变量,一种为局部变量.那么全局变 ...

  3. 浅谈 js 正则字面量 与 new RegExp 执行效率

    原文:浅谈 js 正则字面量 与 new RegExp 执行效率 前几天谈了正则匹配 js 字符串的问题:<js 正则学习小记之匹配字符串> 和 <js 正则学习小记之匹配字符串优化 ...

  4. 浅谈 js 字符串之神奇的转义

    原文:浅谈 js 字符串之神奇的转义 字符串在js里是非常常用的,但是你真的了解它么?翻阅<MDN String>就可以了解它的常见用法了,开门见山的就让你了解了字符串是怎么回事. 'st ...

  5. 浅谈 js 正则之 test 方法

    原文:浅谈 js 正则之 test 方法 其实我很少用这个,所以之前一直没注意这个问题,自从落叶那厮写了个变态的测试我才去看了下这东西.先来看个东西吧. var re = /\d/; console. ...

  6. 浅谈 js 数字格式类型

    原文:浅谈 js 数字格式类型 很多人也许只知道 ,123.456,0xff 之类的数字格式.其实 js 格式还有很多数字格式类型,比如 1., .1 这样的,也有 .1e2 这样的. 可能有人说这是 ...

  7. 浅谈 js 语句块与标签

    原文:浅谈 js 语句块与标签 语句块是什么?其实就是用 {} 包裹的一些js代码而已,当然语句块不能独立作用域.可以详细参见这里<MDN block> 也许很多人第一印象 {} 不是对象 ...

  8. 浅谈 js 字符串 trim 方法之正则篇

    原文:浅谈 js 字符串 trim 方法之正则篇 关于 trim 其实没啥好说的,无非就是去除首位空格,对于现代浏览器来说只是简单的正则 /^\s+|\s+$/ 就可以搞定了.而且支持中文空格   等 ...

  9. 浅谈 js 字符串 search 方法

    原文:浅谈 js 字符串 search 方法 这是一个很久以前的事情了,好像是安心兄弟在学习js的时候做的练习.具体记不清了,今天就来简单分析下 search 究竟是什么用的. 从字面意思理解,一个是 ...

随机推荐

  1. <三> SQL 基础

    SQL查询的一般形式,以及被逻辑处理的顺序 (8) select (9) distinct (11) <TOP_specification> <select_list> (1) ...

  2. Grails连接外部数据库注意事项Could not determine Hibernate dialect for database name [Oracle]!

    初次使用Grails时,使用其内置数据库,一直不会出错,但迁移到外部数据库时会出错Could not determine Hibernate dialect for database name [Or ...

  3. 使用Yeoman搭建 AngularJS 应用 (2) —— 让我们搭建一个网页应用

    原文地址:http://yeoman.io/codelab/index.html 使用Yeoman搭建简单的应用 今天将会搭建一个简单的网页程序.你将可以添加,删除,拖拽和保存. 浏览Yeoman Y ...

  4. nutch 采集效率--设置采集间隔

    fetcher.max.crawl.delay 默认是30秒,这里改为 5秒修改nutch-default.xml<property> <name>fetcher.max.cr ...

  5. location.hash 详解

    前年9月twitter改版. 一个显著变化,就是URL加入了"#!"符号.比如,改版前的用户主页网址为 http://twitter.com/username 改版后,就变成了 h ...

  6. 数据库里面DataTime时间类型字段,如果为null时

    tran.TransactionTime = bet.CreationDate.ToString() == "0001/1/1 0:00:00" ? DateTime.Now : ...

  7. JDBC MySQL字段类型为datetime的数据取出(util.Date)

    使用ResultSet的getTimestamp方法获取java.util.Date型数据 java.util.Date time = rs.getTimestamp("time" ...

  8. JMP软件中的晶圆图( Wafer Map)分析

    关键词:芯片 良率分析 晶圆图 质量管理 JMP Minitab 半导体芯片的生产,简单来讲,是将电路通过各种复杂的物理化学方法制作到晶圆上,在生产的最后阶段会进行不同电性功能的测试以确保产品的功能性 ...

  9. QVariant实质 (类似 C#中的装箱拆箱)

    QVariant是一种可以存储不同类型的数据结构,在很多场合这是很有用得为了达到这种目的,可以想象,该对象应该存储对象的类型信息,数据信息以及其他辅助详细考虑用途,这种对象必须支持对不同对象的存储,对 ...

  10. java数组或集合返回空的问题

    在有返回值的情况下,平时我写代码基本遇到错误什么都是返回null,我因为我觉得把数组或集合这个初始化占空间. 但是我发现这样在每次客户段调用都要进行非空判断,而且有时调用内置api还容易报错误,于是解 ...