下载地址 https://www.aliyundrive.com/s/GhWReFU6bAx
template-web.js是一个模板引擎，简单来说就是在页面上创建一个模板，然后我们把数据填上去显示在页面上。
一.获得了一个对象直接调用
<body>
<div id="box">
<p>以下为测试数据</p>
<div id ="Render"></div>
</div>
<script src="./jquery.js"></script>
<script src="./template-web.js"></script>
<script type="text/html" id="Render_txt">
<div>{{a}}</div>
<div>{{b}}</div>
<div>{{c}}</div>
</script>
<script src="./测试.js"></script>
</body>
$(function () {
let res = { a: "123", b: "456", c: "789" };
var Render_txt = template("Render_txt", res)
$("#Render").html(Render_txt)
})
image.png
二.获得了一个列表循环调用
<body>
<div id="box">
<p>以下为测试数据</p>
<div id ="Render"></div>
</div>
<script src="./jquery.js"></script>
<script src="./template-web.js"></script>
<script type="text/html" id="Render_txt">
{{each list}}
<div>{{$value.a}}</div>
<div>{{$value.b}}</div>
<div>{{$value.c}}</div>
{{/each}}
</script>
<script src="./测试.js"></script>
</body>
$(function () {
// let res = { a: "123", b: "456", c: "789" };
// var Render_txt = template("Render_txt", res)
// $("#Render").html(Render_txt)
let res = [
{ a: "1", b: "2", c: "3" },
{ a: "11", b: "22", c: "33" }
]
var Render_txt = template("Render_txt", { list: res })
$("#Render").html(Render_txt)
})
image.png
其他：有的时候我们在使用模板的时候可能会报错，因为很多的框架内置了模板语法，所以如果需要使用该模板的话可能需要对兼容性进行一些设置，比如在django框架中需要在模板中就需要如下修改：
<script type="text/html" id="Render_txt">
{% verbatim %}
......
{% endverbatim %}
</script>
且 <script type="text/html" id="Render_txt"> </script>中间不能有注释，否则会报错
