JQuery最佳实践-CSDN博客

翻译自：http://stackoverflow.com/questions/1229259/jquery-pitfalls-to-avoid

1. 将相同的选择器赋值给局部变量或使用链式写法。

l Bad：

$('#button').click(function() {

    $('#label').method();

    $('#label').method2();

   $('#label').css('background-color', 'red');

});

l Good：

$('#button').click(function() {

    var$label = $('#label');

    $label.method();

    $label.method2();

    $label.css('background-color', 'red');

});

l Better：

$('#button').click(function() {

    $("#label").method().method2().css("background-color", "red");

});

2. 使用上下文提高查询速度。

l Bad：

//默认情况下将搜索全部文档对象下class 为myClass的元素。

$(‘.myClass’);

l Good：

var ct = $('#myContainer');

//将从myContainer子元素下搜索class 为myClass的元素

$('.myClass', ct);

3. 尽量使用命名的function，便于代码的复用。

l Bad：

//Avoid

$('#div').click( function(){

//do something

});

l Good：

//Do do

function divClickFn (){

//do something

}

$('#div').click( divClickFn );

4. 建议：

l 避免滥用documentready
l 仅在代码初始化中使用documentready
l 将documentready中的方法提取到外部，以便代码重用。

5. 在使用$.ajax的使用进行使用success替代complete

6. 拥有回调的动画事件的链式写法：

l Bad：此写法remove()方法将在fadeOut()方法完成之前调用，破换掉淡出动画。

$("p").click(function(e) {

$(this).fadeOut("slow").remove();

});

l Good：

$("p").click(function(e){

$(this).fadeOut("slow", function(){

$(this).remove();

});

});

7. 尽量少用插件，便于维护和升级。

8. 当不确定是否已绑定事件情况下可以使用：unbind(‘click’).bind(‘click’)

9. 建议：

l 尽量考虑使用选择器替代循环查找
l 使用Firebug之类工具调试

10. 避免上下文中标识符混淆：

l Bad：目的是两次使用被点击对象进行处理。

$( "#first_element").click( function( event)

{

   $(this).method( ); //referring to first_element

   $(".listOfElements").each( function()

   {

      $(this).someMethod( ); // here 'this' is not referring first_elementanymore.

   })

});

l Good：

$( "#first_element").click( function( event)

{

   $(this).method( ); //referring to first_element

   var $that = this;

   $(".listOfElements").each( function()

   {

      $that.someMethod( ); // here 'that' is referring to first_elementstill.

   })

});

11. 使用find检索加快搜索：

l Bad：

$("#form.text").this();

$("#form.int").that();

$("#form.choice").method();

l Good：

$("#form")

    .find(".text").this().end()

    .find(".int").that().end()

    .find(".choice").method();

12. 尽量在.each()中缓存$(this)，如下：

$(selector).each(function () {

var eachOf_X_loop = $(this);

})

13. 事件拷贝：使用如下方式将不会拷贝原有的绑定事件，可以通过clone(true)来拷贝事件。

$("selector").html($("another-selector").html());

14. 使用暂存创建的html元素来替代过多直接使用的.html(),.append(),.prepend()等。

l Bad：

var $parent = $('#parent');

var iterations = 10;

for (var i = 0; i < iterations; i++){

    var $div = $('<div class="foo-' + i+ '" />');

    $parent.append($div);

}

l Good：

var $parent = $('#parent');

var iterations = 10;

var html = '';

for (var i = 0; i < iterations; i++){

    html += '<divclass="foo-' + i + '"></div>';

}

$parent.append(html);