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

                _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的消息会依次执行;

你可能感兴趣的:(javascript 观察者模式(订阅者模式))