个人最近在开发项目中遇到了动态数据请求渲染的问题,能力有限,虽然解决了问题,但是觉得代码冗长,效率比较低,所以想优化一下,看能不能用其他方法提交一下效率。这个问题经历了三个节点。
第一个就是自己完全不熟其他方法的情况下独立完成的。那就是最基本的初始化/赋值/添加。
var jsonObj = eval('('+res+')');
// console.log(jsonObj);
var html='';
var day_add = jsonObj.day_add;
html+=jsonObj.day_add;
$(".custorm").append(html);
这种就是每个类都需要经历这三个步骤,代码冗长,效率低下。
那么我想着自己封装一下,这就是第二个节点。
<script type="text/javascript">
$(function(){
$.post("url?jsoncallback=?",{},function(res){
var obj = eval('('+res+')');
console.log(obj);
var p=obj.day_add;
var a=obj.new_app;
var b=obj.not_app;
var c=obj.dayfankui;
var d=obj.passrate;
var e=obj.includexujie_sendnums;
var f=obj.notxujie_sendmoney;
var g=obj.day_backmoney;
var h=obj.day_num;
var l=obj.total_app;
var m=obj.yingshoubenjin;
var n=obj.yuqidanshu;
var o=obj.yuqilv;
var p=obj.m1yuqilv;
var q=obj.m3yuqilv;
var r=obj.totalrate;
//调用
adds(p,'day_add');//今日注册量
adds(a,'new_app');//今日新申请
adds(b,'not_app');//待审数量
adds(c,'dayfankui');//今日反馈数量
adds(d,'passrate');//今日通过率
adds(e,'includexujie_sendnums');//今天放款单数(包含续借)
adds(f,'notxujie_sendmoney');//今日放款总额(不含续借)
adds(g,'day_backmoney');//今天还款总额
adds(h,'day_num');//今日还款单数
adds(l,'total_app');//全部申请
adds(m,'yingshoubenjin');//总贷款余额
adds(n,'yuqidanshu'); //逾期单数
adds(o,'yuqilv');//当前逾期率
adds(p,'m1yuqilv');//M1逾期率
adds(q,'m3yuqilv');//M3逾期率
adds(r,'totalrate');//总通过率
},'json');
});
function adds(p,c){
var html='';
html += p;
$("."+c).append(html);
}
</script>
但是这种调用代码依旧是很麻烦。最后自己去网上看了一下遍历的方法,发现自己之前的方法都逊爆了,果然还是学习才能提高效率。那么就是第三种方法-遍历
<script type="text/javascript">
$(function(){
$.post("url?jsoncallback=?",{},function(res){
// // // console.log(res(res);
//var infos=['day_add','','']; //数据的key(键),class类名和此要一致
//var obj = eval('('+res+')');
var arr=JSON.parse(res);//json转化成数组
console.log(arr);
$.each(arr,function(i,val){ //遍历数组
$("."+i).append(val); //可以看出,能成功执行的逻辑就是需要infos内配置i
});
},'json');
});
</script>
这种方法简直了,提高了不少的效率。
ps:这些仅是我这只菜鸟的项目问题总结分享,如果对其他菜鸟有帮助,欢迎扎堆,不喜勿喷。