额外的$(…)调用是坏的

Are extra $(...) calls bad?

本文关键字：调用      更新时间：2023-09-26

如果我有代码下拉一个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会优化这样的多余调用吗?

$("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对象，那么是的，它是坏的:

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

这会影响性能，因为每次都要创建新的jquery对象。

尽量避免。

创建jquery对象并使用它

相关文章：