要避免的 jQuery 陷阱[关闭]

Question

我正在使用 jQuery 开始一个项目。

您的 jQuery 项目中有哪些陷阱/错误/误解/滥用/误用？

Answer 1

不知道性能损失并过度使用选择器而不是将它们分配给局部变量。例如：-

$('#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');
});

或者even better with chaining:-

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

当我意识到调用堆栈的工作原理时，我发现this 是一个启发性的时刻。

编辑：在 cmets 中合并建议。

Answer 2

了解如何使用上下文。通常，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);

Answer 3

不要使用裸类选择器，像这样：

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

这最终会查看每一个元素，看它是否有一个“按钮”类。

相反，您可以帮助它，例如：

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

我去年从 Rebecca Murphy's blog 学到的

更新 - 这个答案是 2 年前给出的，对于 current 版本的 jQuery 来说是不正确的。 其中一个 cmets 包括一个测试来证明这一点。 还有一个updated version of the test，其中包含此答案时的 jQuery 版本。

Answer 4

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

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

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

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

Answer 5

• 避免滥用准备好的文档。
• 保持文档为初始化代码做好准备。
• 始终在准备好的文档之外提取函数，以便可以重复使用它们。

我在 doc ready 语句中看到了数百行代码。丑陋、不可读且无法维护。

Answer 6

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

而不是complete，使用success。

请参阅文档中的 Ajax Events。

Answer 7

带有回调的“链接”动画事件。

假设您想为点击后消失的段落制作动画。之后您还想从 DOM 中删除该元素。您可能认为您可以简单地将方法链接起来：

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

在这个例子中，.remove() 将在 .fadeOut() 完成之前被调用，破坏你的渐变效果，只是让元素立即消失。相反，如果您只想在完成前一个命令后触发命令，请使用回调：

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

.fadeOut() 的第二个参数是一个匿名函数，它将在 .fadeOut() 动画完成后运行。这会导致逐渐褪色，并随后移除元素。

Answer 8

如果你多次 bind() 同一个事件，它会触发多次。为了安全起见，我通常总是去unbind('click').bind('click')

Answer 9

不要滥用插件。

大多数时候，您只需要库，也许还需要用户界面。如果您保持简单，那么您的代码将长期可维护。并非所有插件都受支持和维护，实际上大多数不是。如果您可以使用核心元素模仿功能，我强烈推荐它。

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

明智地选择您使用的插件。 除了库和用户界面，我经常使用$.cookie、$.form、$.validate 和thickbox。其余的我主要开发自己的插件。

Answer 10

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

如果你发现自己使用 jQuery '.each' 方法来迭代 DOM 元素，问问自己是否可以使用选择器来获取元素。

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

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

Firebug 实际上是为这种调试而设计的。如果您打算在 DOM 中使用 Javascript 搞砸，您需要一个像 Firebug 这样的好工具来提供可见性。

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

本期多态播客中还有其他很棒的想法： （戴夫·沃德的 jQuery 秘密） http://polymorphicpodcast.com/shows/jquery/

Answer 11

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

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

Answer 12

避免多次搜索整个 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();

Answer 13

始终将 $(this) 缓存到有意义的变量中 特别是在 .each()

这样

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

Answer 14

类似于 Repo Man 所说的，但不完全一样。

在开发 ASP.NET winforms 时，我经常这样做

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

忘记#号。正确的形式是

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

Answer 15

活动

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

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

根据 JP 的评论t - 如果您通过 true，clone() 会重新绑定事件。

Answer 16

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

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

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

Answer 17

我对 JavaScript 也这么说，但是 jQuery，JavaScript 永远不应该取代 CSS。

此外，请确保该网站可供关闭 JavaScript 的人使用（今天的相关性不如过去，但拥有一个完全可用的网站总是很高兴）。

Answer 18

进行过多的 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 中。将节点附加到这个包装器 div 不会导致减速，最后我们将 $wrapper 附加到 $parent，仅使用一个 DOM 操作）：

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);

Answer 19

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

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

此外，如果您在 SharePoint 中使用 jQuery，则必须调用 jQuery.noConflict()。

Answer 20

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

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

myFunc("someId");

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

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

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

Answer 21

过度使用链接。

看这个：

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

Explanation

Answer 22

使用字符串累加器样式

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

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

Answer 23

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

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

Answer 24

我的两分钱）

通常，使用 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()。其实没什么大不了的，但我们应该记住这个事实。

Answer 25

如果您打算在大量数据中进行 Ajax，例如，一个包含 20 列的表的 1500 行，那么甚至不要考虑使用 jQuery 将这些数据插入到您的 HTML 中。使用纯 JavaScript。 jQuery 在较慢的机器上会太慢。

另外，jQuery 有一半的时间会做一些会导致它变慢的事情，比如尝试解析传入 HTML 中的脚本标签，以及处理浏览器的怪癖。如果您想要快速插入速度，请坚持使用纯 JavaScript。

Answer 26

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

Answer 27

不理解事件绑定。 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 所需的钩子。 IE。使用内联标记（onClick 等），因为您可以简单地使用开发人员通常用于 CSS 目的的 ID 和类。