現(xiàn)在，組件化開發(fā)還是比較流行的，畢竟其優(yōu)點(diǎn)相當(dāng)突出。最近在開發(fā)一個(gè)組件的時(shí)候，遇到了一個(gè)很有意思的BUG。。。

BUG的背景

最近在開發(fā)一個(gè)組件，好不容易開發(fā)好了轉(zhuǎn)測(cè)試。然后，測(cè)試給我提了一個(gè)這樣的bug，orz...

因?yàn)槭且粋€(gè)組件，最大的好處就是可以隨處復(fù)用，隨處使用，然而，當(dāng)一個(gè)頁面用了多個(gè)組件，只有最后一個(gè)生效的時(shí)候，這個(gè)組件就沒有什么意義了。。。

BUG原因查找

這個(gè)組件的初始數(shù)據(jù)來源的接口是固定的，也就是說，頁面內(nèi)的所有這個(gè)組件在初始化的時(shí)候都會(huì)發(fā)出同樣的請(qǐng)求，這里的請(qǐng)求是jsonp的方式，所以回調(diào)函數(shù)是綁定在window上的一個(gè)函數(shù)，但是在頁面中window只有一個(gè)，所以在回調(diào)處理的時(shí)候，要處理的組件內(nèi)的相應(yīng)的數(shù)據(jù)只指向最后一個(gè)組件。所以導(dǎo)致多個(gè)同樣的組件在同一個(gè)頁面中，只有最后一個(gè)組件能在取得數(shù)據(jù)之后順利渲染出來。

BUG解決思路

最主要就是要將每次請(qǐng)求的callback存儲(chǔ)起來，這樣就可以保證callback中對(duì)組件數(shù)據(jù)的處理不是只指向最后一個(gè)。其次，既然是一樣的請(qǐng)求，當(dāng)然不希望會(huì)發(fā)出兩次以上啦，即一個(gè)頁面發(fā)出的每一個(gè)請(qǐng)求都是唯一的。

BUG解決方案

想到了發(fā)布訂閱者模式的自定義事件，可以寫這樣的一個(gè)模塊，每次請(qǐng)求發(fā)出前判斷一下之前是否有相同的模塊已經(jīng)發(fā)出了，如果沒有則緩存callback發(fā)出請(qǐng)求，如果有相同的請(qǐng)求已經(jīng)發(fā)出了，那么檢查一下這個(gè)發(fā)出的請(qǐng)求是否已經(jīng)完成了，如果沒有則繼續(xù)緩存callback等待，如果請(qǐng)求已經(jīng)發(fā)出并且已經(jīng)完成則直接處理callback。在請(qǐng)求第一次回來后，發(fā)出廣播，把之前緩存的callback都執(zhí)行一次。

自定義事件詳情

定義一個(gè)模塊，里面有n個(gè)以回調(diào)函數(shù)命名的事件對(duì)象，每個(gè)對(duì)象有在被初始化的時(shí)候，定義其狀態(tài)state，對(duì)應(yīng)的callback數(shù)組，請(qǐng)求回到的數(shù)據(jù)data。每次調(diào)用該模塊，首先檢查對(duì)應(yīng)的cbName是否被初始化，然后檢查其state。根據(jù)state做相應(yīng)的操作并改變state的值。state的值有3中，分別為init、loading、loaded。即初始化、請(qǐng)求中、請(qǐng)求完成。處于請(qǐng)求完成狀態(tài)時(shí)才能執(zhí)行相應(yīng)的回調(diào)。

具體如下：

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);
  } 
 
})

完美解決問題，每個(gè)回調(diào)都不會(huì)遺漏或者被覆蓋……

擴(kuò)展思路

該模塊可通用于處理一個(gè)頁面內(nèi)同一個(gè)請(qǐng)求的情況。還可以擴(kuò)展到處理一些需要2個(gè)請(qǐng)求以上完成才執(zhí)行某個(gè)回調(diào)的情況。類似于Promose的情況。這個(gè)時(shí)候可以規(guī)定，每個(gè)data[0]裝的是固定的對(duì)應(yīng)接口的數(shù)據(jù)，data[2]對(duì)應(yīng)另一個(gè)，一次類推。不過這樣就要遍歷到每一項(xiàng)都為true的時(shí)候才執(zhí)行回調(diào)。而且對(duì)應(yīng)關(guān)系比較容易混亂，再擴(kuò)展就不如直接用Promise來處理了。。。

以上這篇自定義事件解決重復(fù)請(qǐng)求BUG的問題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論