当前位置: 首页 > Web前端 > HTML5

14行实现js原生语法前端模板引擎

时间:2023-04-05 16:52:20 HTML5

最近在前端开发中用到的前端模板引擎;已经使用的TPPL模板引擎源码如下:functiontppl(tpl,_data){tpl=tpl.replace(/(<)/g,"<").replace(/(&)/g,"&").replace(/(>)/g,">");变种数据=_数据||{};如果(数据类型!==“对象”){控制台。log("TEFinal->数据不是JSON对象");返回空值;}varfn=function(d){vari,k=[],v=[];for(iind){k.push(i);v.push(d[i]);}returnnewFunction(k,fn.$).apply(d,v);};如果(!fn.$){vartpls=tpl.split('');fn.$="var$empty='';var$reg=RegExp(/object|undefined|function/i);var$=''";for(vartintpls){varp=tpls[t].split('');如果(t!=0){fn.$+='='==p[0].charAt(0)?"+($reg.test(typeof("+p[0].substr(1)+"))?$empty:"+p[0].substr(1)+")":";"+p[0].替换(/\r\n/g,'')+"$=$";}fn.$+="+'"+p[p.length-1].replace(/\'/g,"\\'").replace(/\r\n/g,'\\n').replace(/\n/g,'\\n').replace(/\r/g,'\\n')+"'";}fn。$+=";返回$;";}返回数据?该包可以直接访问外部变量,所以经过整理,发布了模板引擎终极版,代码如下:functionevalTE(tpl,data){tpl=tpl.replace(/^\s+|\s+$/gm,'').replace(/\r\n/g,'').replace(/\n/g,'').replace(/\r/g,'').replace(/(<)/g,'<').replace(/(&)/g,'&').replace(/(>)/g,'>');varfn='(function(){var$$=\'\'',evals=tpl.split('');for(vartinevals){varp=evals[t].split('');if(t!=0){fn+='='==p[0].charAt(0)?'+'+p[0].substr(1):';'+p[0]+'$$=$$';}fn+='+\''+p[p.length-1]+'\'';}fn+=';return$$;})();';返回数据?eval(fn):fn;}通过eval()自执行函数,函数可以访问外部数据数据;如果没有传递要渲染的数据,则可以返回自执行函数字符串。当需要渲染时,可以通过eval()或newFunction()调用