Czy istnieje preferowany sposób formatowania łańcuchów jQuery, aby uczynić je bardziej czytelnymi?

Question

Biorąc to poniższy przykładowy kod który klonów wiersza tabeli, określa pewne właściwości, a następnie dołącza je do tabeli:

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

Czy ktoś ma jakieś sugestie co do tego, jak może to być sformatowany być łatwiejsze w oku? Czy istnieje jakakolwiek akceptowana konwencja dla tego?

Przydałby się zestaw reguł, których można przestrzegać i które można włączyć do zestawu standardów.

Answer 1

Chciałbym to zmienić. Znajdę więcej niż 3 przykuty metody niespokojne w oku

 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

Jak o:

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

Uważam, że łańcuchowym, gdy są stosowane w moderacji, może prowadzić do lepszej czytelności.

Answer 3

Nie łańcuch tyle.

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

Mniejsza liczba łańcuchów, ale łatwiej jest odczytać imo.

Answer 4

ja wciąć tak, jakby były w nawiasie:

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