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

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

在 JavaScript 中应该使用 StringBuffer() 而不是字符串连接，这是有充分理由的。 StringBuffer() 及其append() 方法使用Array 和Array 的join() 将字符串组合在一起。 如果您想要连接大量的部分字符串，那么这是一种更快的方法。

Answer 5

模板化？ 模板很糟糕！ 这是我编写代码的方式：

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

我使用一个名为 DOmination 的 20 行库，我会将其发送给任何询问的人，以支持此类代码。

优点是多方面的，但其中一些最明显的是：

• 清晰、直观的代码
• 易于学习和编写
• 紧凑的代码（没有关闭标签，只有关闭括号）
• 等很好地理解
• 能够被 JavaScript 感知的编辑器、压缩器 一些特定于浏览器的问题（例如 IE 上的 rowSpan 和 rowspan 之间的差异）
• 与 CSS 集成得很好

（顺便说一句，您的示例突出了 DOmination 的唯一缺点：任何同时也是 JavaScript 保留字的 HTML 属性，class 在这种情况下，必须被引用，以免发生不好的事情。）