JavaScript模板引擎用法实例
本文实例讲述了JavaScript模板引擎用法。分享给大家供大家参考。具体如下:
这里介绍的这个模板引擎写得短小精悍,非常值得一看
tmpl.js文件如下:
//SimpleJavaScriptTemplating //JohnResig-http://ejohn.org/-MITLicensed (function(){ varcache={}; this.tmpl=functiontmpl(str,data){ //Figureoutifwe'regettingatemplate,orifweneedto //loadthetemplate-andbesuretocachetheresult. varfn= !/\W/.test(str) ? cache[str]=cache[str]||tmpl(document.getElementById(str).innerHTML) : //Generateareusablefunctionthatwillserveasatemplate //generator(andwhichwillbecached). newFunction( "obj","varp=[],print=function(){p.push.apply(p,arguments);};"+ //Introducethedataaslocalvariablesusingwith(){} "with(obj){p.push('"+ //ConvertthetemplateintopureJavaScript str .replace(/[\r\t\n]/g,"") .split("<%").join("\t") .replace(/((^|%>)[^\t]*)'/g,"$1\r") .replace(/\t=(.*?)%>/g,"',$1,'") .split("\t") .join("');") .split("%>") .join("p.push('") .split("\r") .join("\\'")+ "');}returnp.join('');" );//Functionends //Providesomebasiccurryingtotheuser returndata?fn(data):fn; }; })();
index.html文件如下:
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>JavaScripttmplUseDemo</title> <scripttype="text/javascript"src="js/jquery.min.js"></script> <scriptsrc="./tmpl.js"type="text/javascript"></script> <!--下面是模板user_tmpl--> <scripttype="text/html"id="user_tmpl"> <%for(vari=0;i<users.length;i++){%> <li><ahref="<%=users[i].url%>"><%=users[i].name%></a></li> <%}%> </script> <scripttype="text/javascript"> //用来填充模板的数据 varusers=[ {url:"http://baidu.com",name:"jxq"}, {url:"http://google.com",name:"william"} ]; $(function(){ //调用模板引擎函数将数据填充到模板获得最终内容 $("#myUl").html(tmpl("user_tmpl",users)); }); </script> </head> <body> <div> <ulid="myUl"> </ul> </div> </body> </html>
希望本文所述对大家的javascript程序设计有所帮助。