半杯可乐
半杯可乐
  • 发布:2015-05-29 23:16
  • 更新:2015-05-29 23:16
  • 阅读:5411

[分享]简单使用模板,代替字符串拼接。

分类:MUI

1.移动互联网应用非常重要的是网络数据的交互,而获取的数据如何转化为我们希望的页面效果,使我们这节课讨论的重点。我们使用固定的数据源做演示。
2.经常会将数据在前台展示,一般情况下,我们会拼接字符串,或者使用第三方提供的模板引擎,这里我们推荐一种简单粗暴的方式(不建议使用到大项目中),但是对于中小型项目可以考虑使用。
其思想和模板引擎的思想类似,没有那么复杂。

直接说如何使用:
①引入JS
②定义模板
③加载数据
④对特殊数据处理(回调函数)
代码中有注释,很容易理解。

html文件  
<html>  
	<head>  
		<title></title>  
		<meta charset="utf-8">  
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">  
		<link rel="stylesheet" type="text/css" href="../static/styles/mui.min.css" />  
		<link rel="stylesheet" href="../static/styles/ui-box.css">  
		<link rel="stylesheet" href="../static/styles/ui-base.css">  
		<link rel="stylesheet" href="../static/styles/ui-input.css">  
		<link rel="stylesheet" href="../static/styles/style.css">  
		<link rel="stylesheet" href="../static/styles/infor.css">  
		<link rel="stylesheet" type="text/css" href="../static/styles/animate.min.css" />  
	</head>  
	<body class="um-vp c-gra1">  
		<div class="mui-content">  
			<div class="ub-f1">  
				<table class='listTable' border='0' cellpadding='0' cellspacing='0' id="cminfo">  
  
				</table>  
			</div>  
		</div>  
	</body>  
	<script src="../static/scripts/mui.min.js" type="text/javascript" charset="utf-8"></script>  
	<script src="../static/scripts/zy_tmpl.js" type="text/javascript" charset="utf-8"></script>  
	<script type="text/javascript">  
		(function($, doc) {  
			$.init();  
			//$.plusReady(function() {  
				//数据加载(这里演示就不从后台获取了,直接将获取的数据拿过来)  
				var data = '[{"id":"43743","cm_id":"0011504030001","cm_areaname":"0.001.001.001.001.003","cm_name":"毕祖辉","cm_tel":"","cm_work_tel":"8570269","cm_color":"10","fphoto":"","cm_sex":"男"},{"id":"43762","cm_id":"0011504030002","cm_areaname":"0.001.001.001.002","cm_name":"严丽华","cm_tel":"","cm_work_tel":"6110357","cm_color":"11","fphoto":"","cm_sex":"女"},{"id":"43709","cm_id":"0011504030001","cm_areaname":"0.001.001.001.001","cm_name":"马强","cm_tel":"","cm_work_tel":"5946083","cm_color":"12","fphoto":"","cm_sex":"男"},{"dataCount":"4731"}]';  
				//转化为JSON对象  
				var dataObj = JSON.parse(data);  
				var dataCount = dataObj.pop();//数据总数量,不是本数据数量(直接忽略)  
				//定义模板  
				var t = _t.toString();  
				var tmp = t.substr(17,t.length-21);  
				//加载数据 参数解释(模板,数据数量,回调函数[可以不传]);  
				var res = tmpl(tmp,dataObj,tmpl_count(dataObj),tmpCallBack);  
				doc.querySelector('#cminfo').innerHTML = res;  
			//})  
			function _t(){/*  
				<tr id='${id}' cm_id='${cm_id}' cm_areaname='${cm_areaname}' style="color:${cb:cm_color}">  
				<td class="preTd">  
				<img src='${cb:fphoto}' class='preIcon uc-a2'></td>  
				<td class="td_name_style">  
				<div class="td_div">${cm_name}</div>  
				<p class="ulim">${cb:cm_tel}</p></td>  
				<td onclick="dialPhone('${cb:cm_tel}')" class='more' width='10%'><img src='../static/imgs/call.png' class='lastIcon'></td>  
				</tr>  
			*/}  
			function tmpCallBack(a,b)  
			{  
				switch (b[1]){  
					case 'cm_tel':  
						return !isNull(a.cm_tel)?a.cm_work_tel:a.cm_tel;  
						break;  
					case "fphoto":  
						if(!isNull(a.fphoto))  
						{  
							var src = a.cm_sex&&~(a.cm_sex).indexOf('女')?"../static/imgs/head-picn.png":"../static/imgs/head-pic.png";  
							return src;  
						}else{  
							return a.fphoto;//如果有则先加载到本地  
						}  
						break;  
					case "cm_color":  
						return !isNull(a.cm_color)?'':HTMLColor(a.cm_color);  
						break;  
					default:  
						break;  
				}  
				return '';  
			}  
			//下面的方法可以写为公共的方法  
			function isNull(value)  
			{  
				if(value == null || value == "" || value == "undefined" || value == undefined || value == "null" || value == "(null)" || value == 'NULL' || typeof(value) == 'undefined'){  
			        return false;  
			    }  
			    else{  
					value = value+"";  
			        value = value.replace(/\s/g,"");  
			        if(value == ""){  
			            return false;  
			        }  
			        return true;  
    				}  
			}  
			function HTMLColor(num)  
			{  
				var htmlColor = ",Aqua,Black,Blue,Fuchsia,Gray,Green,Lime,Maroon,Navy,Olive,Purple,Red,Silver,Teal,White,Yellow";  
				var hcs = htmlColor.split(",");  
				return num > 0 && num < hcs.length ? hcs[num] : '' ;  
			}  
		}(mui, document))  
	</script>  
</html>
tmpl.js文件  
  
	var tmpl_count=function(dd)  
	{  
		if(Object.prototype.toString.apply(dd)==="[object Array]")  
		{  
			return dd.length;  
		}  
		else  
		{	  
			var c=0;  
			for(var i in dd)  
				c++;  
			return c;  
		}  
	}	  
	var _f = function(d,c,k1,k2,l){  
		var q = c.match(/(first:|last:)(\"|\'*)([^\"\']*)(\"|\'*)/);  
		if(!q) return;  
		if(q[1]==k1){  
			if(q[2]=='\"'||q[2]=='\''){  
				return q[3];  
			}  
			else  
				return d[q[3]];  
		}  
		else if(q[1]==k2 && l>1)  
			return "";  
	}  
	var t_f = function(t,d,i,l,cb){  
			return t.replace( /\$\{([^\}]*)\}/g,function(m,c){  
			if(c.match(/index:/)){  
				return i;  
			}  
			if(c.match(/cb:/) && cb){  
				return cb(d,c.match(/cb:(.*)/));  
			}  
			if(i==0){  
				var s=_f(d,c,"first:","last:",l);  
				if(s) return s;  
			}  
			if(i==(l-1)){  
				var s= _f(d,c,"last:","first:",l);  
				if(s) return s;  
			}  
			var ar=c.split('.');  
			var res=d;  
			for(var key in ar)  
				res=res[ar[key]];  
			return res||"";  
		});  
	}  
	  
var tmpl = function(t,dd,l,cb,scb){  
	var r = "";  
	{  
		var index=0;  
		for(var i in dd)  
		{  
			if(scb)  
				scb(0,i,dd[i]);  
			var rr=t_f(t,dd[i],index,l,cb);  
			if(scb)  
				scb(1,rr,dd[i]);  
			r+=rr;  
			index++;  
		}  
	}  
	return r;	  
}  
  
var tmpl_s = function(t,dd,cb)  
{  
	return t_f(t,dd,-1,-1,cb);  
}  

0 关注 分享

要回复文章请先登录注册

半杯可乐

半杯可乐 (作者)

回复 无尾鱼 :
可以。
2015-10-08 14:55
无尾鱼

无尾鱼

回复 半杯可乐 :
mui可以跟avalonjs一起用吗?
2015-10-05 09:17
半杯可乐

半杯可乐 (作者)

回复 逍涯 :
恩。从Appcan 转过来的。
2015-05-29 23:31
逍涯

逍涯

好像是appcan的CSS
2015-05-29 23:28
半杯可乐

半杯可乐 (作者)

回复 逍涯 :
如果用这种模板引擎的话,还是需要大量操作DOM,那还不如使用Avalonjs这种MVVM框架了,自带模板使用非常方便。
2015-05-29 23:27
半杯可乐

半杯可乐 (作者)

回复 逍涯 :
就是不想用这种模板引擎。
2015-05-29 23:26
逍涯

逍涯

用这个吧:BaiduTemplate
2015-05-29 23:24