在写Web程序时，想简单处理会使用JS模板，常用的是Jquery的jquery.tmpl.js插件。整个插件还是比较好用的，后续有机会结合实际应用案例，分享下应用方法。
本次文章想分享的一点是其中的一个很小的细节：支持行标index。
具体的使用场景是：通过表格展示数据，同时第一列为序号，会存在删除、新增行的按钮操作。
<!DOCTYPE html>
<html>
<head>
<script src="../_common/jquery-1.12.2.min.js"></script>
<script src="../_common/jquery.tmpl.min.js"></script>
</head>
<body>
<table id="list">
<tr class="tableHead">
<td>序号</td>
<td>名称</td>
<td>代码</td>
<td>类型</td>
</tr>
</table>
<script id="tmp" type="text/x-jquery-tmpl">
<tr>
<td>${Number(id)+}</td>
<td>${name}</td>
<td>${code}</td>
<td>${type}</td>
</tr>
</script>
<script type="text/javascript">
$(document).ready(function () {
var list = [
{ id:"", name: "javascript", code: "001", type: "web" },
{ id:"", name: "asp.net", code: "004", type: "server" },
{ id:"", name: "sql", code: "005", type: "db" }
];
$("#tmp").tmpl(list).appendTo("#list");
});
</script>
</body>
</html>
如上，如果要实现行序号，则需要在数据集合中加入一个属性返回行号，这样就会导致非常麻烦。当存在删除或新增行时，若要刷新展示，还需要刷新数据的id属性，不方便操作。其实如果能够利用table的rowindex或者其他的方式，可以较好的利用dom属性或数组index来处理，那就会方便很多了。
基于此思路，我们改造jquery.tmpl.js的tmpl函数。如下图，对于未压缩的插件源码，处理如下：
为了避免数据集合中存在index对象，故特意加了一个$以作区分，使用时用$index属性进行取值即可。
若是需要改造jquery.tmpl.min.js，由于做了代码混淆，搜索map函数，第一个调用的地方按照如上逻辑调整即可。
调整后的调用方式：
<!DOCTYPE html>
<html>
<head>
<script src="../_common/jquery-1.12.2.min.js"></script>
<script src="../_common/jquery.tmpl.min.js"></script>
</head>
<body>
<table id="list">
<tr class="tableHead">
<td>序号</td>
<td>名称</td>
<td>代码</td>
<td>类型</td>
</tr>
</table>
<script id="tmp" type="text/x-jquery-tmpl">
<tr>
<td>${$index+}</td>
<td>${name}</td>
<td>${code}</td>
<td>${type}</td>
</tr>
</script>
<script type="text/javascript">
$(document).ready(function () {
var list = [
{ name: "javascript", code: "001", type: "web" },
{ name: "asp.net", code: "004", type: "server" },
{ name: "sql", code: "005", type: "db" }
];
$("#tmp").tmpl(list).appendTo("#list");
});
</script>
</body>
</html>
如上为新的调用方式，是不是方便了很多。