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>