preface
Recently, I was writing an email notification platform with a backend wizard. When he saw my code, he was so angry that he couldn’t read it. As a junior, I started my first code refactoring.
As it was
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);
});
}
Copy the codeThis is my own encapsulation for the back and forth end of the data interaction some code, all using the form of function calls, repetitive code is not a lot, now it looks very awkward. These functions are responsible for adding and deleting receivers, receiving groups, and messages.
Refactoring process
1. Change objects from functions
I call functions over and over again, and each function is responsible for a function, but in fact they are related to each other. The receiver adds and deletes checks, the receiving group adds and deletes checks, and the message still adds and deletes checks, but I write nine functions. Thus, I treat the receiver as an object with three methods that can be called on the receiver: Add, Query, and delete.
The code looks like this, using only the receiver as an example.
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); }); }};Copy the codeThe receiver. Add () function is now called directly, which looks much more comfortable than the original verbose function name, and also looks like it is receiving an add operation.
2. Abstract common operations from the simplest
I found that no matter the receiver, receiverGroup or message used Ajax to transfer data, but wrote the same few sentences in each object repeatedly. I needed an Ajax object.
I found through observation, query, and delete operations required for the least, each object query and delete can say the same, so don’t do the code in the form of reuse, there are duplicated code can be simplified, when added to preach and compared with the former two more complex, temporarily first not do change.
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); }); }}Copy the codeBecause the server address to be queried by Ajax is different each time, the url must be included in the parameter.
let receiver = {
list(callback) {
let url = 'receiver/list';
ajax.ajaxQuery(url, callback);
},
delete(id, callback) {
let url = 'receiver/delete'; ajax.ajaxDelete(id, url, callback); }};Copy the codeNow it looks much clearer, code is comments, hahaha.
3. Keep optimizing
With the above code, I found that the add operation is not complicated, the only difference between it and the other two methods is to pass the data, so I directly save the different data objects, directly pass it. So the ajax add method is not that different from the query delete method, and what was thought to be complicated is not complicated.
ajaxAdd(url, data, callback) {
$.ajax({
method: 'POST',
url: server + url,
data: data,
}).done(function (data) {
callback.call(this, data);
});
},
Copy the codeWhen adding, you just need to process the data, and there is nothing difficult. The thinking is gradually clear, and the complex is also simplified.
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) {}
};
Copy the codeWhat it looks like now
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); }); }}Copy the codeAfterword.
God said that it looked much more comfortable, the heart is not just so blocked panic, lunch can eat a bowl of rice.
I know a lot about LeopPro and help me solve bugs every time. Here is LeopPro.