Jquery 不良做法

发布于 2024-08-17 18:45:20 字数 1432 浏览 7 评论 0原文

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

自此以后,行同陌路 2024-08-24 18:45:20

您应该避免的一件事是在每一行中再次使用“易于使用”的选择器,因为选择器的 JavaScript 实现效率不高。当然,jQUery 的人正在优化它,但是我认为你应该尽可能少地使用它。

所以,这是一个不好的做法。

$("li ul span").show();
$("li ul span").toggleClass("bubu");

链接很好

$("li ul span").show().toggleClass("bubu");

,记住局部变量中的东西也不错:

var allspans = $("li ul span");
allspans.show();
allspans.toggleClass("bubu");

A thing you should avoid is using the "easy to use" selectors in every line once again, because the JavaScript implementation of selectors is not that efficient. Of course, the jQUery guys are optimizing it, however I think you should use it as little as possible.

So, this is a bad practice.

$("li ul span").show();
$("li ul span").toggleClass("bubu");

Chaining is good

$("li ul span").show().toggleClass("bubu");

And remembering things in a local variable is also not bad:

var allspans = $("li ul span");
allspans.show();
allspans.toggleClass("bubu");
过度放纵 2024-08-24 18:45:20

我经常看到两个:

首先,在单击事件中,id 的访问方式如下:

$("a").click(function(e){
   var id = $(this).attr('id');
});

这将创建一个 jQuery 对象DOM 节点,并且调用一个函数。以下是正确的方法:

$("a").click(function(e){
   var id = this.id;
});

注意:您还将看到 $(this).attr('href'),但这是正确的,因为 jQuery 在浏览器之间标准化它的方式。

第二个是将除 DOM 节点之外的任何内容传递到 jQuery 调用的 scope 参数中:

$(".child", $(".parent")).doSomething();
// or
$(".child", ".parent").doSomething();

这样做根本不会提高速度。当您已经拥有 DOM 元素时,您确实会看到速度提高:

$('div').click(function(){
   $('img', this).doSomething(); // This is good
});

There are two that I see alot:

First, in a click event, the id is accessed like this:

$("a").click(function(e){
   var id = $(this).attr('id');
});

That creates a new jQuery object around the DOM node, and calls a function. The following is the correct way:

$("a").click(function(e){
   var id = this.id;
});

Note: That you will also see $(this).attr('href'), but that is correct because of the way jQuery normalizes it across browsers.

The second is passing anything except a DOM node into the scope parameter of the jQuery call:

$(".child", $(".parent")).doSomething();
// or
$(".child", ".parent").doSomething();

There is no speed gain at all by doing this. Where you do see a speed increase, is when you already have the DOM element:

$('div').click(function(){
   $('img', this).doSomething(); // This is good
});
姐不稀罕 2024-08-24 18:45:20

James Padolsey 撰写了关于 jQuery 代码异味的一篇优秀文章。我建议阅读它。

James Padolsey has written an excellent article on jQuery code smells. I recommend reading it.

我还不会笑 2024-08-24 18:45:20

仍然使用旧的文档准备功能:

$("document").ready(function(){ });

而不是非常常见的:

$(function(){ });

这并不是很糟糕,但我向人们展示了新的 api 还没有起来。

Still using the old document ready function:

$("document").ready(function(){ });

Instead of the very common:

$(function(){ });

It's not really bad, but I shows people not getting up with new api's.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文