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

BUG的背景

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

因為是一個組件，最大的好處就是可以隨處復(fù)用，隨處使用，然而，當一個頁面用了多個組件，只有最后一個生效的時候，這個組件就沒有什么意義了。。。

BUG原因查找

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

BUG解決思路

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

BUG解決方案

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

自定義事件詳情

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

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

擴展思路

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

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

最新評論