jQuery避免的陷阱[关闭]

2020/10/15 07:01 · javascript ·  · 0评论

我正在用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$ .validatethinbox其余的我主要开发自己的插件。

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

如果您发现要遍历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的新创建的元素。将此包装器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和类。

本文地址:http://javascript.askforanswer.com/jquerybimiandexianjingguanbi.html
文章标签: ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!