自定义事件解决重复请求BUG

如今，组件化开发仍是比较流行的，毕竟其优势至关突出。最近在开发一个组件的时候，遇到了一个颇有意思的BUG。。。

 

BUG的背景

　　最近在开发一个组件，好不容易开发好了转测试。而后，测试给我提了一个这样的bug，orz...

由于是一个组件，最大的好处就是能够随处复用，随处使用，然而，当一个页面用了多个组件，只有最后一个生效的时候，这个组件就没有什么意义了。。。

 

BUG缘由查找

　　这个组件的初始数据来源的接口是固定的，也就是说，页面内的全部这个组件在初始化的时候都会发出一样的请求，这里的请求是jsonp的方式，因此回调函数是绑定在window上的一个函数，可是在页面中window只有一个，因此在回调处理的时候，要处理的组件内的相应的数据只指向最后一个组件。因此致使多个一样的组件在同一个页面中，只有最后一个组件能在取得数据以后顺利渲染出来。

 

BUG解决思路

　　最主要就是要将每次请求的callback存储起来，这样就能够保证callback中对组件数据的处理不是只指向最后一个。其次，既然是同样的请求，固然不但愿会发出两次以上啦，即一个页面发出的每个请求都是惟一的。

 

BUG解决方案

　　想到了发布订阅者模式的自定义事件，能够写这样的一个模块，每次请求发出前判断一下以前是否有相同的模块已经发出了，若是没有则缓存callback发出请求，若是有相同的请求已经发出了，那么检查一下这个发出的请求是否已经完成了，若是没有则继续缓存callback等待，若是请求已经发出而且已经完成则直接处理callback。在请求第一次回来后，发出广播，把以前缓存的callback都执行一次。

 

自定义事件详情

　　定义一个模块，里面有n个以回调函数命名的事件对象，每一个对象有在被初始化的时候，定义其状态state，对应的callback数组，请求回到的数据data。每次调用该模块，首先检查对应的cbName是否被初始化，而后检查其state。根据state作相应的操做并改变state的值。state的值有3中，分别为init、loading、loaded。即初始化、请求中、请求完成。处于请求完成状态时才能执行相应的回调。具体以下：

define('wq.getData', function (require, exports, module) {
    var ls = require('loadJs');
    
    var cache = {};
    cache.init = function(cb,cbName,url){
        if(!cache[cbName]){
            cache[cbName] = {};
            cache[cbName].state = 'init';
            cache[cbName].cbs = [];
            cache[cbName].data = [];
        }
        cache.on(cb,cbName,url);
    }
    cache.on = function(cb,cbName,url){
        if(cache[cbName].state == 'loaded'){
            cb(cache[cbName].data)
        }else if(cache[cbName].state == 'loading'){
            cache[cbName].cbs.push(cb)
        }else if(cache[cbName].state == 'init'){
            cache[cbName].cbs.push(cb);
            cache[cbName].state = 'loading';
            cache.fetch(cb,cbName,url);
        }
    }
    cache.broadcast = function(cbName){
        cache[cbName].cbs.forEach(function(cb){
            cb(cache[cbName].data)
        });
    }
    cache.checkLoaded = function(cbName){
        if(cache[cbName].data[0]){
            cache[cbName].state = 'loaded';
            cache.broadcast(cbName);
        }
    }
    cache.fetch = function(cb,cbName,url){
        ls.loadScript({
            url: url,
            charset: 'utf-8',
            handleError:function(func, args, context,errorObj){
                console.log(_errlogText +　context);
                cache[cbName].data[0] = {};
                cache.checkLoaded(cbName);
            }
        });
        if(window.cbName) return;
        window[cbName] = function(json){
            cache[cbName].data[0] = json;
            cache.checkLoaded(cbName);
        }
    }

    exports.getData = function(cb,cbName,url){
        cache.init(cb,cbName,url);
    }  

})

完美解决问题，每一个回调都不会遗漏或者被覆盖……

 

扩展思路

       该模块可通用于处理一个页面内同一个请求的状况。还能够扩展处处理一些须要2个请求以上完成才执行某个回调的状况。相似于Promose的状况。这个时候能够规定，每一个data[0]装的是固定的对应接口的数据，data[2]对应另外一个，一次类推。不过这样就要遍历到每一项都为true的时候才执行回调。并且对应关系比较容易混乱，再扩展就不如直接用Promise来处理了。。。