避免jQuery陷阱[关闭]

我正在用jQuery启动一个项目。

您在jQuery项目中遇到了哪些陷阱/错误/误解/滥用/误用？

不了解性能影响并过度使用选择器，而不是将选择器分配给局部变量。例如：-

$('#button').click(function() {
    $('#label').method();
    $('#label').method2();
    $('#label').css('background-color', 'red');
});

而不是：-

$('#button').click(function() {
    var $label = $('#label');
    $label.method();
    $label.method2();
    $label.css('background-color', 'red');
});

或者甚至更好地链接： -

$('#button').click(function() {
    $("#label").method().method2().css("background-color", "red"); 
});

当我意识到调用堆栈是如何工作时，我发现了这一启发性时刻。

编辑：纳入建议的评论。

了解如何使用上下文。通常，jQuery选择器将搜索整个文档：

// This will search whole doc for elements with class myClass
$('.myClass');

但是您可以通过在上下文中搜索来加快速度：

var ct = $('#myContainer');
// This will search for elements with class myClass within the myContainer child elements
$('.myClass', ct);

不要使用裸类选择器，例如：

$('.button').click(function() { /* do something */ });

最后将查看每个元素，以查看其是否具有“按钮”类。

相反，您可以提供帮助，例如：

$('span.button').click(function() { /* do something */ });
$('#userform .button').click(function() { /* do something */ });

我去年从Rebecca Murphy的博客中学到了

更新 -这个答案是2年前给出的，对于当前版本的jQuery 不正确。评论之一包括测试以证明这一点。还有一个测试的更新版本，其中包含此回答时的jQuery版本。

尝试拆分匿名函数，以便您可以重用它们。

//Avoid
$('#div').click( function(){
   //do something
});

//Do do
function divClickFn (){
   //do something    
}

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

• 避免滥用文件准备就绪。
• 使文档准备好仅用于初始化代码。
• 始终在准备好的文档外部提取函数，以便可以重复使用它们。

我已经在doc ready语句中看到了数百行代码。丑陋，无法读取且无法维护。

在对服务器的Ajax请求使用$.ajax功能时，应避免使用该事件来处理响应数据。无论请求是否成功，它都会触发。complete

而不是complete使用success。

请参阅文档中的Ajax事件。

带回调的“连锁”动画事件。

假设您想动画一个段落，使其消失。您还希望随后从DOM中删除该元素。您可能认为您可以简单地链接方法：

$("p").click(function(e) {
  $(this).fadeOut("slow").remove();
});

在此示例中，将在.fadeOut（）完成之前调用.remove（），这会破坏渐变效果，并简单地使该元素立即消失。相反，当您只想在完成前一个命令时才发出命令时，请使用回调函数：

$("p").click(function(e){
  $(this).fadeOut("slow", function(){
    $(this).remove();
  });
});

.fadeOut（）的第二个参数是一个匿名函数，它将在.fadeOut（）动画完成后运行。这使得逐渐褪色，并随后移除该元素。

如果您多次绑定同一事件，它将触发多次。我通常总是unbind('click').bind('click')为了安全起见

不要滥用插件。

在大多数情况下，您只需要库，甚至可能需要用户界面。如果保持简单，则从长远来看，您的代码将是可维护的。并非所有插件均受支持和维护，实际上大多数插件均不受支持。如果可以使用核心元素模拟功能，则强烈建议您使用。

插件很容易插入代码中，节省了一些时间，但是当您需要额外的东西时，修改它们是一个坏主意，因为您丢失了可能的更新。您节省的开始时间将在以后更改不推荐使用的插件时松动。

选择您明智使用的插件。除了库和用户界面，我一直在使用$ .cookie，$ .form，$ .validate和thinbox。其余的我主要开发自己的插件。

陷阱：使用循环而不是选择器。

如果您发现要遍历jQuery``.each''方法来遍历DOM元素，请问自己是否可以使用选择器来获取元素。

有关jQuery选择器的更多信息：http :
//docs.jquery.com/Selectors

陷阱：不使用Firebug之类的工具

Firebug实际上是用于这种调试的。如果您打算使用Javascript来破坏DOM，则需要像Firebug这样的好工具来提供可见性。

有关Firebug的更多信息：http : //getfirebug.com/

其他很棒的主意在此多态播客中： （jQuery秘密与Dave Ward） http://polymorphicpodcast.com/shows/jquery/

在正确的上下文中使用此标识符的误解。例如：

$( "#first_element").click( function( event)
{
   $(this).method( ); //referring to first_element
   $(".listOfElements").each( function()
   {
      $(this).someMethod( ); // here 'this' is not referring first_element anymore.
   })
});

这里是如何解决它的示例之一：

$( "#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_element still.
   })
});

避免多次搜索整个DOM。这确实会延迟您的脚本。

坏：

$(".aclass").this();
$(".aclass").that();
...

好：

$(".aclass").this().that();

坏：

$("#form .text").this();
$("#form .int").that();
$("#form .choice").method();

好：

$("#form")
    .find(".text").this().end()
    .find(".int").that().end()
    .find(".choice").method();

始终将$（this）缓存到有意义的变量中，尤其是在.each（）中

像这样

$(selector).each(function () {
    var eachOf_X_loop = $(this); 
})

类似于Repo Man所说的，但不完全相同。

在开发ASP.NET Winforms时，我经常做

$('<%= Label1.ClientID %>');

忘记＃号。正确的形式是

$('#<%= Label1.ClientID %>');

大事记

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

不会克隆任何事件-您必须重新绑定所有事件。

根据JP的命令，如果传递true，则clone（）会重新绑定事件。

避免多次创建相同的jQuery对象

//Avoid
function someFunc(){
   $(this).fadeIn();
   $(this).fadeIn();
}

//Cache the obj
function someFunc(){
   var $this = $(this).fadeIn();
   $this.fadeIn();
}

我也对JavaScript说过这一点，但对于jQuery，JavaScript绝不能取代CSS。

另外，请确保该网站可用于关闭了JavaScript的用户（今天不像以前那样重要，但总是很高兴拥有一个完全可用的网站）。

进行过多的DOM操作。尽管.html（），.append（），.prepend（）等方法非常有用，但由于浏览器呈现和重新呈现页面的方式不同，使用它们过多会导致速度变慢。通常最好将HTML创建为字符串，并将其包含在DOM中一次，而不是多次更改DOM。

代替：

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

for (var i = 0; i < iterations; i++){
    var $div = $('<div class="foo-' + i + '" />');
    $parent.append($div);
}

试试这个：

var $parent = $('#parent');
var iterations = 10;
var html = '';

for (var i = 0; i < iterations; i++){
    html += '<div class="foo-' + i + '"></div>';
}

$parent.append(html);

甚至这个（$ wrapper是一个尚未创建到DOM的新创建的元素。将节点添加到该wrapper div不会导致性能下降，最后我们仅使用一个DOM操作就将$ wrapper附加到$ parent上）：

var $parent = $('#parent');
var $wrapper = $('<div class="wrapper" />');
var iterations = 10;

for (var i = 0; i < iterations; i++){
    var $div = $('<div class="foo-' + i + '" />');
    $wrapper.append($div);
}

$parent.append($wrapper);

使用ClientID获取ASP.NET项目中控件的“真实” ID。

jQuery('#<%=myLabel.ClientID%>');

另外，如果您在SharePoint中使用jQuery，则必须调用jQuery.noConflict（）。

将ID而不是jQuery对象传递给函数：

myFunc = function(id) { // wrong!
    var selector = $("#" + id);
    selector.doStuff();
}

myFunc("someId");

传递包装的集合要灵活得多：

myFunc = function(elements) {
    elements.doStuff();
}

myFunc($("#someId")); // or myFunc($(".someClass")); etc.

过多使用链接。

看到这个：

this.buttonNext[n ? 'bind' : 'unbind'](this.options.buttonNextEvent, this.funcNext)[n ? 'removeClass' : 'addClass'](this.className('jcarousel-next-disabled')).attr('disabled', n ? false : true);

说明

使用字符串累加器样式

使用+运算符可在内存中创建一个新字符串，并为其分配连接值。只有在此之后，结果才会分配给变量。为避免中间变量连接结果，可以使用+ =运算符直接分配结果。慢：

a += 'x' + 'y';

快点：

a += 'x';
a += 'y';

原始操作可能比函数调用更快

考虑在性能关键的循环和函数中对函数调用使用替代的原始操作。慢：

var min = Math.min(a, b);
arr.push(val);

快点：

var min = a < b ? a : b;
arr[arr.length] = val;

在JavaScript Performance Best Practices上阅读更多内容

如果希望用户在浏览器中看到html实体，请使用“ html”而不是“ text”来插入Unicode字符串，例如：

$('p').html("Your Unicode string")

我的两分钱）

通常，使用jquery意味着您不必一直担心实际的DOM元素。您可以编写这样的内容$('div.mine').addClass('someClass').bind('click', function(){alert('lalala')})--并且此代码将执行而不会引发任何错误。

在某些情况下，这很有用，在某些情况下-根本没有用，但这是事实，jquery倾向于友好的空匹配。但是，replaceWith如果尝试将其与不属于文档的元素一起使用将引发错误。我觉得这很违反直觉。

在我看来，另一个陷阱是prevAll（）方法-返回的节点顺序$('<div><span class="A"/><span class="B"/><span class="C"/><span class="D"/></div>').find('span:last-child').prevAll()。实际上，这没什么大不了的，但是我们应该记住这一事实。

如果您打算在Ajax中处理大量数据，例如表的1500行有20列，那么甚至不要考虑使用jQuery将数据插入到HTML中。使用纯JavaScript。jQuery在速度较慢的计算机上会太慢。

同样，jQuery有一半的时间会做一些会使其变慢的事情，例如尝试解析传入HTML中的脚本标签，并处理浏览器的怪癖。如果要提高插入速度，请坚持使用纯JavaScript。

在一个仅需几行普通JavaScript即可完成的小型项目中使用jQuery。

不了解事件绑定。JavaScript和jQuery的工作方式不同。

以大众需求为例：

在jQuery中：

$("#someLink").click(function(){//do something});

没有jQuery：

<a id="someLink" href="page.html" onClick="SomeClickFunction(this)">Link</a>
<script type="text/javascript">
SomeClickFunction(item){
    //do something
}
</script>

基本上，JavaScript不再需要钩子。即使用内联标记（onClick等），因为您可以简单地使用开发人员通常用于CSS用途的ID和类。