西红柿爱番茄

今天接触到一种使用javascript来实现的前端模板编写技巧，不需要后端的匹配替换，直接在浏览器端就可以完成。Not Using jQuery JavaScript Templates? You’re Really Missing Out。觉得思路不错，特此分享。

在浏览器端实现模板编程的难点之一，就是怎么编写HTML模板。这个在那篇文章中使用了script标签，这个觉得非常太神奇了，最神奇的是给script的type设置为text/html之后，它就不会使用javascript引擎来解析那些代码，也不会在页面上将HTML显示出来，同时也不报错。这都被发现了，牛逼！

知道了怎么保存模板之后，接下来的事情就是解析模板了，统一替换变量的声明方式，下面是我样例中使用的方式：

[html]
<script id="test" type="text/html">
<li><a href="${url}$">${name}$</a></li>
</script>
[/html]
之后，就是通过javascript程序来解析了，我简单写了一个template函数来实现这个功能，《测试用例》：
[javascript]
function template(data,sEl,dEl){
var html = sEl.nodeName && sEl.innerHTML || sEl,s = tmp = "";
data = data || [];
for(var i=0,l=data.length;i<l;i++){
tmp = html;
for(var k in data[i]){
tmp = tmp.replace(RegExp("\\$\\{"+k+"\\}\\$","gi"),data[i][k]);
}
s += tmp;
}
(dEl = dEl.nodeName && dEl || document.getElementById(dEl)).innerHTML = s;
}
[/javascript]

通过上面的解析，在页面中就可以定制模板（特别是那些标题列表内容，即：ul，ol等），通过数据源，在页面中显示出来。当然了，这个在页面开始加载的时候如果就是用这个的话，无疑是多此一举，但是如果是通过动态获取数据（JSON，XML），并且需要将数据在页面中显示出来的时候，这种思路或许可以带上用场，减小代码编写量了，提高效率了。