重构HTML生成JavaScript

Question

不幸的是，在我的项目中，我们在JavaScript中生成了大量的HTML代码，如下所示：

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

我对此有两项具体的投诉：

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()‘语句之外的所有语句。不幸的是，我想不出任何安全的方法来自动将转义双引号转换为单引号。请记住，我不能简单地进行查找/替换，因为在某些情况下，您确实需要使用转义双引号。通常，这是在生成包含嵌套JS的HTML时，而JS包含字符串参数。

function makeLink(stringParam) {

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

我的问题(最后)是：

• 是否有更好的方法安全地将对'append()‘的调用替换为'+’
• 有没有办法安全地用单引号替换转义的双引号，regex？

干杯，唐

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