只有20行Javascript代码!手把手教你写一个页面模板引擎.pdf

?Javascript?Web?AbsurdJS?CSS?CSS?HTML?Javascript?CSS?HTML?HTML?AbsurdJS?NodeJS?NodeJS?Javascript?John Resig?20?John?1.var TemplateEngine=function(tpl,data)2./magic here.3.4.var template=Hello,my name is.Im years old.;5.console.log(TemplateEngine(template,6.name:Krasimir,7.age:29 8.);?1.Hello,my name is Krasimir.Im 29 years old.?1.var re=/+)?%/g;?g?global?Javascript?exec?1.var re=/+)?%/g;2.var match=re.exec(tpl);?console.log?match?1.2.,3.name,4.index:21,5.input:6.Hello,my name is.Im years old.7.?while?1.var re=/+)?%/g;2.while(match=re.exec(tpl)3.console.log(match);4.?replace?1.var TemplateEngine=function(tpl,data)2.var re=/+)?%/g;3.while(match=re.exec(tpl)4.tpl=tpl.replace(match0,datamatch1)5.6.return tpl;7.?dataproperty?data?1.2.name:Krasimir Tsonev,3.profile:age:29 4.?dataprofile.age?undefined?replace?Javascript?1.var template=Hello,my name is.Im years old.;?John?new Function?1.var fn=new Function(arg,console.log(arg+1););2.fn(2);/outputs 3 fn?console.log(arg+1);?1.var fn=function(arg)2.console.log(arg+1);3.4.fn(2);/outputs 3?1.return 2.Hello,my name is +3.this.name+4.Im +5.this.profile.age+6.years old.;?Javascript?100%?Javascript?1.var template=2.My skills:+3.+4.+5.;?1.return 2.My skills:+3.for(var index in this.skills)+4.+5.this.skillsindex+6.+7.?John?1.var r=;2.r.push(My skills:);3.for(var index in this.skills)4.r.push();5.r.push(this.skillsindex);6.r.push();7.8.return r.join();?cursor?1.var TemplateEngine=function(tpl,data)2.var re=/+)?%/g,3.code=var r=;n,4.cursor=0;5.var add=function(line)6.code+=r.push(+line.replace(/g,)+);n;7.8.while(match=re.exec(tpl)9.add(tpl.slice(cursor,match.index);10.add(match1);11.cursor=match.index+match0.length;12.13.add(tpl.substr(cursor,tpl.length-cursor);14.code+=return r.join();/-return the result 15.console.log(code);16.return tpl;17.18.var template=Hello,my name is.Im years old.;19.console.log(TemplateEngine(template,20.name:Krasimir Tsonev,21.profile:age:29 22.);?code?cursor?add?code?code?escape?1.var r=;2.r.push(Hello,my name is);3.r.push(this.name);4.r.push(.Im);5.r.push(this.profile.age);6.return r.join();?this.name?this.profile.age?1.var add=function(line,js)2.js?code+=r.push(+line+);n:3.code+=r.push(+line.replace(/g,)+);n;4.5.while(match=re.exec(tpl)6.add(tpl.slice(cursor,match.index);7.add(match1,true);/-say that this is actually valid js 8.cursor=match.index+match0.length;9.?add?1.var r=;2.r.push(Hello,my name is);3.r.push(this.name);4.r.push(.Im);5.r.push(this.profile.age);6.return r.join();?1.return new Function(code.replace(/rtn/g,).apply(data);?apply?this.name?this?data?1.var template=2.My skills:+3.+4.+5.;6.console.log(TemplateEngine(template,7.skills:js,html,css 8.);?Uncaught SyntaxError:Unexpected token for?code?1.var r=;2.r.push(My skills:);3.r.push(for(var index in this.skills);4.r.push();5.r.push(this.skillsindex);6.r.push();7.r.push();8.r.push();9.return r.join();?for?code?1.var re=/+)?%/g,2.reExp=/()?(if|for|else|switch|case|break|)(.*)?/g,3.code=var r=;n,4.cursor=0;5.var add=function(line,js)6.js?code+=line.match(reExp)?line+n:r.push(+line+);n:7.code+=r.push(+line.replace(/g,)+);n;8.?if?for?else?1.var r=;2.r.push(My skills:);3.for(var index in this.skills)4.r.push();5.r.push(this.skillsindex);6.r.push();7.8.r.push();9.return r.join();?1.My skills:jshtmlcss?1.var template=2.My skills:+3.+4.+5.+6.+7.+8.none+9.;10.console.log(TemplateEngine(template,11.skills:js,html,css,12.showSkills:true 13.);?1.var TemplateEngine=function(html,options)2.var re=/+)?%/g,reExp=/()?(if|for|else|switch|case|break|)(.*)?/g,code=var r=;n,cursor=0;3.var add=function(line,js)4.js?(code+=line.match(reExp)?line+n:r.push(+line+);n):5.(code+=line!=?r.push(+line.replace(/g,)+);n:);6.return add;7.8.while(match=re.exec(html)9.add(html.slice(cursor,match.index)(match1,true);10.cursor=match.index+match0.length;11.12.add(html.substr(cursor,html.length-cursor);13.code+=return r.join();14.return new Function(code.replace(/rtn/g,).apply(options);15.?15?