JS_javascript スキルで hasOwnProperty メソッドを使用して Ajax 応答オブジェクトを取得する例

Baidu 検索を頻繁に使用する学生は、入力ボックスのドロップダウン インデックスを絶対に無視することはありません。これは非常に便利ですが、この非同期テクノロジには、フロントエンドでの同時サーバー リクエストが必要になるという課題があります。 . Siege エンジニアは、ajax メッセージの数をできる限り減らす必要があります。この記事とは無関係のように聞こえるかもしれませんが、そうではありません。まずはBaiduの無料広告を作ってみましょう。 Baidu のホームページで「フロントエンド」という単語を入力し、chromebug を使用すると、送信された応答が簡単に表示されます。

コードをコピーします コードは次のとおりです:

window.bdsug.sug({q:'フロントエンド';,p:false,s:['フロントエンド開発','フロントエンド エンジニア','フロントエンド バス','フロントエンド開発エンジニア','フロントエンド フレームワーク','フロントエンド バスの頻度','フロントエンドのインタビューの質問','フロントエンド分析','フロントエンド開発ツール','フロントエンドの観察']});

Baidu は、obj パラメーターを含む sug メソッドを返すことによってドロップダウン データをレンダリングしようとします。ページを更新せずに再度「フロント エンド」に入ると、同様のリクエストは発生しません。これは、それらが非常に A なキャッシュ オブジェクトであることを示しています。その機能は、要求されたオブジェクトを一時的に保存することです。後で同じ単語が入力されると、一致が成功した後、オブジェクトの値が直接読み取られます。より多くのリクエストがサーバーに送信されるため、コストが効果的に節約されます。

本当の主役である hasOwnProperty メソッドについて話しましょう。

jser は hasOwnProperty を知らない人ではないと思います。私はここで川のほとりで水を売っているだけです。

これはオブジェクト専用であり、オブジェクトのキーに属性が存在するかどうかを判断するために使用されます。戻り値はブール値です。以下に例を示します:

コードをコピーします コードは次のとおりです:

var test0 = Array.prototype.hasOwnProperty('split'); // false、配列に分割メソッドが存在しないため
var test1 = String.prototype.hasOwnProperty('split'); //split は String オブジェクトの組み込みメソッドであるため、

これを理解すると、hasOwnProperty の威力を理解するだけでは十分ではないと思われるので、Baidu ドロップダウンの例を簡単に再現してみましょう:

コードをコピーします コードは次のとおりです:

var data = {}、saveObj = function(val){
if(data.hasOwnProperty(val)){ //送信された値がデータ オブジェクトに存在する場合、リクエストは送信されません
var len = データ[val].length;
for(var i = 0; 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=1353756355137', //最後のパラメータ 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 console.log(msg[i]); //リクエスト結果を出力します
}
}
}、エラー: function(){
アラート('エラー');
}
});
}
};

この方法では、より多くのキー値が保存されるにつれて、キャッシュされたオブジェクト データによって占有されるメモリが増加することに疑問を抱く同僚もいます。つまり、サーバー側のリクエストを保存するには、他のものを犠牲にする必要があるということです。実際、キャッシュ オブジェクトが占めるスペースは、ページに保存されると通常は無視されます。リフレッシュされると破壊されます。ただし、別の解決策を提供して、このオブジェクトのピーク値に同意することもできます。たとえば、最大 100 個のキーと値のペアのみを保存でき、その数が 100 個を超えた場合は、削除演算子を使用して最初の 10 個の保存キーを削除します。あるいは、この問題を避けるために単にストレージを使用しないこともあります。

hasOwnProperty メソッドは、オブジェクト検出で特によく使用されます。もちろん、興味のある学生は、hasOwnProperty の拡張バージョンであり、独自のプロパティとプロパティの列挙可能性を検出できます。これ以上詳しく説明しません。