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);
}
7 个评论
要回复文章请先登录或注册
半杯可乐 (作者)
无尾鱼
半杯可乐 (作者)
逍涯
半杯可乐 (作者)
半杯可乐 (作者)
逍涯