Gibt es eine bevorzugte Möglichkeit zum Formatieren von jQuery-Ketten, um sie lesbarer zu machen?

Question

diesen folgenden Beispielcode gegeben, die eine Tabellenzeile klont, wird einige Eigenschaften und fügt sie dann an einen Tisch:

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

Hat jemand irgendwelche Vorschläge, wie dies könnte einfacher zu sein, auf dem Auge formatiert werden? Gibt es eine akzeptierte Konvention dafür?

Es wäre nützlich, eine Reihe von Regeln zu haben, die befolgt werden können und die in eine Reihe von Standards aufgenommen werden können.

Answer 1

Ich würde dies umgestalten. Ich finde, mehr als 3 gekettet Methoden unruhig auf dem Auge

 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

Wie wäre:

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

Ich finde, dass Chaining, wenn in Maßen verwendet werden, um eine bessere Lesbarkeit führen kann.

Answer 3

Kette nicht so viel.

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

Weniger Verkettung, aber es scheint einfacher zu lesen imo.

Answer 4

ich einrücken, als ob es eingeklammert wurde:

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