既是安安

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

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

• <script id="test" type="text/html">
• <li><a href="${url}$">${name}$</a></li>
• </script>

之后，就是通过javascript程序来解析了，我简单写了一个template函数来实现这个功能，《测试用例》：

• 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;
• }

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

原文来自：http://www.ilovejs.net/archives/1100

季氏安安

本文作者：季氏安安（[既是安安]博客采用 BY-NC-SA 协议进行授权. 转载请保留此链接，谢谢。）

原文链接：http://www.jsann.com/post/Front-end_template_programmatically.html