C'è un modo preferito di formattare le catene jQuery per renderle più leggibili?

Question

Data questa seguente codice di esempio, che clona una riga della tabella, imposta alcune proprietà e quindi lo aggiunge a una tabella:

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

Qualcuno ha qualche suggerimento su come questo potrebbe essere formattato per essere più facile per gli occhi? C'è qualche convenzione accettata per fare questo?

Sarebbe utile disporre di un insieme di regole che possono essere seguite e che possono essere incorporate in un insieme di standard.

Answer 1

Mi farebbe da refactoring. Trovo più di 3 metodi incatenato disagio per gli occhi

 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

ne dite:

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

trovo che il concatenamento, se usato in moderazione, può portare ad una migliore leggibilità.

Answer 3

Non stringere troppo.

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

Meno concatenamento, ma sembra più facile da leggere imo.

Answer 4

mi trattino come se fosse tra parentesi:

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