Javascript模板渲染器

时间:2011-12-07 13:08:54

标签: javascript regex templates node.js view

我正在研究可用于javascript的不同模板解析器,我正在尝试创建自己的东西,以便在服务器(node.js)和客户端上使用。 我想在我的模板中编写没有限制的javascript,如下所示,我不想学习任何新的语法。 (不要担心标签,我只是制作它们,它们可能只是任何东西)

<ul>
<js>for (var i = 0, l = this.somearray.length; i < l; i++) {</js>
    <li>
        <span><js>print(this.somearray[i].key)</js></span>
        <span><js>print(this.somearray[i].value.toLowerCase())</js></span>
    </li>
<js>}</js>
</ul>

我正在考虑使用下面的函数解析此模板。

function parse() {

        var split = template.split(/<js>(.*?)<\/js>/g),
            i, l;

       for (i = 0, l = split.length; i < l; i += 2) {

            var before = split[i],
                content = split[i + 1] || null;

            parsed += before ? 'print(' + JSON.stringify(before) + ');\n' : '';
            parsed += content ? (content + '\n') : '';
        }
    }

这会让我得到像这样的结果

print("<ul>\n");
for (var i = 0, l = this.somearray.length; i < l; i++) {
print("\n    <li>\n        <span>");
print(this.somearray[i].key);
print("</span>\n        <span>");
print(this.somearray[i].value.toLowerCase());
print("</span>\n    </li>\n");
}
print("\n</ul>");

打印功能看起来像这样

function print(s) {
    output += s;
}

如果我然后用eval渲染解析的代码,输出将如下所示......

<ul>
    <li>
        <span>key1</span>
        <span>value1</span>
    </li>
    <li>
        <span>key2</span>
        <span>value2</span>
    </li>
    <li>
        <span>key3</span>
        <span>value3</span>
    </li>
</ul>

我在这里遗漏了什么吗?几行代码并且速度很快,它可以缓存已解析的javascript,以便下次渲染速度更快。唯一的事情是我使用eval被认为是邪恶但只要我不解析任何用户输入我认为它应该是好的... 关于上面代码的任何想法??

3 个答案:

答案 0 :(得分:3)

我认为John Resig关于JavaScript微模式的文章可以帮到你,因为你想写自己的东西:http://ejohn.org/blog/javascript-micro-templating/

答案 1 :(得分:2)

你试过EmbeddedJS吗?它实际上是你正在尝试自己构建的模板引擎:)

它非常高效,基本上将您的模板编译成JavaScript(与上面描述的类似),这样您就可以调试渲染的HTML并将所有内容构建成远程提取模板等等...最重要的是,您可以编写简单的内容JavaScript而不是必须使用特殊标记进行循环,条件子句和那些东西......

“呈现”HTML

的示例
this.process = (function(_CONTEXT,_VIEW){try { with(_VIEW) { with (_CONTEXT) {var ___v1ew = [];___v1ew.push("<h1>\n");
___v1ew.push("    Account Filtering</h1>\n");
___v1ew.push("<form id=\"accountFilter\">\n");
___v1ew.push("<div class=\"filter\">\n");
___v1ew.push("    <fieldset>\n");
___v1ew.push("        <h1>\n");
___v1ew.push("            Suchkriterien</h1>\n");
___v1ew.push("        <div class=\"full\">\n");
___v1ew.push("            <label class=\"description_left\">\n");
___v1ew.push("                Benutzername:</label>\n");
___v1ew.push("            <input name=\"username\" type=\"text\" class=\"m\">\n");
___v1ew.push("        </div>\n");
___v1ew.push("        <div class=\"full\">\n");
___v1ew.push("            <label class=\"description_left\">\n");
___v1ew.push("                Vorname:</label>\n");
___v1ew.push("            <input name=\"firstname\" type=\"text\" class=\"m\">\n");
___v1ew.push("        </div>\n");
___v1ew.push("        <div class=\"full\">\n");
___v1ew.push("            <label class=\"description_left\">\n");
___v1ew.push("                E-Mail-Adresse:</label>\n");
___v1ew.push("            <input name=\"email\" type=\"text\" class=\"m\">\n");
___v1ew.push("        </div>\n");
___v1ew.push("        <div class=\"buttons\">\n");
___v1ew.push("            <input type=\"submit\" name=\"applyFilter\" value=\"Suche\">\n");
___v1ew.push("            <input type=\"submit\" name=\"btnRemoveFilter\" value=\"Filter löschen\">\n");
___v1ew.push("        </div>\n");
___v1ew.push("    </fieldset>\n");
___v1ew.push("</div>\n");
___v1ew.push("</form>\n");
; return ___v1ew.join('');}}}catch(e){e.lineNumber=null;throw e;}});

答案 2 :(得分:2)

即使对于node.js

,也存在很多javascript的模板框架

我建议你使用doT它已经过优化,适用于node.js和浏览器。

有关更多模板的引擎选项,请查看此处:http://jsperf.com/dom-vs-innerhtml-based-templating/275

为自己比较工作的最佳好处。