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

或者甚至更好地链接: -

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

当我意识到调用栈如何工作时,我发现这是一个启发性的时刻.

编辑:在评论中纳入建议.

Answer 2

了解如何使用上下文.通常,jQuery选择器将搜索整个doc:

// 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的博客中了解到这一点

更新 - 这个答案是在2年前提出的,对于当前版本的jQuery来说是不正确的.其中一条评论包括一项证明这一点的测试.还有一个测试的更新版本,其中包括此答案时的jQuery版本.

Answer 4

尝试拆分匿名函数,以便重用它们.

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

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

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

Answer 5

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

而不是complete,使用success.

请参阅文档中的Ajax事件.

Answer 6

• 避免滥用文件准备.
• 保持文档准备好仅初始化代码.
• 始终在doc准备之外提取函数,以便可以重用它们.

我在doc ready语句中看到了数百行代码.丑陋,难以理解,无法维持.

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

如果多次绑定()同一事件,它将多次触发.我通常unbind('click').bind('click')只是为了安全

Answer 9

不要滥用插件.

大多数情况下,您只需要库和用户界面.如果你保持简单,那么从长远来看,你的代码将是可维护的.并非所有插件都受支持和维护,实际上大部分插件都不支持和维护.如果您可以使用核心元素模仿功能,我强烈推荐它.

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

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

Answer 10

陷阱:使用循环而不是选择器.

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

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

陷阱:不使用像Firebug这样的工具

Firebug实际上是为这种调试而制作的.如果你要使用Javascript在DOM中捣乱,你需要一个像Firebug这样的好工具来提供你的可见性.

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

其他伟大的想法都出现在Polymorphic Podcast的这一集中:( 与Dave Ward的jQuery Secrets) 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的命令,如果传递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

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

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

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