有没有一种格式化 jQuery 链的首选方法，以使它们更具可读性？答案

【问题标题】：Is there a preferred way of formatting jQuery chains to make them more readable?有没有一种格式化 jQuery 链的首选方法，以使它们更具可读性？
【发布时间】：2023-03-18 00:35:01
【问题描述】：

鉴于以下示例代码克隆了一个表行，设置了一些属性，然后将其附加到一个表中：

$("#FundTable").append(
    objButton.parents("tr").clone()
        .find(".RowTitle").text("Row " + nAddCount).end()
        .find(".FundManagerSelect").attr("id", "FundManager" + nAddCount)
                                .change(function() { ChangeFundRow(); }).end()
        .find(".FundNameSelect").attr("id", "FundName" + nAddCount).end()
);

有没有人对如何将其格式化以使眼睛更容易提出任何建议？这样做有什么公认的惯例吗？

拥有一套可以遵循的规则并将其纳入一套标准是很有用的。

【问题讨论】：

标签： javascript jquery chaining

【解决方案1】：

我会对此进行重构。我发现超过 3 种链式方法让我很不舒服

       var $clonedRow =  objButton.parents("tr").clone();

       $clonedRow.find(".RowTitle") 
                 .text("Row " + nAddCount);

       $clonedRow.find(".FundManagerSelect")
                 .attr("id", "FundManager" + nAddCount)
                 .change( ChangeFundRow );

       $clonedRow.find(".FundNameSelect")
                 .attr("id", "FundName" + nAddCount);

       $clonedRow.appendTo("#FundTable");

【讨论】：

我喜欢这个，因为它反映了我使用正则表达式的方法——拥有一个超级正则表达式通常比 2-3 个更小的一口大小的正则表达式更难理解
这样好多了。仅仅因为你可以连锁并不意味着你应该。
我一直想知道这一点，我必须承认。我对这种方法的紧张是您正在缓存一个已经缓存的变量（在链堆栈上）。考虑到一些可能非常大，链接不是更好吗，或者这是一个可以接受的开销？
@Jeff Atwood - 这让我有点害怕。如果 1 个正则表达式 = 2 个问题，那么 3 个正则表达式 = 6 个问题！抱歉，无法抗拒。
我几乎对我的 js 进行了太多的测试，但我从未注意到任何开销。我总是会投票支持可读性而不是轻微的性能影响，尤其是很难监控的影响。

【解决方案2】：

我缩进，好像它被括号括起来：

$("#FundTable")
    .append(objButton.parents("tr")
        .clone()
        .find(".RowTitle")
            .text("Row " + nAddCount)
        .end()
        .find(".FundManagerSelect")
            .attr("id", "FundManager" + nAddCount)
            .change(function() {
                ChangeFundRow(); // you were missing a semicolon here, btw
            })
        .end()
        .find(".FundNameSelect")
            .attr("id", "FundName" + nAddCount)
        .end()
    )
;

【讨论】：

我忘记了这里有一些东西被附加到fundtable的事实。
你可以在第 2 行拆分并添加额外的缩进级别

【解决方案3】：

怎么样：

$("#FundTable").append(
    objButton.parents("tr").clone()
        .find(".RowTitle").text("Row " + nAddCount)
        .end()
        .find(".FundManagerSelect").attr("id", "FundManager" + nAddCount)
        .change(function() { 
            ChangeFundRow() 
        })
        .end()
        .find(".FundNameSelect").attr("id", "FundName" + nAddCount)
        .end()
);

我发现，适度使用链接可以提高可读性。

【讨论】：

【解决方案4】：

不要这么链接。

var newContent = objButton.parents("tr").clone();

newContent.find(".RowTitle").text("Row " + nAddCount)
newContent.find(".FundManagerSelect").attr("id", "FundManager" + nAddCount)
    .change(function() { ChangeFundRow() });
newContent.find(".FundNameSelect").attr("id", "FundName" + nAddCount);

$("#FundTable").append(newContent);

链接更少，但 imo 似乎更容易阅读。

【讨论】：