Students who often use Baidu search will not ignore the drop-down index of the input box. It is so convenient. However, the unique conditions make this asynchronous technology face some tests. The highly concurrent server request urges their front-end siege urges them to reduce the number of times they send ajax as much as possible. It doesn't sound like it's related to this article, but it's not. First of all, let’s make a free advertisement for Baidu. Enter the word "front-end" on Baidu homepage, and use chromebug to easily see the sent response. The results are as follows:
The code copy is as follows:
window.bdsug.sug({q:'front end';,p:false,s:['front end development','front end engineer','front end bus','front end development engineer','front end framework','front end bus frequency','front end interview questions','front end analysis','front end development tools','front end observation']});
Baidu tries to render the pull-down data by returning a sug method with obj parameter. When you enter "front-end" again without refreshing the page, similar requests did not occur. This means that they are likely to have established a cache object, which is used to temporarily store the requested object. When the same word is entered later, the key of the cache object will be retrieved first. After the match is successful, the value of the object is read directly and no longer sending a request to the server, which can effectively save costs.
Let’s throw a brick and bring jade, let’s talk about the real protagonist: hasOwnProperty method.
I believe that jsers are not unfamiliar with hasOwnProperty, and I am just selling water by the river here.
It is exclusive to the object, used to determine whether a property exists in the key of an object, and the return value is a boolean value. Here is an example:
The code copy is as follows:
var test0 = Array.prototype.hasOwnProperty('split'); //false, because the split method does not exist in the array
var test1 = String.prototype.hasOwnProperty('split'); //true, because split is a built-in method for String objects
When you know this, it seems that it is not enough to see the force of hasOwnProperty. So, let’s simply reproduce the example of Baidu pull-down:
The code copy is as follows:
var data = {}, saveObj = function(val){
if(data.hasOwnProperty(val)){ //If the submitted value exists in the data object, no request will be sent
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({ //For the sake of clear examples, here we use jquery's ajax as an example
url : url + '&p=3&cb=window.bdsug.sug&sid=1421_1513_1541_1542_1582&t=1353756355137', //The last parameter t is a time stamp
dataType : 'jsonp',
type: 'GET',
success : function(res){
var msg = res.data, len = msg.length;
msg == null && (msg = []);
if(len > 0){
data[val] = msg; //Cached search results
for(var i = 0; i < len; i++){
console.log(msg[i]); //Print out the request result
}
}
}, error : function(){
alert('error');
}
});
}
};
Some colleagues questioned that in this way, the memory occupied by the cache object data will become larger and larger as the key values are stored. Then I want to say that this is inevitable. To save server requests, others must be sacrificed. In fact, the space occupied by the cache object is usually negligible because it is not "resident memory" and it will be destroyed once the page is refreshed. However, we can give another solution, to agree to a peak value for this object, for example, it only allows storing 100 key-value pairs at most. When the number exceeds 100, the first ten stored keys are deleted through the delete operator or simply not stored, so this problem can be avoided.
The hasOwnProperty method is particularly common in object detection. Of course, interested students can also learn about propertyIsEnumerable method. It is an enhanced version of hasOwnProperty. It can detect its own properties and the enumeration of the properties. This article will not explain in detail.