Baidu検索をよく使用する学生は、入力ボックスのドロップダウンインデックスを無視しません。とても便利です。ただし、ユニークな条件により、この非同期技術はいくつかのテストに直面しています。非常に並行しているサーバーの要求は、フロントエンドの包囲が、Ajaxを可能な限り送信する回数を減らすように促します。この記事に関連しているようには聞こえませんが、そうではありません。まず第一に、Baiduの無料広告を作成しましょう。 Baidu Homepageに「フロントエンド」という言葉を入力し、ChromeBugを使用して送信された応答を簡単に確認します。結果は次のとおりです。
コードコピーは次のとおりです。
window.bdsug.sug({q: 'フロントエンド';、p:false、s:['フロントエンド開発'、「フロントエンドエンジニア」、「フロントエンドバス」、「フロントエンド開発エンジニア」、「フロントエンドフレームワーク」、「フロントエンドバス周波数」、「フロントエンドインタビューの質問」、「フロントエンド分析」、「フロントエンド開発ツール」});
Baiduは、OBJパラメーターを使用してSUGメソッドを返すことにより、プルダウンデータをレンダリングしようとします。ページを更新せずに「フロントエンド」を再度入力すると、同様のリクエストは発生しませんでした。これは、要求されたオブジェクトを一時的に保存するために使用されるキャッシュオブジェクトを確立している可能性が高いことを意味します。同じ単語が後で入力されると、最初にキャッシュオブジェクトのキーが取得されます。試合が成功した後、オブジェクトの値は直接読み取られ、リクエストをサーバーに送信しなくなり、コストを効果的に節約できます。
レンガを投げてジェイドを持ってきましょう。本当の主人公について話しましょう:HasownProperty Method。
JSERSはHasownPropertyに不慣れではないと信じており、私はここで川のそばで水を売っています。
これは、オブジェクトのキーにプロパティが存在するかどうかを判断するために使用されるオブジェクト専用であり、戻り値はブール値です。これが例です:
コードコピーは次のとおりです。
var test0 = array.prototype.hasownproperty( 'split'); // false、分割方法が配列に存在しないため
var test1 = string.prototype.hasownproperty( 'split'); // true、splitは文字列オブジェクトの組み込みメソッドであるため
これを知っていると、HasownPropertyの力を見るだけでは十分ではないようです。それでは、Baiduのプルダウンの例を単に再現しましょう。
コードコピーは次のとおりです。
var data = {}、saveobj = function(val){
if(data.hasownProperty(val)){//データオブジェクトに提出された値が存在する場合、リクエストは送信されません
var len = data [val] .length;
for(var i = 0; i <len; i ++){
console.log(data [val] [i]);
}
}それ以外{
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 = 13537563555137'、//最後のパラメーターtはタイムスタンプです。
データタイプ: 'jsonp'、
タイプ:「get」、
成功: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]); //リクエスト結果を印刷します
}
}
}、エラー:function(){
アラート( 'エラー');
}
});
}
};
一部の同僚は、このようにして、キャッシュオブジェクトデータによって占有されているメモリは、キー値が保存されると大きくなり、大きくなることに疑問を呈しました。それから私はこれが避けられないと言いたいです。サーバーリクエストを保存するには、他の人を犠牲にする必要があります。実際、キャッシュオブジェクトが占めるスペースは、「常駐メモリ」ではなく、ページが更新されると破壊されるため、通常無視できます。ただし、このオブジェクトのピーク値に同意する別のソリューションを提供できます。たとえば、100個のキー価値ペアをせいぜい保存できるようになります。数値が100を超えると、最初の10個の保存されたキーが削除演算子を介して削除されるか、単に保存されていないため、この問題は回避できます。
HasownPropertyメソッドは、オブジェクト検出で特に一般的です。もちろん、興味のある学生はPropertyIsEnumerableの方法についても学ぶことができます。 HasownPropertyの拡張バージョンです。独自のプロパティとプロパティの列挙を検出できます。この記事では詳細に説明しません。