关于table结构类似的代码抽离-今天项目中遇到的问题
从n年前就开始经常看别人写的博客,从未感觉自己要写点什么,总感觉网上什么都有,自己也懒得写,直到有天,遇到一个问题,网上搜呀搜,忽然感觉这个博客好熟悉,仔细看看,原来是自己的博客。呵呵,很搞笑吧。
不过从那时起,碰到问题开始记笔记,遇到问题就查自己的笔记,没想着去写博客,结果发现越来越宅了,记录的不一定正确,学习过的没有完整记录,查找记录也麻烦。。。多重原因吧。
所以开始写博客,记录下问题,学习心得,哪怕是学习遇到的问题,与大家分享,希望各位大神们多给指点下,小生在此感激不尽......
曾经有人问一位大神,是如何成为大神的,大神回答:每天学习两个小时。
每天学习两个小时,也贵在坚持,坚持......
先从写博客开始
今天在做项目的过程中,发现一段代码,在不停的重复,除内容不同,接口地址不同,大部分还是相同的,都是拼接字符串
需求:在一个页面内显示 积分获得的记录、虚拟商品的兑换记录、实物商品的兑换记录。
设计图显示如下:
除了table的每列显示内容不同,列数不同外,都需要通过ajax请求数据,并拼接dom结构。
因为调用的接口路径是一样的,唯一不同的是最后的地址,比如:
积分记录:http://....../api/records
实物兑换记录 : http://....../api/myGoods?goods_type=1
虚拟物品兑换记录 : http://....../api/myGoods?goods_type=0
所以接口就写到一起,来根据传递的参数来判断调用的那个接口,正如下面部分代码:
1 getData = function(newpage, urlport, isrealshop){ 2 var curpage = newpage['p'] || 1, 3 type = urlport == 'records' ? 'records' : (isrealshop == 1 ? 'real' : 'virtual'),//根据接口urlport和isrealshop来判断是积分记录或实物或虚拟的兑换记录 4 $tbody = $('tbody', $('#' + type + 'list')); 5 $.ajax({ 6 url: _URL + urlport, 7 type: 'POST', 8 data: {'page' : curpage, 'goods_type' : isrealshop}, 9 async :false, 10 dataType: 'jsonp', 11 success: function(json){
12 ... ...
13 domHtml(type, item, list_id, orderInfo);
14 }
15 });
16 };
从上述代码可以看出,一个页面中可以有多个接口调用来填充页面的内容,所以可以用一个公用的function根据传递的参数判断究竟需要显示的那个接口。
另外一个主要的重复在每个显示块上,上面也说了,都是table,不同的地方是显示几列,另外就是需要调用的data的对象不同,
那么就可以把不同的地方拿出来,如下
1 domHtml = function(type, obj, dataid, orderinfo){ //type存放虚拟或实物的判断,obj:获得的json数据,dataid:显示的序号,orderinfo:实物的详情内容 2 var type = type || 'virtual', //积分纪录,虚拟或实物 3 id = dataid || '', //当前页的序号排列 4 name = obj.name || obj.source || '', //获取积分或兑换记录的名字 5 addtime = obj.addtime || obj.updatetime || '', //兑换的时间 6 goodstime = obj.goodstime || '', //发货的时间 7 credit = obj.credit || '', //获取或消耗的积分 8 detail = obj.detail || '', //兑换时的内容说明 9 typeHtml = [], 10 dataArr = []; //存放后台取的数据; 11 if(id<10){id = '0' + id;} 12 if (type == 'records') { //积分兑换记录 13 dataArr = ['<tr>', 14 '<td>'+ id +'</td>',//序号 15 '<td>'+ name +'</td>',//获取积分名称 16 '<td>'+ credit +'</td>',//获取的积分 17 '<td>'+ addtime +'</td>',//获取积分时间 18 '</tr>']; 19 }else if(type == 'real'){ //实物兑换 20 dataArr = ['<tr>', 21 '<td>'+ id +'</td>',//序号 22 '<td>'+ name +'</td>',//奖品名称 23 '<td>'+ addtime +'</td>',//兑换时间 24 '<td>'+ goodstime +'</td>',//发货时间 25 '<td><a class="real_link" id="real_link' + id + '" href="javascript:;" >详情></a>' + (orderinfo || "") + '</td>',//查看详情 26 '</tr>']; 27 }else{ //虚拟兑换 28 dataArr = ['<tr>', 29 '<td>'+ id +'</td>',//序号 30 '<td>'+ name +'</td>',//奖品名称 31 '<td>'+ addtime +'</td>',//兑换时间 32 '<td>'+ detail +'</td>',//兑换详情 33 '</tr>']; 34 }; 35 return dataArr; 36 }
这时,我们就可以通过下面的代码调用到要执行的内容
1 //积分兑换记录 2 recordsFill = function(newpage){ //newpage内容{p:1},默认加载第一页的内容 3 getData(newpage,'records'); //'records' 接口为积分兑换记录 4 }, 5 //实物兑换记录 6 realFill = function(newpage){ 7 getData(newpage,'myGoods', 1); // 'myGoods'接口为兑换的物品,后面的1是说明是实物的兑换记录 8 }, 9 //虚拟商品兑换记录 10 virtualFill = function(newpage){ 11 getData(newpage,'myGoods', 0); //0为虚拟的兑换记录 12 },
剩下的就是页面加载时调用积分兑换记录或实物兑换记录,或虚拟兑换记录,因为是tab切换,只显示某一项,所以默认显示其中一个,当切换tab的时候,调用相应的接口获取内容并填充到页面内
1 $(function(){ 2 recordsFill({p : 1}); //默认的填充内容 3 $recordTab.unbind('click').bind('click',function(){ 4 var curType = $(this).attr('id'), 5 tabconStr = ['records', 'real', 'virtual']; 6 $recordTab.removeClass('on'); 7 $(this).addClass('on'); 8 $recordTabcon.html($('#' + curType + 'tpl').html()); 9 switch(curType){ //根据当前tab调用相应的内容 10 case 'records' : recordsFill({p : 1}); 11 break; 12 case 'real' : realFill({p : 1}); 13 break; 14 case 'virtual' : virtualFill({p : 1}); 15 break; 16 } 17 }); 18 })
当写完上述代码时,还是感觉啰嗦了,虽然把调用的接口合并到一起,并根据参数的不同调用不同的内容,不过至少省去了三分之一的代码,并清晰的将各个功能分开,调用接口、获取内容、内容填充,可以为后续再添加或更改内容提供了明确的思路。
另外分页未写到这次代码的展示中,可以根据点击的那个分页,传递参数{p:点击的分页}可以显示要展示的分页内容,说明(后台传递参数是根据每页显示的条数按页传递条数)