2019獨角獸企業重金招聘Python工程師標準>>> 
有個小的工作任務將給定的一個大的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;java根據模板生成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;本人不是專業的前端工程師，??，無奈 中......記錄下，萬一以后用到呢
