简易JS模板引擎实践-优快云博客

本文链接：https://blog.youkuaiyun.com/hqmln/article/details/84720840

简单的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;
}