由于前端工程越来越复杂,需要模板和数据的分离。
tpl.js是一个比较极致(极小,极快,极简单)的js模板引擎,可以在各种js环境中使用。
官网地址
简单的例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js模板</title>
<script src="js/jsTpl.js"></script>
</head>
<body>
<div class="result"> </div>
<script>
// 输出名字
var tmp = ' your name is {{this.name}}';
var ctx = {"name": "luck"};
var jstpl = new JsTpl(tmp);
document.querySelector('.result').innerHTML = jstpl.getCTpl().render(ctx);
// 循环
/* var tmp = `<table border="1">
{{for (var i = 0,len = this.score.length; i < len; i++):}}
<tr>
<td>{{this.score[i]['name']}}</td>
<td>{{this.score[i]['score']}}</td>
</tr>
{{endfor;}}
</table>`;
var ctx = {"score":[
{"name":"1", "score": "90"},
{"name":"2", "score": "91"},
{"name":"3", "score": "92"}
]};
var jstpl = new JsTpl(tmp);
document.querySelector('.result').innerHTML = jstpl.getCTpl().render(ctx);
*/
</script>
</body>
</html>