有个小的工作任务将给定的一个大的json文件转换为html页面展示，搜索了一下有一些js模板可以完成这个需求，上网搜索之有artTemplate（腾讯出品），baiduTemplate（百度出品），看了github上的更新记录，都是年久失修的，不过artTemplate相对来说用的人多，issue也多，决定采用这个附上地址，
主要看语法就是一些if和each遍历了，例如
使用一个type="text/html"的script标签存放模板：
<script id="test" type="text/html">
<h1>{{title}}</h1>
<ul>
{{each list as value i}}
<li>索引 {{i + 1}} ：{{value}}</li>
{{/each}}
</ul>
</script>
渲染模板
var data = {
title: '标签',
list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
};
var html = template('test', data);
document.getElementById('content').innerHTML = html;实例就是在页面中引入js文件，然后和普通的js没什么区别，写一个模板，然后调用template函数生成相应的html片段，然后嵌入到相应的位置就可以了，附上一个实例
<!-- 接口模板 -->
<script type="text/html" id="template_interface">
<div class="sub-nav">
{{each doc.list as value i}}
<ul class="sub-nav-items">
{{each doc.list[i] as value j}}
<li value="div{{j}}" class="nav-item"><a href="javascript:void(0);">{{j}}</a></li>
{{/each}}
</ul>
{{/each}}
</div>
<div>
{{each doc.list as value i}}
{{each doc.list[i] as value j}}
<div id="div{{j}}" class="re" style="display:none">
<label>接入说明</label><br/>
{{value.desc}}<br/>
<label>URL地址</label><br/>
<span class="url">{{value.url}}</span><br/>
<label>完整URL地址</label><br/>
<span class="url">{{value.full_url}}</span><br/>
<div class="arg"><label>请求参数</label></div>
<div>参数列表</div>
<table class="charge_data" style="word-break:break-all;font-size:14px;margin-top: 5px;">
<tbody id="outModelTrTbody">
<tr>
<th style="width:20%">名称</th>
<th style="width:15%">类型</th>
<th style="width:20%">示例值</th>
<th class="ms">描述</th>
</tr>
{{each value.request_params as value k}}
<tr class="outModelTr db">
<td key="pname">{{value.name}}</td>
<td key="type">{{value.type}}</td>
<td key="example">{{value.exp}} </td>
<td key="remark">{{value.detail}} </td>
</tr>
{{/each}}
</tbody>
</table>
<div class="arg"><label>返回值</label></div>
返回示例<br/>
<div id="json">{{value.result_exp}}</div>
<br/>
返回参数说明：<br/>
<table class="charge_data" style="word-break:break-all;font-size:14px;margin-top: 5px;">
<tbody id="outModelTrTbody">
<tr>
<th style="width:20%">名称</th>
<th style="width:15%">类型</th>
<th style="width:20%">示例值</th>
<th class="ms">描述</th>
</tr>
{{each value.response_params as value k}}
<tr class="outModelTr db">
<td key="pname">{{value.name}}</td>
<td key="type">{{value.type}}</td>
<td key="example">{{value.exp}} </td>
<td key="remark">{{value.detail}} </td>
</tr>
{{/each}}
</tbody>
</table>
</div>
{{/each}}
{{/each}}
</div>
</script>
<!-- 签名模板 -->
<script type="text/html" id="template_signature">
<div> 方法签名说明：{{signature.signature}}</div>
</script>
<!-- 错误码模板 -->
<script type="text/html" id="template_errorCode">
错误码说明:<br/>
<table class="charge_data" style="word-break:break-all;font-size:14px;margin-top: 5px;">
<tbody id="outModelTrTbody">
<tr>
<th style="width:20%">code</th>
<th class="ms">msg</th>
</tr>
{{each errorCode.list as value i}}
<tr class="outModelTr db">
<td key="pname">{{value.code}}</td>
<td key="remark">{{value.msg}}</td>
</tr>
{{/each}}
</tbody>
</table>
</div>
</script>
<!-- 演示模板 -->
<script type="text/html" id="template_example">
<div>
接口演示：<br/>
接口选择：<select id="select">
<option>选择接口</option>
<option>选择接口</option>
{{each doc.list as value i}}
{{each doc.list[i] as value j}}
<option rel="exp{{j}}" class="exp_se" value ="{{value.full_url}}">{{j}}</option>
{{/each}}
{{/each}}
</select>
</div>
<div>
{{each doc.list as value i}}
{{each doc.list[i] as value j}}
<div id="exp{{j}}" class="exp" style="display:none">
<form action="#" method="post">
参数<br/>
{{each value.request_params as value k}}
{{value.name}}：<input type="text" placeholder="{{value.exp}}"></input>
{{if value.is_need ==1 }}必填{{/if}}
<br/>
{{/each}}
<div class="in" id="invokeResultDiv">
<span style="width:200px;">返回结果：</span>
<textarea readonly="" style="overflow-y: auto; height: 80px;">
</textarea>
</div>
<input type="button" class="sub" id="testbtn" value="提交信息" style="margin-left:200px;">
</form>
</div>
{{/each}}
{{/each}}
</div>
</script>
<script>
var data = {doc:{list:[{"用户接口一":
{
"desc":"接口使用说明xxxxxxxxxxxxx",
"url":"/date/test",
"full_url":"http://test.sds/date/test",
"request_params":[
{"name":"name1","type":"int","exp":"13","detail":"说明","is_need":"1"},
{"name":"name2","type":"int","exp":"15","detail":"说明","is_need":"0"}
],
"result_exp":{"hey": "guy",
"anumber": 243,
"anobject": {
"whoa": "nuts",
"anarray": [1, 2, "thr<h1>ee"],
"anotherarray": [1, 2],
"more": "stuff"
},
"awesome": true,
"bogus": false,
"meaning": null,
"japanese": "明日",
"link": "http://jsonview.com",
"notLink": "http://jsonview.com is great"},
"response_params":[{"name":"name1","type":"int","exp":"13","detail":"说明"},
{"name":"name2","type":"int","exp":"15","detail":"说明"}
]
}},
{"interface_2":{}}]},
signature:{signature:"必传,source=1000x, sign_type=md5/token, sign=xxxxxx,使用token校验参数时候 uid为必传参数"},
errorCode:{list:[{"code":"10000","msg":"success"},{"code":"100002","msg":"failed"},{"code":"100003","msg":"unknow"}]}
};
var html = template('template_interface', data);
document.getElementById('interface_result').innerHTML = html;
var html = template('template_signature', data);
document.getElementById('signature_result').innerHTML = html;
var html = template('template_errorCode', data);
document.getElementById('errorCode_result').innerHTML = html;
var html = template('template_example', data);
document.getElementById('example_result').innerHTML = html;本人不是专业的前端工程师，??，无奈 中......记录下，万一以后用到呢
876
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
