既是安安

蝴蝶飞不过沧海,谁忍心责怪?

前端模板编程方式

在浏览器端实现模板编程的难点之一,就是怎么编写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

网站分类
Tags列表
最近发表
最新留言
友情链接
站点统计

Top