這篇文章將為大家詳細(xì)講解有關(guān)web開發(fā)中如何解決自定義事件解決重復(fù)請(qǐng)求BUG的問題，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)建站一直通過網(wǎng)站建設(shè)和網(wǎng)站營(yíng)銷幫助企業(yè)獲得更多客戶資源。 以"深度挖掘，量身打造，注重實(shí)效"的一站式服務(wù)，以成都網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、移動(dòng)互聯(lián)產(chǎn)品、營(yíng)銷型網(wǎng)站服務(wù)為核心業(yè)務(wù)。十多年網(wǎng)站制作的經(jīng)驗(yàn)，使用新網(wǎng)站建設(shè)技術(shù)，全新開發(fā)出的標(biāo)準(zhǔn)網(wǎng)站，不但價(jià)格便宜而且實(shí)用、靈活，特別適合中小公司網(wǎng)站制作。網(wǎng)站管理系統(tǒng)簡(jiǎn)單易用，維護(hù)方便，您可以完全操作網(wǎng)站資料，是中小公司快速網(wǎng)站建設(shè)的選擇。

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來處理了。。。

關(guān)于“web開發(fā)中如何解決自定義事件解決重復(fù)請(qǐng)求BUG的問題”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站chinadenli.net，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

名稱欄目：web開發(fā)中如何解決自定義事件解決重復(fù)請(qǐng)求BUG的問題-創(chuàng)新互聯(lián)
文章源于：http://chinadenli.net/article26/gccjg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、軟件開發(fā)、小程序開發(fā)、全網(wǎng)營(yíng)銷推廣、自適應(yīng)網(wǎng)站、App開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)