經(jīng)常使用百度搜索的同學，一定不會忽視輸入框的下拉索引，它是如此方便，然而得天獨厚的條件使得這項異步技術多少面臨些考驗，高并發(fā)的服務端請求督促著他們的前端攻城師必須盡可能地減少發(fā)送ajax的次數(shù)。聽起來似乎與本文無關，但并不是這樣。首先就暫且讓我們?yōu)榘俣让赓M做個廣告吧。在百度首頁輸入“前端”一詞，利用chromebug可以很輕松地看到所發(fā)送的響應，結果顯示如下：
window.bdsug.sug({q:'前端';,p:false,s:['前端開發(fā)','前端工程師','前端總線','前端開發(fā)工程師','前端框架','前端總線頻率','前端面試題','前端分析','前端開發(fā)工具','前端觀察']});
百度試圖通過返回一個帶有obj參數(shù)的sug方法，來進行對下拉數(shù)據(jù)的渲染，當你在不刷新頁面的情況下再次輸入“前端”，類似的請求并沒有發(fā)生，這說明他們很可能建立了一個緩存對象，它的作用是臨時存儲請求過來的object，當后面輸入同樣的詞匯時，會首先檢索緩存對象的鍵，匹配成功后，直接讀取該對象的值，并不再向服務端發(fā)送請求，這樣就可以有效地節(jié)約成本了。
拋磚引玉，接下來談談真正的主角：hasOwnProperty方法。
相信jser們對hasOwnProperty并不陌生，我在此也只是江邊賣水了。
它是對象的專屬，用來判斷一個屬性是否存在于某對象的鍵中，return的是一個boolean值。這是一個例子：
var test0 = Array.prototype.hasOwnProperty('split'); //false，因為數(shù)組不存在split方法
var test1 = String.prototype.hasOwnProperty('split'); //true，因為split是String對象的內置方法
當你知道這些的時候，似乎還不足以看到hasOwnProperty的作用力，那么下面簡單地重現(xiàn)一下百度下拉的例子：
var data = {}, saveObj = function(val){
if(data.hasOwnProperty(val)){ //如果提交的值存在于data對象中，則不發(fā)送請求
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', //最后面一個參數(shù)t是一個時間戳
dataType : 'jsonp',
type : 'GET',
success : function(res){
var msg = res.data, len = msg.length;
msg == null && (msg = []);
if(len > 0){
data[val] = msg; //緩存搜索結果
for(var i = 0; i < len; i++){
console.log(msg[i]); //打印出請求結果
}
}
}, error : function(){
alert('error');
}
});
}
};
有同事質疑，這樣一來，緩存對象data占用的內存將會隨著存儲鍵值的越多而越大。那么我想說這是不可避免的，要節(jié)約服務端的請求，就必然要犧牲其它，而事實上緩存對象占據(jù)的空間通常情況下是可以忽略的，因為它并非“常駐內存”，一旦頁面刷新它將銷毀。然而我們可以給出另一個解決方案，給此對象約定一個峰值，比如最多它只允許存儲100個鍵值對，當超過100的數(shù)量時，通過delete運算符刪除前十條存儲的鍵或者干脆就不存儲，這樣就可以避免此問題了。
hasOwnProperty方法在對象的檢測中用得尤為普遍，當然有興趣的同學也可以去了解下propertyIsEnumerable方法，它是hasOwnProperty的增強版，能檢測自有屬性且該屬性的可枚舉性，本文就不再做詳細說明了。
