是否有一种格式化jQuery链的首选方法，使它们更具可读性？

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

$("#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() ); 

有没有人有任何建议，如何格式化，以方便眼睛？ 这样做是否有任何公认的惯例？

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

Answer 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"); 

Answer 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() ) ; 

Answer 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() ); 

我发现链接在适度使用时可以带来更好的可读性。

Answer 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。