javascript 观察者模式(订阅者模式)

简单理解逻辑:

A发布一个消息 ,如果B,C,D都订阅了这个事件,则会将所有订阅着订阅的消息依此执行。

常见的使用场景:

vuejs框架数据修改,视图直接改变,这里就是采用的观察者模式。

开始:

首先要编写注册/发布/注销三个函数

var Demo=function(){

    var _message={};

    var that=this;

    //注册

    that.regist=function(type,fn){

          if(typeof _message[type]==="undefined"){

                    _message[type]=[fn]

         }else{

                  _message[type].push(fn)

        }

   }

    //发布

    that.fire=function(type,args){

        if(!_message[type]){return;}

        var i=0,len=_message.[type].length;

        for(;i<len;i++){

                _message[type][i].call(this,args);//触发regist的时候存入到_message[type]的回调函数

        }

    }

    //注销

    that.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)

                      }

            }

     }

}

使用:

var observer=new Demo();

//订阅

observer.regist("test",function(e){e()});

observer.regist("test",function(e){console.log("这个订阅也会触发")});

//发布

observer.fire("test",function(){

      alert("这里是业务逻辑")

})

当fire发布test,则订阅test的消息会依次执行;

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 单例模式 适用场景:可能会在场景中使用到对象,但只有一个实例,加载时并不主动创建,需要时才创建 最常见的单例模式,...
    Obeing阅读 2,315评论 1 10
  • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 8,130评论 2 17
  • 面向对象编程 1.创建,使用函数 var CheckObject = {checkName : function(...
    依米花1993阅读 465评论 0 0
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 136,554评论 19 139
  • 晚上十点,定了闹钟准备睡了。突然觉得,这样的日复一日让我好难过。 我记得从去年夏天开始 我再也没有喝醉过。 没给人...
    摄影师Utopia阅读 355评论 3 1

友情链接更多精彩内容