额外的 $(...) 调用是不好的吗？

Question

额外的 $(...) 调用是不好的吗？

10

如果我有一段代码，它会获取一个jQuery对象，然后在其上进行进一步的调用。

$("a.postSyncLink").click(function () {
    var resultsTarget = $("span", $(link).parent().next());
    resultsTarget.html("<img style='position: absolute;' src='" + waitImgUrl + "'/><span>Sync in progress</span>");

    $.get($(this).attr("data-url"), function (returnVal) {
        resultsTarget.text(returnVal);
    });
});

在jQuery中，如果随后（且不必要地）再次用jQuery函数包装同一对象，这是否被视为不良实践？jQuery是否会优化这样的多余调用？

$("a.postSyncLink").click(function () {
    var resultsTarget = $("span", $(link).parent().next());
    $(resultsTarget).html("<img style='position: absolute;' src='" + waitImgUrl + "'/><span>Sync in progress</span>");

    $.get($(this).attr("data-url"), function (returnVal) {
        $(resultsTarget).text(returnVal);
    });
});

- Adam Rackis

我不认为它会。但是你为什么要这样做呢？resultsTarget已经是一个jQuery对象了。这样做有什么目的或需要吗？ - John Hartsock

1

这就是代码审查的作用。开发过程可以帮助您编写更干净的代码。 - John Hartsock

2

@John - 来吧 - 在jQuery代码中，我经常看到这种情况。我并不是在为它辩护，我只是想知道jQuery是否会优化掉它，或者它真的很重要。 - Adam Rackis

1

@kay....当我审查同事的代码时，我不仅花时间理解实现方式，还会纠正任何类型的错误。如果你不采取这种方法，会导致可读性困难。此外，在问题出现之前就可以发现效率问题。 - John Hartsock

2

如果您想要一种确保捕获此问题的方法，请使用修改过的jQuery版本进行开发，并在此处执行类似于

if( selector instanceof jQuery.fn.init || context instanceof jQuery.fn.init ) console.warn( 'A jQuery object was passed as an argument to the jQuery constructor' );

的操作。 - RightSaidFred

显示剩余7条评论

2个回答

2

每次这样做都会创建新的jQuery对象，因此会影响性能。

尽可能避免这种情况的发生。

只需创建jQuery对象并使用即可。

- PeeHaa

@kay，你有没有真正看过jquery.js文件？你有没有想过每次使用$()时有多少内容最终会出现在jQuery对象中？试着用console.dir()玩一下。 - tereško

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Shad · Accepted Answer

如果它们没有被用来克隆原始的jQuery对象，那么是有问题的：

http://api.jquery.com/jQuery/#cloning-jquery-objects

将传递给jQuery的jQuery对象进行克隆，这是我不想浪费的处理器时间。

当存储对jQuery对象的引用时，我发现在变量名前加上$很有用，这有助于我记住它是一个jQuery对象，而且不需要重新包装：

$("a.postSyncLink").click(function () {
    var $resultsTarget = $("span", $(link).parent().next());
    $resultsTarget.html("<img style='position: absolute;' src='" + waitImgUrl + "'/><span>Sync in progress</span>");

    $.get($(this).attr("data-url"), function (returnVal) {
        $resultsTarget.text(returnVal);
    });
});