Existe-t-il un moyen préféré de mettre en forme les chaînes jQuery pour les rendre plus lisibles?

Question

Compte tenu de ce code ci-dessous de l'échantillon qui clone une ligne de table, définit des propriétés et ajoute ensuite à une table:

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

Quelqu'un at-il des suggestions quant à la façon dont cela pourrait être formaté pour être plus facile sur l'oeil? Y a-t-il une convention acceptée pour faire cela?

Il serait utile d'avoir un ensemble de règles qui peuvent être suivies, et qui peuvent être incorporées dans un ensemble de normes.

Answer 1

Je réfuterais ceci à ceci. Je trouve plus de 3 méthodes enchaînées mal à l'aise sur l'oeil

 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

Que diriez-vous:

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

je trouve que enchaînant, lorsqu'il est utilisé dans la modération , peut conduire à une meilleure lisibilité.

Answer 3

Ne pas trop enchaîner.

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

Moins de chaînage, mais il semble plus facile à lire.

Answer 4

J'indentent comme si elle était placée entre crochets:

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