关于table结构类似的代码抽离-今天项目中遇到的问题

最新推荐文章于 2024-09-20 10:40:49 发布

weixin_30682127

最新推荐文章于 2024-09-20 10:40:49 发布

阅读量77

点赞数

文章标签： json javascript ViewUI

原文链接：http://www.cnblogs.com/mengyun/p/3799600.html

版权

从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:;" >详情&gt;</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 })