jQuery 代码重构思路

🌙
手机阅读
本文目录结构

原因:QQ 群的一个好友问了一个问题,说是看不懂某一段代码什么意思;

代码如下;

    getYhjInit:function () {
        var that = this;
        $.ajax({
            type:'post',
            url:api+'api/user/pc/listUserCoupom.do',
            data:{
                token:that.tokens
            },
            success:function (res) {
                // 未使用
                for(var i= 0;i<res.response.unUserdMap.unUserdList.length;i++){
                    res.response.unUserdMap.unUserdList[i].beforetime  = webUizjx.timeData({
                        timestamp:Number(res.response.unUserdMap.unUserdList[i].startTime)/1000
                    })
                    res.response.unUserdMap.unUserdList[i].aftertime  = webUizjx.timeData({
                        timestamp:Number(res.response.unUserdMap.unUserdList[i].endTime)/1000
                    })
                }
                that.list = res.response.unUserdMap;
                console.log(that.list);
                // 已使用
                for(var i= 0;i<res.response.userdMap.userdList.length;i++){
                    res.response.userdMap.userdList[i].beforetime  = webUizjx.timeData({
                        timestamp:Number(res.response.userdMap.userdList[i].startTime)/1000
                    })
                    res.response.userdMap.userdList[i].aftertime  = webUizjx.timeData({
                        timestamp:Number(res.response.userdMap.userdList[i].endTime)/1000
                    })
                }
                that.readyList = res.response.userdMap;
                // 已过期
                for(var i= 0;i<res.response.timeoutMap.timeoutList.length;i++){
                    res.response.timeoutMap.timeoutList[i].beforetime  = webUizjx.timeData({
                        timestamp:Number(res.response.timeoutMap.timeoutList[i].startTime)/1000
                    })
                    res.response.timeoutMap.timeoutList[i].aftertime  = webUizjx.timeData({
                        timestamp:Number(res.response.timeoutMap.timeoutList[i].endTime)/1000
                    })
                }
                that.yiguoqi = res.response.timeoutMap;
            }
        })
    },

(上面的代码的属性名 getYhjInit 原本是 getYhj,为了区分,所以加了 Init)

感觉这个代码非常的糟糕,

所以我做了一下代码重构;

整理后,就有利于他的思路整理;

    getYhj: function () {
        var that    = this;
        var options = {
            type: 'post',
            url: api + 'api/user/pc/listUserCoupom.do',
            data: {token: that.tokens},
            success: function (res) {
                var MODIFIER   = 1000;
                //赋值that,方面别的方法调用;
                that.list      = res.response.unUserdMap;
                that.readyList = res.response.userdMap;
                that.yiguoqi   = res.response.timeoutMap;

                var resUnUserdList = that.list.unUserdList,//未使用
                    resUserdList   = that.readyList.userdList,//已使用
                    resTimeoutList = that.yiguoqi.timeoutList;//已过期

                // 未使用      目标是把处理后的时间挂在that.list上;方便别的方法调用that.list的属性;
                for (var i = 0, iLen = resUnUserdList.length; i < iLen; i++) {
                    resUnUserdList[i].beforetime = webUizjx.timeData({timestamp: Number(resUnUserdList[i].startTime) / MODIFIER});
                    resUnUserdList[i].aftertime  = webUizjx.timeData({timestamp: Number(resUnUserdList[i].endTime) / MODIFIER});
                }

                // 已使用
                for (var j = 0, jLen = resUserdList.length; j < jLen; j++) {
                    resUserdList[j].beforetime = webUizjx.timeData({timestamp: Number(resUserdList[j].startTime) / MODIFIER});
                    resUserdList[j].aftertime  = webUizjx.timeData({timestamp: Number(resUserdList[j].endTime) / MODIFIER});
                }

                // 已过期
                for (var k = 0, kLen = resTimeoutList.length; k < kLen; k++) {
                    resTimeoutList[k].beforetime = webUizjx.timeData({timestamp: Number(resTimeoutList[k].startTime) / MODIFIER});
                    resTimeoutList[k].aftertime  = webUizjx.timeData({timestamp: Number(resTimeoutList[k].endTime) / MODIFIER});
                }
            }
        };
        $.ajax(options);
    }

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

目前重心已经放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>