JQuery の落とし穴、JQuery の落とし穴インデックス ランキング

1 セレクターの無差別な使用

トレインインデックス: 200

JQueryセレクターの呼び出しは非常に高価であり、繰り返し呼び出しを行うとさらに効率が悪くなります。 cachingobjectのメソッドを使用するか、連鎖呼び出しのメソッドを使用する必要があります。

//错误的写法
$("#button").click(function(){
    $('#list li').addClass('strong');
    $('#list li').css('color', 'red');
});
//正确的写法
$("#button").click(function(){
    $lis = $('#list li');
    $lis.addClass('strong');
    $lis.css('color', 'red');
});
//更好的写法
$("#button").click(function(){
    $('#list li').addClass('strong').css('color', 'red');
});

2 グローバル選択は非効率です

欺瞞指数: 100

グローバル選択の使用を避けるために、可能な限りコンテキスト検索を使用してください。グローバル セレクターはドキュメント全体を検索しますが、これは非常に非効率的です。

//错误的写法
$(".active").method();
//正确的写法
var ul = $("#myList");
$(".active",ul).method();

3 コピー 匿名関数

取引指数: 50

匿名関数を複数回コピーすることは避け、他のオブジェクトから複数回呼び出せるように匿名関数を分離します。

//错误的写法
$('#myp').click( function(){
   //一些操作
});
//正确的写法
function pClickFn (){
   //一些操作   
}
$('#myp').click( pClickFn );

4 ajax の complete の誤用

チートインデックス: 30

ajax を使用してデータリクエストを行う場合は、complete コールバック メソッドの使用を避け、代わりに success メソッドを使用してください。リクエストが成功しても失敗しても、完全なコールバックがトリガーされます。

//错误的写法
$.ajax({
  url: "http://tools.42du.cn/jsonp/student/all",
}).complete(function( data ) {
    //一些操作  
});
//正确的写法
$.ajax({
  url: "http://tools.42du.cn/jsonp/student/all",
}).success(function( data ) {
    //一些操作  
});

5 チェーン呼び出しの誤用

詐欺指数: 20

チェーン呼び出しを使用すると、グラデーションが完了する前にオブジェクトが削除されます。つまり、fadeOut メソッドが完了する前に、remove メソッドが呼び出されます。 。 1つ目のメソッドが完了した後に2つ目のメソッドを実行する必要がある場合は、2つ目のメソッドであるコールバックを使用してください。

//错误的写法
$("#myp").click(function(e) {
  $(this).fadeOut("slow").remove();
});
//正确的写法
$("myp").click(function(e){
  $(this).fadeOut("slow", function(){
    $(this).remove();
  });
});

6 EventMultiple bindings

Cheat Index: 20

同じイベントを複数回バインドすると、応答が複数回実行されます。複数の実行を避けるには、まずイベントのバインドを解除してから、再バインドしてください。

//避免响应多次执行
$("myp").unbind("click").bind("click");

7 このインジケーターの間違った使用法

チートインデックス: 10

このインジケーターは特定のコンテキストに存在し、コンテキストが変化すると、これは別のオブジェクトを指します。元のコンテキストでも this を呼び出したい場合は、元の this オブジェクトを元のコンテキスト ($that = $(this)) にキャッシュする必要があります。

りー

以上がJQuery の落とし穴、JQuery の落とし穴インデックス ランキングの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。