tianqiq-tpl.js
/
index.html

<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1,user-scalable=no" />
  <link href="pure-min.css" rel="stylesheet" type="text/css" />
  <script type="text/javascript" src="tpl.min.js"></script>
 </head>
 <body>
<header>
</header>
<section>
   <div id="result"></div>
   <div id="view"></div>
   <div class="pure-g-r">
<script type="tpl" id="tpl">
	for(var i=0;i<12;i++){
		var j=i+1;
		<div class='pure-u-1-3'>
			<span>
				<a href="http://www.baidu.com/s?w=@{i}eee" target="_blank">@i</a>
			</span>

		</div>
	}

	<select>
		for(var i in data){
			var item = data[i];
			<option value="@item.name">@item.time</option>
		}
	</select>

	<table class='pure-table'>
		<thead>
			<th>名字</th>
			<th>时间</th>
		</thead>
		for(var i in data){
			var item = data[i];
			<tr>
				<td>@item.name</td>
				<td>@item.time</td>
			</tr>
		}
	</table>
</script>


<script type="tpl">

	for(var i=0;i<12;i++){
		var j=i+1;
		<div class='pure-u-1-3'>
			<span>
			!你妹的@j
			</span>
		</div>
	}

	<select>
		for(var i in data){
			var item = data[i];
			<option value="@item.name">@item.time</option>
		}
	</select>

	<table class='pure-table'>
		for(var i in data){
			var item = data[i];
			<tr>
				<td>@item.name</td>
				<td>@item.time</td>
			</tr>
		}
	</table>
</script>

</div>


通过ajax获取数据<br>
<script type="tpl" id="id" data-data-url='./users.js' data-tpl-url='./u.html?v'>

</script>


<script>
var data = [];

for(var i = 0;i<20;i++){
	data.push({name:"name" +i,time:i*102});
}

var start = new Date().getTime();

//最简使用方法
var html = tpl.html(document.getElementById('tpl').innerHTML);

tpl.render();


var compile = new Date().getTime();
//渲染
document.getElementById('view').innerHTML = html;

var end = new Date().getTime();

var compile_time = compile - start;
var render_time = end - compile;

document.getElementById('result').innerHTML = "模版编译(string拼接html)时间：" + compile_time + "毫秒<br/>模版渲染(html插入dom)时间：" + render_time + "毫秒";


</script>
 </body>
</html>