Có cách nào ưu tiên hơn để định dạng các chuỗi jQuery để làm cho chúng dễ đọc hơn không?

Question

Với này sau mẫu mã mà bắt chước một dòng của bảng, đặt ra một số tài sản và sau đó gắn nó vào một bảng:

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

Có ai có bất cứ đề nghị như thế nào điều này có thể được định dạng để được dễ dàng hơn trên mắt? Có bất kỳ quy ước được chấp nhận nào để thực hiện việc này không?

Sẽ hữu ích khi có một bộ quy tắc có thể được tuân theo và có thể được kết hợp thành một bộ tiêu chuẩn.

Answer 1

Tôi sẽ cấu trúc lại điều này. Tôi tìm thấy nhiều hơn 3 phương pháp xích khó chịu trên mắt

 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

Làm thế nào về:

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

Tôi thấy rằng chaining, khi được sử dụng trong chừng mực, có thể dẫn đến khả năng đọc tốt hơn.

Answer 3

Đừng xích quá nhiều.

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

Ít chuỗi, nhưng có vẻ dễ đọc hơn.

Answer 4

tôi thụt như thể nó đã được đặt trong ngoặc vuông:

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