我正在研究可用于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被认为是邪恶但只要我不解析任何用户输入我认为它应该是好的... 关于上面代码的任何想法??
答案 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
我建议你使用doT它已经过优化,适用于node.js和浏览器。
有关更多模板的引擎选项,请查看此处:http://jsperf.com/dom-vs-innerhtml-based-templating/275
为自己比较工作的最佳好处。