template.js 数据渲染引擎
template.js是一款JavaScript模板引擎，用来渲染页面的。
原理：提前将Html代码放进编写模板
<script id="tpl" type="text/html"></script>
中，当需要渲染页面时，在js里这样调用：
var tpl = document.getElementById(‘tpl‘).innerHTML; template(tpl, data});
template.js开始标签默认为<%，结束标签默认为%>，显示数据为<%= i %>。
下面是使用template.js v0.7.1版本的实验结果：
1、遍历数组显示数据：
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title></title></head><body> ???<div id="wp"></div> ???<script id="tpl" type="text/html"> ?????<ul> ??????<%for(var i in items){%> ?????????<li> ???????name:<%=items[i].name%> ???val:<%=items[i].val%> ???</li> ???<%}%></ul></script><script src="../template.js"></script><script> ?var data={ ???items:[{‘name‘:‘名字一‘,‘val‘:‘数据一‘}, ???{‘name‘:‘名字二‘,‘val‘:‘数据二‘}, ???{‘name‘:‘名字三‘,‘val‘:‘数据三‘}, ???{‘name‘:‘名字四‘,‘val‘:‘数据四‘} ???]}var html = template(document.getElementById(‘tpl‘).innerHTML,data);document.getElementById(‘wp‘).innerHTML = html;</script></body></html>2、模拟子模板
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>模拟子模版</title></head><body> ???<div id="wp"></div> ???<script id="tpl" type="text/html"> ??????<h1>国内新闻</h1> ??????<%:=newsListTpl({list: list1, tpl: childTpl})%> ??????<h1>国际新闻</h1> ??????<%:=newsListTpl({list: list2, tpl: childTpl})%> ??</script> ??<script id="child-tpl" type="text/html"> ???<ul> ???????<% for(i in list){ %> ???????<li><%=list[i].title%> ??<%=list[i].desc%></li> ???????<% } %> ???</ul></script><script src="../template.js"></script><script> ???var childTpl = template(document.getElementById(‘child-tpl‘).innerHTML); ???var data={ ???????newsListTpl: childTpl, ???????list1: [ ???????{title: ‘国内标题1‘, desc: ‘国内描述1‘}, ???????{title: ‘国内标题2‘, desc: ‘国内描述2‘}, ???????{title: ‘国内标题3‘, desc: ‘国内描述3‘}, ???????], ???????list2: [ ???????{title: ‘国际标题1‘, desc: ‘国际描述1‘}, ???????{title: ‘国际标题2‘, desc: ‘国际描述2‘}, ???????{title: ‘国际标题3‘, desc: ‘国际描述3‘}, ???????], ???} ???console.log(data); ???var html = template(document.getElementById(‘tpl‘).innerHTML,data); ???document.getElementById(‘wp‘).innerHTML = html;</script></body></html>3、子模板里面的子模板
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>模拟子模版</title></head><body> ???<div id="wp"></div> ???<script id="tpl" type="text/html"> ????<h1>国内新闻</h1> ????<%:=listTpl({list: list1, tpl: subChildTpl})%> ????<h1>国际新闻</h1> ????<%:=listTpl({list: list2, tpl: subChildTpl})%> </script> <script id="child-tpl" type="text/html"> ???<ul> ???????<% for(i in list){ %> ???????????<%:=tpl(list[i])%> ???????<% } %> ???</ul></script><script id="sub-child-tpl" type="text/html"> ???<li> ???????<%=title%> ?<%=desc%> ???</li></script><script src="../template.js"></script><script> ???var childTpl = template(document.getElementById(‘child-tpl‘).innerHTML); ???var subChildTpl = template(document.getElementById(‘sub-child-tpl‘).innerHTML); ???var data={ ???????listTpl: childTpl, ??????newsChildTpl:subChildTpl, ???????list1: [ ???????{title: ‘国内标题1‘, desc: ‘国内描述1‘}, ???????{title: ‘国内标题2‘, desc: ‘国内描述2‘}, ???????{title: ‘国内标题3‘, desc: ‘国内描述3‘}, ???????], ???????list2: [ ???????{title: ‘国际标题1‘, desc: ‘国际描述1‘}, ???????{title: ‘国际标题2‘, desc: ‘国际描述2‘}, ???????{title: ‘国际标题3‘, desc: ‘国际描述3‘}, ???????], ???} ???console.log(data); ???var html = template(document.getElementById(‘tpl‘).innerHTML,data); ???document.getElementById(‘wp‘).innerHTML = html;</script></body></html>template.js 数据渲染引擎
原文地址：https://www.cnblogs.com/s313139232/p/9474838.html