快捷導(dǎo)航

Js中使用hasOwnProperty方法檢索ajax響應(yīng)對(duì)象的例子

更新時(shí)間：2014年12月08日 11:06:47 投稿：junjie

這篇文章主要介紹了Js中使用hasOwnProperty方法檢索ajax響應(yīng)對(duì)象的例子,本文介紹的技巧就是hasOwnProperty方法在ajax請(qǐng)求中的使用,需要的朋友可以參考下

經(jīng)常使用百度搜索的同學(xué)，一定不會(huì)忽視輸入框的下拉索引，它是如此方便，然而得天獨(dú)厚的條件使得這項(xiàng)異步技術(shù)多少面臨些考驗(yàn)，高并發(fā)的服務(wù)端請(qǐng)求督促著他們的前端攻城師必須盡可能地減少發(fā)送ajax的次數(shù)。聽(tīng)起來(lái)似乎與本文無(wú)關(guān)，但并不是這樣。首先就暫且讓我們?yōu)榘俣让赓M(fèi)做個(gè)廣告吧。在百度首頁(yè)輸入“前端”一詞，利用chromebug可以很輕松地看到所發(fā)送的響應(yīng)，結(jié)果顯示如下：

復(fù)制代碼代碼如下:

window.bdsug.sug({q:'前端';,p:false,s:['前端開發(fā)','前端工程師','前端總線','前端開發(fā)工程師','前端框架','前端總線頻率','前端面試題','前端分析','前端開發(fā)工具','前端觀察']});

百度試圖通過(guò)返回一個(gè)帶有obj參數(shù)的sug方法，來(lái)進(jìn)行對(duì)下拉數(shù)據(jù)的渲染，當(dāng)你在不刷新頁(yè)面的情況下再次輸入“前端”，類似的請(qǐng)求并沒(méi)有發(fā)生，這說(shuō)明他們很可能建立了一個(gè)緩存對(duì)象，它的作用是臨時(shí)存儲(chǔ)請(qǐng)求過(guò)來(lái)的object，當(dāng)后面輸入同樣的詞匯時(shí)，會(huì)首先檢索緩存對(duì)象的鍵，匹配成功后，直接讀取該對(duì)象的值，并不再向服務(wù)端發(fā)送請(qǐng)求，這樣就可以有效地節(jié)約成本了。

拋磚引玉，接下來(lái)談?wù)務(wù)嬲闹鹘牵篽asOwnProperty方法。

相信jser們對(duì)hasOwnProperty并不陌生，我在此也只是江邊賣水了。

它是對(duì)象的專屬，用來(lái)判斷一個(gè)屬性是否存在于某對(duì)象的鍵中，return的是一個(gè)boolean值。這是一個(gè)例子：

復(fù)制代碼代碼如下:

var test0 = Array.prototype.hasOwnProperty('split'); //false，因?yàn)閿?shù)組不存在split方法

var test1 = String.prototype.hasOwnProperty('split'); //true，因?yàn)閟plit是String對(duì)象的內(nèi)置方法

當(dāng)你知道這些的時(shí)候，似乎還不足以看到hasOwnProperty的作用力，那么下面簡(jiǎn)單地重現(xiàn)一下百度下拉的例子：

復(fù)制代碼代碼如下:

var data = {}, saveObj = function(val){

 if(data.hasOwnProperty(val)){ //如果提交的值存在于data對(duì)象中，則不發(fā)送請(qǐng)求

  var len = data[val].length;

  for(var i = 0; i < len; i++){

   console.log(data[val][i]);

  }

 }else{

  var url = 'http://suggestion.baidu.com/su?wd=' + val;

  $.ajax({ //為了示例清晰，此處用jquery的ajax為例

   url : url + '&p=3&cb=window.bdsug.sug&sid=1421_1513_1541_1542_1582&t=1353756355137', //最后面一個(gè)參數(shù)t是一個(gè)時(shí)間戳

   dataType : 'jsonp',

   type : 'GET',

   success : function(res){

    var msg = res.data, len = msg.length;

    msg == null && (msg = []);

    if(len > 0){

     data[val] = msg; //緩存搜索結(jié)果

     for(var i = 0; i < len; i++){

      console.log(msg[i]); //打印出請(qǐng)求結(jié)果

     }

    }

   }, error : function(){

    alert('error');

   }

  });

 }

};

有同事質(zhì)疑，這樣一來(lái)，緩存對(duì)象data占用的內(nèi)存將會(huì)隨著存儲(chǔ)鍵值的越多而越大。那么我想說(shuō)這是不可避免的，要節(jié)約服務(wù)端的請(qǐng)求，就必然要犧牲其它，而事實(shí)上緩存對(duì)象占據(jù)的空間通常情況下是可以忽略的，因?yàn)樗⒎恰俺ｑv內(nèi)存”，一旦頁(yè)面刷新它將銷毀。然而我們可以給出另一個(gè)解決方案，給此對(duì)象約定一個(gè)峰值，比如最多它只允許存儲(chǔ)100個(gè)鍵值對(duì)，當(dāng)超過(guò)100的數(shù)量時(shí)，通過(guò)delete運(yùn)算符刪除前十條存儲(chǔ)的鍵或者干脆就不存儲(chǔ)，這樣就可以避免此問(wèn)題了。

hasOwnProperty方法在對(duì)象的檢測(cè)中用得尤為普遍，當(dāng)然有興趣的同學(xué)也可以去了解下propertyIsEnumerable方法，它是hasOwnProperty的增強(qiáng)版，能檢測(cè)自有屬性且該屬性的可枚舉性，本文就不再做詳細(xì)說(shuō)明了。

您可能感興趣的文章: