17.第四篇:观察者模式

本文摘自 《JavaScript 设计模式》张容铭 著 版权归原作者所有

观察者模式:又被称作发布-订阅者模式或消息机制,定义了一种依赖关系,解决了主体对象与观察者之间功能的耦合

创建一个观察者
// 将观察者放在闭包中,当页面加载就立即执行
var Observer = (function(){
  // 防止消息队列暴露而被篡改故将消息容器作为静态私有变量保存
  var _message = {};
  return {
    // 注册信息接口
    regist : function () {};
    // 发布信息接口
    fire : function () {};
    // 移除信息接口
    remove : function() {};
  }
})();

实现消息注册方法

regist : function () {
  // 如果此消息不存在则应该创建一个该消息类型
  if(typeof _message[type] === 'undefined'){
    // 将动作推入到该消息对应的动作执行队列中
    _message[type] = [fn];
    // 如果此消息存在
  }else{
    // 将动作方法推入该消息对应的动作执行序列中
    _message[type].push(fn);
  }
}

定义发布消息的方法

fire : function(type,args){
  // 如果该消息没有被注册,则返回
  if(!_message[type]) return;
  // 定义消息信息
  var events = {
    type : type, // 消息类型
    args : args || {} // 消息携带数据
  },
  i = 0, // 消息动作循环变量
  len = _message[type].length; // 消息动作长度
  // 遍历消息动作
  for(; i < len ; i ++) {
    // 依次执行注册的消息对应的动作序列
    _message[type][i].call(this,events);
  }
}

消息注销方法

remove : function (type,fn) {
  // 如果消息动作队列存在
  if(_message[type] instanceof Array) {
    // 从最后一个消息动作遍历
    var i = _message[type].length - 1;
    for (; i >= 0 ; i--) {
      // 如果存在该动作则在消息动作序列中移除相应动作
      _message[type][i] === fn && _message[type].splice(i,1);
    }
  }
}
Observer.regist('test',function(e){
  console.log(e.type,e.args.msg);
})
Observer.fire('test',{msg:'传递参数'});  // test 传递参数
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 接触前端两三个月的时候,那时候只是听说设计模式很重要,然后我就去读了一本设计模式的书,读了一部分,也不知道这些设计...
    艰苦奋斗的侯小憨阅读 3,109评论 2 39
  • javascript设计模式与开发实践 设计模式 每个设计模式我们需要从三点问题入手: 定义 作用 用法与实现 单...
    穿牛仔裤的蚊子阅读 4,291评论 0 13
  • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 7,910评论 2 17
  • 工厂模式 单体模式 模块模式 代理模式 职责链模式 命令模式 模板方法模式 策略模式 发布-订阅模式 中介者模式 ...
    HelloJames阅读 1,028评论 0 6
  • 开头总是平凡乏味的。还总是错漏百出的。 以前是那样的。事情简单考虑直线,一个开始只通向一个终点。没有人批评你的做法...
    desperato阅读 230评论 0 1