js发布订阅原理，代码解析

发布订阅原理

1. 将要处理的时间放入事件队列中存储(订阅)
2. 将事件队列中存储的事件，按照要求进行统一的执行(发布)

js代码实现

var dep= {};
    dep.list= [];     //此数组用来存放订阅事件 
    //定义listen监听函数 将事件根据 key值来进行区分，存储 (将一类的key的事件存储在一起)
    dep.listen = function(key , fn){
        if(!this.list[key]){
            this.list[key]=[]
        }
        //将一类的key的事件存储在一起 通过key的值进行分类，将相同key的事件存储在一个单独的数组中
        this.list[key].push(fn);
    }
    //发布事件
    dep.trigger = function(){
        var key = Array.prototype.shift.call(arguments) //取出实际参数的第一个参数 (key值)
        var fns = this.list[key];                       //根据key值，获取队列中对应的事件数组
        if(! fns || fns.length==0){
            return
        }
        for(var i=0,fn;fn = fns[i++];){
            fn.apply(this,arguments)                    //循环执行数组中的事件
        }
    }
    //测试数据  进行订阅
    dep.listen('red',function(size){
        console.log('小红颜色的尺寸'+size);
    })
    dep.listen('red',function(size){
        console.log('小红颜色的尺寸'+size);
    })
    dep.listen('block',function(size){
        console.log('小清颜色的尺寸'+size);
    })
    //进行发布 仅发布 key值为red的队列
    dep.trigger('red',37)

js代码实现原理

1. 队列通过数组dep实现，
2. 每个key对应一类js事件,每一个key都对应着单独的队列(数组实现)
3. 通过key值的判断，取出对应的事件队列，循环执行队列中的事件