位置：首页>> 网络编程>> JavaScript>> JavaScript模板解析演示实例

JavaScript模板解析演示实例

作者：cnlei　来源：51js　发布时间：2009-10-19 23:16:00　

标签：模板,JavaScript,实例

呵呵，我之前也写过一个类似的模板替换功能.

>> 已实现：>、<、>=、<=、=、==等简单的运算

>> 已实现： if else 运算，loop 循环运算和block块运算。

>> 待实现： include (客户端需要结合Ajax, 服务器端需要结合FSO)

>> 未实现： if else 里再直接嵌套 if else

>> 未实现： if elseif elseif else

代码如下，还请各位大侠多多赐教指正：)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"><head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title> 模板解析演示实例 </title><meta name="author" content="CNLEI" /><meta name="copyright" content="cnlei.y.l@gmail.com , [url]http://www.cnlei.com[/url]" /><meta name="keywords" content="" /><meta name="description" content="" /></head><body><style type="text/css">#htmlPreview {padding:10px;border:1px solid #ccc;}.navBar dl {height:28px;line-height:28px;font-size:14px;}.navBar dt,.navBar dd {float:left;padding:0 5px;margin:0px;}.navBar dt {text-align:center;}.navBar dd a.active,.navBar dd a.active:visited {color:#f00;font-weight:bold;}</style><table cellspacing="1" cellpadding="1"><tr><td>模板文件：<br /><textarea id="htmlTemplate" rows="25" cols="50"><h1>{title}</h1><div class="navBar"><dl>{loop:NAV}{if:(i)>0}<dt>|</dt>{/if:(i)}<dd class="nav{(i)}"><a{if:active} class="active"{/if:active} href="{if:href}{href}{else}{alias}.html{/if:href}" title="{title}"><span>{title}</span></a></dd>{/loop:NAV}</ul></div><div class="info">{block:author}<dl> <dt>作者信息</dt> <dd><strong>作者：</strong>{name}</dd> <dd><strong>邮箱：</strong>{email}</dd> <dd><strong>网站：</strong><a href="{url}">{url}</a></dd></dl>{/block:author}</div></textarea></td><td>转换结果：<br /><textarea id="htmlResult" rows="25" cols="50"></textarea></td></tr></table><p><input type="button" id="testButton" value="开始测试" /></p><div id="htmlPreview"></div><script type="text/javascript">(function(L,E,I){if(typeof(L[E])=="undefined")L[E]={NS:I,author:"CNLEI",version:"2.0.1.09091911"};return I;})(window,"lJSF",function(){var C,N,L,E,I;C=arguments,N=C[0],L=C.callee;if(!N)return L;E=typeof(N);if(E=="string"){N=lJSF[N]={};} else if(E!="object" && E!="function"){return L;}E=(C.length-1)/2;for(I=1;I<=E;I++)N[C[I]]=C[I+E];return L;})(lJSF,"Object",{})(lJSF.Object,"template",/*template(object,template)将object转化为指定格式的字符串-----------------------------约定：>> 待验证： if 内不允许直接内嵌if,即不允许出出现 if if,但允许 if loop if这种结构*/function(V,S,K){var T,t,RT,E={},B={},F={},R={};var RE=/\{(if|loop|block)\:([\w]+)([^\}]*)\}((?:\n|\r|.)*?)\{\/\1\:\2\}/g;//块级匹配规则var R1=/\{(\w+\.[\.\w]*\w)\}/g;//多级属性匹配规则var R2=/^\[\w+\]$/;//属性名匹配规则var lt="{",rt="}",fk=lt+"key"+rt,fv=lt+"value"+rt,ul=lt+"<",ur=">"+rt;//var kk=lt+""+rt;T=function(o){//判断对象类型if(!o){//空字符串,null,undefinde, falsereturn 0;} else if(typeof(o)=="object"){if(/Object/.test(o.constructor)){return 1;} else if(/Array/.test(o.constructor)){return 2;} else {return 0;}} else {return 0;}};E["1"]=function(o,f){//遍历对象for(var x in o)f(o[x],x);};E["2"]=function(a,f){//遍历数组var i=0,l=a.length;for(; i<l;i++) f(a[i],i);};B["="]=function(v1,v0){return v1==v0;};B["=="]=function(v1,v0){return v1===v0;};B[">"]=function(v1,v0){return v1>v0;};B[">="]=function(v1,v0){return v1>=v0;};B["<"]=function(v1,v0){return v1<v0;};B["<="]=function(v1,v0){return v1<=v0;};RT=function(t,KEY){var n=0;if(/\{\w+\}/.test(t))n++;//效率待定if(t.indexOf("{(i)}")>0)n+=2;return n;};R["0"]=function(t,v,k){return t;};R["1"]=function(t,v,k){//只替换属性值return t.split("{"+k+"}").join(v);};R["2"]=function(t,v,k){//只替换属性名return t.split("{(i)}").join(k);};R["3"]=function(t,v,k,K){//同时替换属性名和属性值return t.split("{"+k+"}").join(v);//.split("{(i)}").join(K);};F["if"]=function(obj,key,tv,KEY,cd,r){//if条件运算//alert(kpre+ksuf+"\n"+r);//alert(key);var re=/^([=<>]=?)/,m,bv,cv,vv;if(re.test(cd)){//含有条件运算符号cv=cd.replace(re,function(r){m=r;return "";});if(R2.test(cv)){//待比较的为属性名cv=cv.substring(1,cv.length-1);if(cv in obj){cv=obj[cv];} else {cv="["+cv+"]";}}if(key=="(i)"){bv=KEY;m=B[m](KEY,cv);} else {bv=obj[key];m=B[m](obj[key],cv);}//alert(key);} else {//不含有运算符号if(key=="(i)"){//keym=KEY?true:false;} else {m=obj[key]?true:false;}}//alert(m);re=/\{if\:([\w]+)([^\}]*)\}((?:\n|\r|.)*?)\{else\}((?:\n|\r|.)*?)\{\/if\:\1\}/;//alert(r+":\n\n"+re.test(r));if(re.test(r)){// if else 结构tv=r.replace(re,function(R,a,b,c,d){vv=m?c:d;return R;});} else {//无else结构if(m){re=/\{if\:([\w]+)([^\}]*)\}((?:\n|\r|.)*?)\{\/if\:\1\}/;tv=r.replace(re,function(R,a,b,c){vv=c;return R;});//alert(vv);} else {vv="";}}// alert(vv);if(vv){ vv=parase(obj,vv,KEY); //alert(vv);}return vv;};F["loop"]= function(obj,key,tv,KEY){//loop运算：数组//return parase(obj[key],tv,key);obj=obj[key];//alert(obj.length);var t=T(obj);if(t>0){//return parase(obj,key);var v=[];if(t>1){//数组E["1"](obj,function(o,i){//alert(tv+"\n"+parase(o,tv,i));//alert(tv);v.push(parase(o,tv,i));});} else {E["0"](obj,function(o,i){v.push(parase(o,tv,i));});}//alert(v.join(""));return v.join("");} else {//待确定return obj;}};F["block"]= function(obj,key,tv){//单例块运算return parase(obj[key],tv,key);};/*模板解析函数*/function parase(V,S,KEY){//解析对象var t=T(V),rp;if(t<1){//非对象或数组，直接跳出rp=RT(S,KEY);//alert(t);if(rp>0){return R["3"](S,V,KEY);} else {return S;}}//alert(RE.test(S));//alert(t);var x,i,l,H=[],O={},o,a,k;//类型,属性名,比较值,模板值//开始查找模板块级元素S=S.replace(RE,function(r,type,key,cd,tv){//匹配结果,模板类型,[,属性名,],比较条件,模板值//alert(type+":"+key);if(key in V){//合法属性，开始运算return F[type](V,key,tv,KEY,cd,r);} else {//缓存未定义属性if(key=="(i)"){//alert(type+":"+key);//alert(KEY);return F[type](V,key,tv,KEY,cd,r);} else {H.push(r);return ul+H.length+ur;}}});rp=RT(S,KEY);//alert(S);if(rp>0){if(rp>1){S=S.split("{(i)}").join(KEY);}rp=R["3"];E[t](V,function(v,k){//key值待加S=rp(S,v,k,KEY);//alert(S);});}/*替换子对象属性值*/if(R1.test(S)){S.replace(R1,function(r,a){O[a]=r;return r;});var a;for(x in O) {a=x.split(".");i=0,l=a.length-1;if(l>0){o=V;for(; i<l;i++) {k=a[i];if(k in o){o=o[k];} else {o=null;break;}}if(o){k=a[l];if(k in o){S=S.split(O[x]).join(o[k]);}//$W(k);//S=S.split(O[x]).join(o[k]);}}}/*for(x in O) */}i=0,l=H.length;//还原未定义属性for(; i<l;i++) {S=S.split(ul+H.length+ur).join(H[i]);}return S;}function format(S,key,value){//解析字符串型S=S.split(fv).join(value).split(fk).join(key);return S;}S=S.replace(/(\{[^\}]+\}\s)\s+/g,"$1").replace(/\s+(\s\{[^\}]+\})/g,"$1");//S=S.replace(/[\n\r]*(\{[^\}]+\})[\n\r]*/g,"$1");//alert(S);return parase(V,S,0);});</script><script type="text/javascript">/*用法演示实例*/(function(lO){var Value={//JSON数据title: "模板解析演示实例",NAV: [{alias:"index",title:"网站首页"},{alias:"comic",title:"在线漫画"},{alias:"video",title:"视频动画"},{href:"http://www.aspxhome.com",title:"asp之家"},{href:"http://bbs.51js.com",title:"无忧脚本"}],author : {name:"CNLEI",email:"cnlei.y.l@gmail.com",url:"http:/www.cnlei.com"}};(function(NAV,alias){for(var i=0,l=NAV.length; i<l;i++) {if(("alias" in NAV[i]) && NAV[i].alias==alias){NAV[i].active=true;} else {NAV[i].active=false;}if(!("href" in NAV[i])){NAV[i].href="";}}})(Value.NAV,"comic");function test(){var html=document.getElementById("htmlTemplate").value;html=lO.template(Value,html);//模板替换document.getElementById("htmlResult").value=document.getElementById("htmlPreview").innerHTML=html;}document.getElementById("testButton").onclick=test;test();})(lJSF.Object);</script></body></html>

投稿

JavaScript模板解析演示实例

猜你喜欢