由於前端工程越來越複雜,需要模板和數據的分離。
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>