js模板渲染

js模板：两个全局函数：

$getTpl = (function() {
function a(h, g) {
h = h.replace(/[\n\r]/g, "");
var d = h.match(/<!--(.*?)\/\*(.*?)\*\/(.*?)\1-->/gi);
var c = {};
if (!d) {
return [];
}
for (var f = 0; f < d.length; f++) {
var e = d[f].match(/(.*?)\/\*(.*?)\*\/(.*)\1/i);
c[e[1]] = e[3].replace(/^\s*/, "").replace(/\d*$/, "");
}
return c;
}
return function(d) {
var b = $id("tpl_" + d);
var c = a( b ? b.innerHTML : "", true);
return c;
};
})();

==============================================

$formatTpl = (function() {
return function(a, c) {
var b = new Function("obj", "var p=[],print=function(){p.push.apply(p,arguments);};with(obj){p.push('" + a.replace(/[\r\t\n]/g, " ").split("<%").join("\t").replace(/((^|%>)[^\t]*)'/g, "$1\r").replace(/\t=(.*?)%>/g, "',$1,'").split("\t").join("');").split("%>").join("p.push('").split("\r").join("\\'") + "');}return p.join('');");
return c ? b(c) : b;
};
})();

===================================

获取data对象:-->   tpl:$getTpl("list")。

html里循环模板：

====================

<script type="text/html" id="tpl_list">    //--->1）tpl 是一个约定，2）list是自定义，但要对应tpl:$getTpl("list")里的list,这里tpl获取了两个模板。
<!--fileList/*发布单文件列表*/
<table class="list_table">
<thead>
<tr>
<th width="44px">选择</th>
<th>发布单名称</th>
<th width="80px">项目</th>
<th width="150px">发布操作</th>
<th width="80px">创建人</th>
<th width="80px">发布人</th>
<th width="44px">状态</th>
<th width="150px">创建时间</th>
<th width="150px">发布时间</th>
</tr>
</thead>
<tbody>
<%for(var i=0,len=list.length;i<len;i++){         //这里的list也是自定义，定义对象。
var item=list[i];
%>
<tr>
<td><input type="checkbox" name="pubid" value=""/></td>
<td><a href="#nolink"><%=item.name%></a></td>
<td><%=item.prj%></td>
<td><%if(item.type=="pub"){%>发布：<%=envMap[item.oenv]%>--&gt;<%=envMap[item.denv]%><%}else{%>删除：<%=envMap[item.denv]%><%}%></td>
<td><%=item.createuser%></td>
<td><%=item.execuser%></td>
<td><%=stausMap[item.state]%></td>
<td><%=formatDate(item.create_at)%></td>
<td><%=formatDate(item.execute_at)%></td>
</tr>
<%
}
%>
</tbody>
</table>
fileList-->

<!--ssss/*test*/             //第二个模板
dfasfdsa
ssss-->

</script>

====================================

渲染函数：--->

$.ajax({
url:"/api/porder/getlist",
data:{
project:prj,
type:typeVal,
oenv:"",
execuid:secUserVal,
createuid:pubUserVal,
create_at:buildVal,
execute_at:secVal,
state:staVal,
page:1,
psize:30
},
dataType:"json",
type:"get",
success:function(data){
if(data&&data.returnCode=="0"){
//渲染
that.dom.fileList.innerHTML=$formatTpl(that.data.tpl.fileList,{list:data.data.list,formatDate:that.formatDate,envMap:{dev:"开发机",beta:"测试机",idc:"生产机"},stausMap:["","新建","成功","失败","删除"]});  

 //输出的data。调用$formatTpl函数。that.data.tpl.fileList：获取tp1对象第一个值“fileList”.,,,list,对应模板上面自定义的list,formatDate是外部格式日期函数，envMap是自定义的对象，使模板上可以映射相应的值，同样stausMap也是。
}else{
alert("保存单出错");
}
},
error:function(){
alert("查询出错");
}
});

});

=============

formatDate函数

formatDate:function(dateNum){
var date=new Date(dateNum*1000);
return date.getFullYear()+"-"+fixZero(date.getMonth()+1,2)+"-"+fixZero(date.getDate(),2)+" "+fixZero(date.getHours(),2)+":"+fixZero(date.getMinutes(),2)+":"+fixZero(date.getSeconds(),2);
function fixZero(num,length){
var str=""+num;
var len=str.length;
var s="";
for(var i=length;i-->len;){
s+="0";
}
return s+str;
}
}