(Tips&Tricks)用客户端模板精简JavaScript代码

出处：http://www.cnblogs.com/osamede/archive/2009/06/11/1501474.html

假设你在做一个AJAX-oriented 项目，使用JavaScript访问服务器 ,获取Json 对象，然后操作DOM，将它们显示出来。如果遇到一些复杂的页面，需要获取和展示大量的JSON对象，那该如何处理？为每一个对象单独写一段JavaScript代码创建相应的HTML?那样的话随着JavaScript代码越来越多，页面会变的越来越复杂,而且你不得不通过修改JavaScript代码来改变HTML样式。

使用客户端模可以解决这个问题。你可以先用HTML定义一个模板，然后绑定JSON对象上去。这样你可以任意改变最终生成的HTML，而不用修改JavaScript。

John Resig’s Microtemplating engine

John Resig，JQuery的设计者，曾经在他的博客上发布过一个特别微型，但是很强大的的JS模板引擎，仅仅只有20行……。好吧，我承认看不大懂，但是它真的很强。

这段代码将一个模板解析成一段JavaScript 代码，然后运行。模板的语法类似于ASP,用<%= expression %> 和 <% codeblock %>嵌入代码。你可以嵌入任意的JavaScript代码，而不是仅仅几个命令。

Code
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->var_tmplCache={}
this.parseTemplate=function(str,data){
varerr="";
try{
varfunc=_tmplCache[str];
if(!func){
varstrFunc=
"varp=[],print=function(){p.push.apply(p,arguments);};"+
"with(obj){p.push('"+
str.replace(/[\r\t\n]/g,"")
.replace(/'(?=[^#]*#>)/g,"\t")
.split("'").join("\\'")
.split("\t").join("'")
.replace(/<#=(.+?)#>/g,"',$1,'")
.split("<#").join("');")
.split("#>").join("p.push('")
+"');}returnp.join('');";
func=newFunction("obj",strFunc);
_tmplCache[str]=func;
}
returnfunc(data);
}catch(e){err=e.message;}
return"<#ERROR:"+err.htmlEncode()+"#>";
}

一个简单的实例

这个例子将一个Json对象Customers，解析成表格。

模板

Code
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--><scriptid="ItemTemplate"type="text/html">
<tableborder="2px">
<#for(vari=0;i<Customers.length;i++){#>
<tr>
<td><#=Customers[i].name#></td>
<td><#=Customers[i].address.street#></td>
<td><#=Customers[i].address.city#></td>
</tr>
<#}#>
</table>
</script>

代码

<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--> 1 content.innerHTML=parseTemplate($("#ItemTemplate").html(),{Customers:[
2 {name:"张三",address:{street:"朝阳路",city:"北京"}},
3 {name:"张三子",address:{street:"玄武路",city:"北京"}},
4 {name:"李四",address:{street:"莫干山路",city:"杭州"}},
5 {name:"李四子",address:{street:"武陵门路",city:"杭州"}}]
6
7 }
8
9
10
11 );
12

相关链接

John Resig posted a tiny little templating engine

Minimize Code by Using jQuery and Data Templates ----Dan Wahlin

Client Templating with jQuery----Rick Strahl