記一次代碼重構

時間  2019-11-29
標籤 一次 代碼 简体版
原文   原文鏈接

前言

最近在和一位後端大神寫一個郵件通知平臺，大神看到個人代碼之後氣不打一處來，簡直不能看。資歷尚淺的我開始了第一次代碼重構。ajax

原來的樣子

function receiverList(callback) {
    $.ajax({
        method: "GET",
        url: server + "receiver/list",
    }).done(function (data) {
        if (data.status === 200) {
            let {result} = data;
            callback.call(this, result)
        } else {
            alert(404)
        }
    });
}

function addReceiver(name, email, callback) {
    $.ajax({
        method: 'POST',
        url: server + "receiver/add",
        data: {
            name: name,
            email: email
        },
    }).done(function (data) {
        callback.call(this, data);
    });
}

function deleteReceiver(id, callback) {
    $.ajax({
        method: 'GET',
        url: server + "receiver/delete",
        data: {
            id: id
        },
    }).done(function (data) {
        callback.call(this, data);
    });
}

function groupList(callback) {
    $.ajax({
        method: "GET",
        url: server + "group/list",
    }).done(function (data) {
        if (data.status === 200) {
            let {result} = data;
            callback.call(this, result)
        } else {
            alert(404)
        }
    });

}

function addReceiverGroup(groupName, receiverGroupIds, callback) {
    $.ajax({
        method: 'POST',
        url: server + "group/add",
        data: {
            name: groupName,
            receiverId: receiverGroupIds
        },
        traditional: true
    }).done(function (data) {
        callback.call(this, data);
    });
}

function deleteReceiverGroup(id, callback) {
    $.ajax({
        method: 'GET',
        url: server + "group/delete",
        data: {
            id: id
        },
    }).done(function (data) {
        callback.call(this, data);
    });
}

function messageList(callback) {
    $.ajax({
        method: "GET",
        url: server + "message/list",
    }).done(function (data) {
        if (data.status === 200) {
            let {result} = data;
            callback.call(this, result)
        } else {
            alert(404)
        }
    });
}

function addMessage(subject, content, callback) {
    $.ajax({
        method: 'POST',
        url: server + "message/add",
        data: {
            subject: subject,
            content: content
        },
    }).done(function (data) {
        callback.call(this, data);
    });
}

function deleteMessage(id, callback) {
    $.ajax({
        method: 'GET',
        url: server + "message/delete",
        data: {
            id: id
        },
    }).done(function (data) {
        callback.call(this, data);
    });
}
複製代碼

這是本身封裝的用於先後端數據交互的一些代碼，所有采用的都是函數調用的形式，囉囉嗦嗦重複的代碼很多，如今本身看起來也很彆扭。 這些函數負責的是接收者、接收組和消息的增刪查。後端

重構過程

1. 由函數變對象

一次次調用函數，每個函數都負責一個功能，實際上他們卻存在聯繫，接收者有增刪查，接受組有增刪查，消息依舊有增刪查，而我卻寫了 9 個函數。因而，我把接收者當作一個對象，在接收者上有三個能夠調用的方法，分別是 add ，query ，delete。bash

代碼變成了這個樣子，這裏只以接收者爲例。函數

let receiver = {
    list(callback) {
        $.ajax({
            method: "GET",
            url: server + "receiver/list",
        }).done(function (data) {
            if (data.status === 200) {
                let {result} = data;
                callback.call(this, result)
            } else {
                alert(404)
            }
        });
    },
    add(name, email, callback) {
        $.ajax({
            method: 'POST',
            url: server + "receiver/add",
            data: {
                name: name,
                email: email
            },
        }).done(function (data) {
            callback.call(this, data);
        });
    },
    delete(id, callback) {
        $.ajax({
            method: 'GET',
            url: server + "receiver/delete",
            data: {
                id: id
            },
        }).done(function (data) {
            callback.call(this, data);
        });
    }
    
};
複製代碼

如今調用的時候就能夠直接，receiver.add()，看起來就比原來的冗長函數名舒服多了，表意上也直接看出來是接收着的添加操做。優化

2. 從最簡單的開始抽象出公共操做

我發現，不管是 receiver，receiverGroup 仍是 message 都利用了 ajax 傳輸數據，但是卻在每一個對象裏面都重複的寫那幾句話，我須要一個 ajax 對象。ui

通過觀察我發現，查詢和刪除操做所須要的傳參最少，每個對象的查詢和刪除能夠說如出一轍，如今這樣的形式根本沒有作到代碼複用，有重複的代碼說明就能夠進行簡化，在添加的時候傳參相對於前二者較爲複雜，暫時先不作改變。this

let ajax = {
    ajaxQuery(url, callback) {
        $.ajax({
            method: "GET",
            url: server + url,
        }).done(function (data) {
            if (data.status === 200) {
                let {result} = data;
                callback.call(this, result)
            } else {
                alert(404)
            }
        });
    },
    ajaxDelete(id, url, callback) {
        $.ajax({
            method: 'GET',
            url: server + url,
            data: {
                id: id
            },
        }).done(function (data) {
            callback.call(this, data);
        });
    }
}
複製代碼

由於每次 ajax 要查詢的 server 地址是不一樣的，因此傳參中必需要有 url 。url

let receiver = {
    list(callback) {
        let url = 'receiver/list';
        ajax.ajaxQuery(url, callback);
    },
    delete(id, callback) {
        let url = 'receiver/delete';
        ajax.ajaxDelete(id, url, callback);
    }
};
複製代碼

如今看起來思路清晰多了，代碼即註釋，哈哈哈。spa

3. 繼續優化

有了上面的代碼，我發現添加操做也不復雜了，它和其餘兩個方法惟一不一樣的就是要傳遞數據，那我直接把不一樣 data 對象存好了，直接傳就行了。因此 ajax 的添加方法和查詢刪除沒有很大差異，以前認爲複雜的其實並不複雜。code

ajaxAdd(url, data, callback) {
        $.ajax({
            method: 'POST',
            url: server + url,
            data: data,
        }).done(function (data) {
            callback.call(this, data);
        });
    },
複製代碼

add 的時候只需把數據處理一下就行了，也沒有什麼難的，思路漸漸清晰起來，複雜的也簡單化了。

let receiver = {
    list(callback) {},
    add(name, email, callback) {
        let url = 'receiver/add';
        let data = {
            name: name,
            email: email
        }
        ajax.ajaxAdd(url, data, callback)
    },
    delete(id, callback) {}
};
複製代碼

如今的樣子

let receiver = {
    list(callback) {
        let url = 'receiver/list';
        ajax.ajaxQuery(url, callback);
    },
    add(name, email, callback) {
        let url = 'receiver/add';
        let data = {
            name: name,
            email: email
        }
        ajax.ajaxAdd(url, data, callback)
    },
    delete(id, callback) {
        let url = 'receiver/delete';
        ajax.ajaxDelete(id, url, callback);
    }
};

let receiverGroup = {
    list(callback) {
        let url = 'group/list';
        ajax.ajaxQuery(url, callback);
    },
    add(groupName, receiverGroupIds, callback) {
        let url = 'group/add';
        let data = {
            name: groupName,
            receiverId: receiverGroupIds
        }
        ajax.ajaxAdd(url,data,callback)
    },
    delete(id, callback) {
        let url = 'group/delete';
        ajax.ajaxDelete(id, url, callback);
    }
}

let message = {
    list(callback) {
        let url = 'message/list';
        ajax.ajaxQuery(url, callback);
    },
    add(subject, content, callback) {
        let url = 'message/add';
        let data = {
            subject: subject,
            content: content
        };
        ajax.ajaxAdd(url,data,callback);
    },
    delete(id, callback) {
        let url = 'message/delete';
        ajax.ajaxDelete(id, url, callback)
    }
}

let ajax = {
    ajaxQuery(url, callback) {
        $.ajax({
            method: "GET",
            url: server + url,
        }).done(function (data) {
            if (data.status === 200) {
                let {result} = data;
                callback.call(this, result)
            } else {
                alert(404)
            }
        });
    },
    ajaxAdd(url, data, callback) {
        $.ajax({
            method: 'POST',
            url: server + url,
            data: data,
        }).done(function (data) {
            callback.call(this, data);
        });
    },
    ajaxDelete(id, url, callback) {
        $.ajax({
            method: 'GET',
            url: server + url,
            data: {
                id: id
            },
        }).done(function (data) {
            callback.call(this, data);
        });
    }
}
複製代碼

後記

大神說這樣看起來舒服多了，內心沒有剛剛那麼堵得慌了，中午都能多吃一碗大米飯呢。

後端大神知識面很廣，每次都是分分鐘幫我解決 bug，這裏宣傳下大神的掘金 LeopPro 。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程