juicer
<!DOCTYPE html> <html> <head> <title>Juicer</title> <meta charset="utf-8" /> <script type="text/javascript" src="juicer.js"></script> </head> <body> <script id="tpl" type="text/template"> <ul> {@each list as it} <li>${it.name} </li> {@/each} {@each blah as it } <li> num:${it.num}<br /> {@if it.num==3} {@each it.inner as it2} {it2.time}<br /> {@/each} {@/if} </li> {@/each} </ul> </script> <!--建立一个div来接收渲染结果--> <!--<div id="result"></div>--> <script type="text/javascript"> var data={ list:[ {name:'firstname',show:true}, {name:'secondname',show:false}, {name:'thirdname',show:true} ], blah:[ {num:1}, {num:2}, {num:3,inner:[ {'time':'15:00'}, {'time':'16:00'}, {'time':'17:00'}, {'time':'18:00'} ]}, {num:4} ] }; var tpl=document.getElementById("tpl").innerHTML; var html=juicer(tpl,data); //得到渲染结果,需要放到DOM元素中才能在页面中显示 //console.log(html)//编译模板并立即渲染出结果,官方文档少了这一块,所以看不到结果 document.write(html); </script> </body> </html>
---------------------------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <script type="text/javascript" src="juicer.js"></script> <body> <script type="text/javascript"> var data= { list : [ {name : '手机' , show : true}, {name : '电脑' , show : false}, {name : '照相机' , show : true} ], blah : [ {num : 1}, {num : 2}, {num : 3}, {num : 4 , inner : [ {'time' : '12:00'}, {'time' : '13:00'}, {'time' : '14:00'}, ]}, {num : 5} ] }; var tpl = [ '<ul>', '{@each list as item, k}', '<li>', '${item.name} (index = ${k})', '</li>', '{@/each}', '{@each blah as bl}', '<li>', 'num : ${bl.num} <br/>', '{@if bl.num == 4}', '{@each bl.inner as bl2}', '${bl2.time} <br />', '{@/each}', '{@/if}', '</li>', '{@/each}', '</ul>' ].join('\n'); var inc=function(n) { return n+1; }; //sts maven mavenku redis YTStdio.jar var starttimestamp=new Date().getTime(); juicer.set('cache',true); juicer.set('errorhandling',false); juicer.set('strip',true); juicer.set('detection',false); for(var i=0;i<1000;i++) { juicer(tpl,data); } var endtimestamp=new Date().getTime(); var exhausttime=endtimestamp-starttimestamp; document.write(juicer(tpl,data)); document.write('run time: '+exhausttime); console.log(juicer(tpl).render.toString()); console.log(exhausttime); //document.write(juicer(tpl,data)); </script> </body> </html>
---------------------------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>juicer</title> <script type="text/javascript" src="juicer-min.js"></script> </head> <body> <script type="text/javascript"> var json = { links: [ {href: 'http://juicer.name', alt: 'Juicer'}, {href: 'http://benben.cc', alt: 'Benben'}, {href: 'http://ued.taobao.com', alt: 'Taobao UED'} ] }; var tpl = [ '{@each links as item}', '${item|links_build} <br />', '{@/each}' ].join(''); var links = function(data) { return '<a href="' + data.href + '" alt="' + data.alt + '" />'; }; juicer.register('links_build', links); //注册自定义函数 var html = juicer(tpl, json); document.write(html); </script> </body> </html>
juicer——Demo
最新推荐文章于 2023-02-28 15:28:26 发布