有个小的工作任务将给定的一个大的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;

本人不是专业的前端工程师，??，无奈 中......记录下，万一以后用到呢