рефакторинг HTML-генерирующего JavaScript

Question

К сожалению, в моем проекте мы генерируем много HTML-кода на JavaScript, например:

var html = new StringBuffer();
html.append("<td class=\"gr-my-deals\"><a href=\"").append(deal.url).append("\" target=\"_blank\">").append(deal.description).append("</a></td>");

У меня есть 2 конкретные жалобы по этому поводу:

1. Использование экранированных двойных кавычек (\ ”) в строке HTML. Их следует заменить одинарными кавычками (‘) для улучшения читабельности.
2. Использование .append () вместо оператора конкатенации строк JavaScript «+»

Применение обоих этих предложений приводит к следующей эквивалентной строке кода, которую я считаю гораздо более читабельной:

var html = "<td class=’gr-my-deals’><a href=’" + deal.url + "’ target=’_blank’>" + deal.description + "</a></td>";

Сейчас я ищу способ автоматического преобразования первой строки кода во вторую. Все, что я до сих пор придумываю, - это запустить следующий поиск и замену всего нашего кода Javascript:

Find:    ).append(  
Replace: +

Это преобразует строку кода, показанную выше, в:

html.append("<td class=\"gr-my-deals\"><a href=\"" + deal.url + "\" target=\"_blank\">" + deal.description + "</a></td>)";

Это должно безопасно удалить все, кроме первого оператора 'append ()'. К сожалению, я не могу придумать какой-либо безопасный способ автоматически преобразовать экранированные двойные кавычки в одинарные. Имейте в виду, что я не могу просто найти / заменить, потому что в некоторых случаях вам действительно нужно использовать экранированные двойные кавычки. Как правило, это когда вы генерируете HTML, который включает в себя вложенный JS, и этот JS содержит строковые параметры, например

function makeLink(stringParam) {

  var sb = new StringBuffer();
  sb.append("<a href=\"JavaScript:myFunc('" + stringParam + "');\">");
}

Мои вопросы (наконец-то):

• Есть ли лучший способ безопасно заменить вызовы 'append ()' на '+'
• Есть ли способ безопасно заменить экранированные двойные кавычки одиночными, регулярное выражение?

Ура, Дон

Answer 1

Рассмотрите возможность перехода на шаблонный процессор JavaScript . Они, как правило, довольно легкие и могут значительно улучшить ясность вашего кода ... а также производительность, если вы многократно используете повторно и выбираете тот, который предварительно компилирует шаблоны.

Answer 2

Вот функция stringFormat, которая помогает устранить конкатенацию и некрасивые значения замещения.

function stringFormat( str ) {

    for( i = 0; i < arguments.length; i++ ) {
        var r = new RegExp( '\\{' + ( i ) + '\\}','gm' );

        str = str.replace( r, arguments[ i + 1 ] );    
    }
    return str;
}

Используйте это так:

var htmlMask = "<td class=’gr-my-deals’><a href=’{0}’ target=’_blank’>{1}</a></td>";

var x = stringFormat( htmlMask, deal.Url, deal.description ); 

Answer 3

Как следует из Shog9, существует несколько хороших шаблонизаторов JavaScript. Вот пример того, как вы бы использовали мой, jQuery Простые шаблоны :

var tmpl, vals, html;

tmpl  = '<td class="gr-my-deals">';
tmpl += '<a href="#{href}">#{text}</a>';
tmpl += '</td>';

vals  = {
    href : 'http://example.com/example',
    text : 'Click me!'
};

html  = $.tmpl(tmpl, vals);

Answer 4

Шаблонирование? Шаблонный отстой! Вот как бы я написал ваш код:

TD({ "class" : "gr-my-deals" },
   A({ href : deal.url,
       target : "_blank"},
     deal.description ))

Я использую 20-строчную библиотеку под названием DOMination, которую я отправлю всем, кто просит, для поддержки такого кода.

Преимущества разнообразны, но некоторые из наиболее очевидных:

• разборчивый, интуитивно понятный код
• легко учиться и писать
• компактный код (без закрывающих тегов, только закрывающие скобки)
• хорошо понимают JavaScript-редакторы, минификаторы и т. Д.
• решает некоторые проблемы, связанные с браузером (например, разница между rowSpan и rowspan в IE)
• хорошо интегрируется с CSS

(Ваш пример, BTW, подчеркивает единственный недостаток DOMination: любые атрибуты HTML, которые также являются зарезервированными словами JavaScript, class в этом случае должны заключаться в кавычки, чтобы не случилось плохого.)

Answer 5

Есть веская причина, по которой вы должны использовать StringBuffer () вместо конкатенации строк в JavaScript. StringBuffer () и его метод append () используют Array и метод Array join () для объединения строки. Если у вас есть значительное количество частичных строк, к которым вы хотите присоединиться, это, как известно, более быстрый способ сделать это.