2018-01-15 js观察者模式设计

观察者模式

当一个对象的状态发生改变时,所有依赖于它的对象都会得到通知,也简称发布-订阅模式。类似微信订阅公众号,当它有新的文章发表后,就会推送给我们所有订阅的人

优点
1.我们无需关注公众号是否有新的文章发布
2.我们和公众号没有强耦合在一起,公众号不关心谁订阅了它

自定义事件

现在我们想要实现这样的功能,定义一个事件,它有以下功能

  • 监听事件(订阅公众号)
  • 触发事件(公众号发布)
  • 移除事件(取消关注公众号)
//代码如下
var Event = (function(){
  var list = {},//存储公众号
      on,
      emit,
      remove;
  //监听事件
  on = function(key,fn){
    if(!list[key]){
      list[key] = [];如果不存在key,创建
    }
    list[key].push(fn);//将回调函数存储到对应的key
  };
  //触发事件
  emit = function(){
    var key = Array.prototype.shift.call(arguments);//获取key值
    var msg = list[key];
    if(!msg || msg.length === 0){
      return false;//不存在对应的回调函数,返回false
    }
    for(var i = 0; i < msg.length; i++){
      msg[i].apply(this,arguments);//循环执行回调函数
    }
  };
  //移除事件
  remove = function(key,fn){
    var msg = list[key];
    if(!msg){
      return false;//如果不存在事件 返回false
    }
    if(!fn){
     delete list[key];//没有指定的回调函数,则删除key 可以理解公众号下架了
    }else{
      for(var i = 0; i < msg.length; i ++){
        if(msg[i] === fn){
          msg.splice(i, 1);//删除指定的回调函数
        }
      }
    }
  };
  // 返回对象
  return {
    on:on,
    emit:emit,
    remove:remove
  }
})();

var fn = function(data){
  console.log(data+"推送消息来啦~~~")
}
Event.on('click',fn);//订阅公众号
Event.emit('click',"2018.01.15")//发布公众号
Event.remove('click',fn);//取消关注公众号
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,016评论 25 708
  • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 7,827评论 2 17
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,860评论 18 139
  • 一、实用干货 画画入门要多久?不到15分钟! 绘画初学者7宗罪,你犯几则? 10个错误观念不利于学画画 送给初学者...
    Ordy阅读 4,866评论 0 29
  • 人与人之间,存在着一条无形的纽带,不管相互认识与否,不论是否血缘关系。这条纽带,就是爱。爱能使人们团结起来。而分享...
    风信子也阅读 761评论 0 2