Есть ли предпочтительный способ форматирования цепочек jQuery, чтобы сделать их более читаемыми?

Учитывая этот следующий пример кода, который клонирует строку таблицы, задает некоторые свойства и затем добавляет их в таблицу:

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

Есть ли у кого-нибудь какие-либо предложения относительно того, как это можно отформатировать, чтобы быть проще на глазу? Есть ли принятая конвенция для этого?

Было бы полезно иметь набор правил, которым можно следовать, и которые могут быть включены в набор стандартов.

Ответы

Ответ 1

Я бы реорганизовал это. Я нахожу более трех цепных методов, непростых на глазу.

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

Ответ 2

I отступ, как будто он заключен в квадратные скобки:

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

Ответ 3

Как насчет:

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

Я нахожу, что цепочка при использовании в модерации может привести к лучшей читаемости.

Ответ 4

Не цепляйтесь так много.

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

Меньше цепочки, но легче читать imo.