容易的js模板
简单的js模板
简单的js模板实现，不支持for循环和if判断哪些
<!doctype html>
<html>
<head>
<meta charset=utf-8>
<title>Simple Templating</title>
</head>
<body>
<div id="content" style="border:1px solid red;"></div>
<script type="template" id="template">
<h2>
<a href="{{href}}">
{{title}}
</a>
</h2>
<img src="{{imgSrc}}" alt="{{title}}">
</script>
<script type="text/javascript">
var data = [
{
title : 'php web appliaction',
href : 'http://www.baidu.com',
imgSrc : 'http://www.baidu.com'
},
{
title : 'js 权威指南',
href : 'http://www.qq.com',
imgSrc : 'http://www.qq.com'
}];
var template = document.querySelector('#template').innerHTML;
function _template(template, data){
var i = 0,
len = data.length,
fragment = '';
function replace(obj){
var t, key, reg;
for(key in obj){
reg = new RegExp('{{' + key + '}}', 'ig');
t = (t || template).replace(reg, obj[key]);
}
return t;
}
for(; i < len; i++){
fragment += replace(data[i]);
}
return fragment;
}
console.log(_template(template, data));
document.querySelector("#content").innerHTML=_template(template, data);
</script>
</body>
</html>
自己业务使用改进了下
/模板方法
function _temp(template, data){
var i = 0,
fragment = '';
function status(v){
var str =v ;
if(v==0){
str="审批不通过";
}else if(v==1){
str="审批中";
}else if(v==2){
str="放款成功";
}else if(v==3){
str="放款失败";
}else if(v==4){
str="支付成功";
}else if(v==5){
str="支付失败";
}else if(v==6){
str="已受理";
}
return str;
}
function replace(obj){
var t, key, reg,v;
for(key in obj){
reg = new RegExp('{{' + key + '}}', 'ig');
if(key=="STATUS"){
v=status(obj[key]);
}else if(key=='LOAN_DATE'){
v=new Date(obj[key]).format("yyyy-MM-dd hh:mm:ss");
}else if(key=='LOAN_EXPIRE'){
v=new Date(obj[key]).format("yyyy-MM-dd");
}else{
v=obj[key];
}
t = (t || template).replace(reg, v);
}
return t;
}
fragment += replace(data);
return fragment;
}