Juicer模板引擎实战-优快云博客

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>