具有正则表达式的Javascript模板

Question

我正在尝试客户端模板，并提出了以下概念：

<table>
    <tr bind-template="colors,<td style='color:@color'>@name</td>"></tr>
</table>

而且我有一个javascript对象，如：

var colors = [{name: 'white', color: '#FFFFFF'},{name: 'black', color: '#000000'}];

因此，从“绑定模板”属性中，我可以找到实际的对象“颜色”，然后是模板本身

<td style='color:@color'>@name</td>

我不擅长正则表达式，但是我想出了以下几点：

<td style='color:#FFFFFF'>white</td>
<td style='color:#000000'>black</td

我只是在Array上创建了一个原型，如下所示：

    Array.prototype.HelperResult = function (template, el) {
        var arr = [];
        var result = null;

        $(this).each(function (index, item) {
            result = template;
            for (var o in item) {
                if (template.indexOf('@' + o) >=0)
                {
                    result = result.replace('@' + o, item[o]);
                }
            }
            arr.push(result);
        });

        $(el).append(arr.join(''));
    };

在我看来，这似乎有些笨拙，但确实可行。 这是我称为此方法的方式：

        var templates = $('[bind-template]');

        $(templates).each(function (index) {
            var attr = $(this).attr('bind-template');

            if (attr) {
                var parts = attr.split(',');
                if (parts.length == 2)
                {
                    self[parts[0]].HelperResult(parts[1], this);
                }
            }
        });    

我要清理这个问题，但是我需要帮助的是想出一种更干净的方法来从迭代中获取@color和@name的值，我想它将以我不喜欢的正则表达式的方式进行不太了解。

感谢您的任何想法。 再次，所有这些只是概念的证明:-)

谢谢大家

Answer 1

为什么要使用正则表达式？ 因为他们很酷？ =）

您的代码运行良好，我认为没有理由对其进行太多更改。

我唯一想注意的时刻是：

1. 我确实相信没有理由在调用replace（）之前先调用indexOf（）－最后一个将为搜索文本的出现执行相同的工作，因此您做了两次工作。

2. 我想我们应该在模板中找到所有出现的@tagname ，例如

   <td id="@name">@name</td>

所以我的重构将是：

-           if (template.indexOf('@' + o) >=0)
-           {
-               result = result.replace('@' + o, item[o]);
-           }

+           result = result.replace('@' + o, item[o], 'g');

PS但是，如果您想进行正则表达式，则可以编写

            result = result.replace(new RegExp('@' + o, 'g'), item[o]);

并使您的代码更酷。 ;）