前端模板编程方式

转自：http://www.ilovejs.net/archives/1100

 

在浏览器端实现模板编程的难点之一，就是怎么编写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），并且需要将数据在页面中显示出来的时候，这种思路或许可以带上用场，减小代码编写量了，提高效率了。