Chào buổi sáng mọi người, hãy cũng nhau cưỡi ngựa xem hoa, cưỡi tên lửa ngắm đài điểu những Ví dụ về clean code. Cứ xem bài viết này như là một Checklist cho chúng ta tự Review Code của mình trước khi commit.
OK cùng ngồi xuống uống miếng bánh ăn miếng nước và GÉT GÔ nào....
Variables
Sử dụng tên biến có nghĩa
Not Good
const yyyymmdstr = moment().format('YYYY/MM/DD');
Good
const currentDate = moment().format('YYYY/MM/DD');
Sử dụng cùng từ vựng cho cùng loại biến
Not Good
getUserInfo();
getClientData();
getCustomerRecord();
Good
Sử dụng các tên có thể tìm kiếm được
Not Good
setTimeout(blastOff, 86400000);
Good
const MILLISECONDS_IN_A_DAY = 86400000;
setTimeout(blastOff, MILLISECONDS_IN_A_DAY);
Sử dụng những biến có thể giải thích được
Not Good
const address = 'One Infinite Loop, Cupertino 95014';
const cityZipCodeRegex = /^[^,\\]+[,\\\s]+(.+?)\s*(\d{5})?$/;
saveCityZipCode(address.match(cityZipCodeRegex)[1], address.match(cityZipCodeRegex)[2]);
Good
const address = 'One Infinite Loop, Cupertino 95014';
const cityZipCodeRegex = /^[^,\\]+[,\\\s]+(.+?)\s*(\d{5})?$/;
const [, city, zipCode] = address.match(cityZipCodeRegex) || [];
saveCityZipCode(city, zipCode);
Tường minh mọi thứ
Not Good
const locations = ['Austin', 'New York', 'San Francisco'];
locations.forEach((l) => {
doStuff();
doSomeOtherStuff();
dispatch(l);
});
Good
const locations = ['Austin', 'New York', 'San Francisco'];
locations.forEach((location) => {
doStuff();
doSomeOtherStuff();
dispatch(location);
});
Đừng thêm những thứ không cần thiết
Not Good
const Car = {
carMake: 'Honda',
carModel: 'Accord',
carColor: 'Blue'
};
function paintCar(car, color) {
car.carColor = color;
}
Good
const Car = {
make: 'Honda',
model: 'Accord',
color: 'Blue'
};
function paintCar(car, color) {
car.color = color;
}
Sử dụng những tham số mặc định thay vì kiểm tra các điều kiện lòng vòng
Not Good
function createMicrobrewery(name) {
const breweryName = name || 'Hipster Brew Co.';
}
Good
function createMicrobrewery(breweryName = 'Hipster Brew Co.') {
}
Functions
Đối số của hàm
Lý tưởng là ít hơn hoặc bằng 2. Not Good
function createMenu(title, body, buttonText, cancellable) {
}
Good
function createMenu({ title, body, buttonText, cancellable }) {
}
createMenu({
title: 'Foo',
body: 'Bar',
buttonText: 'Baz',
cancellable: true
});
Một Function chỉ nên giải quyết một vấn đề
Not Good
function emailClients(clients) {
clients.forEach((client) => {
const clientRecord = database.lookup(client);
if (clientRecord.isActive()) {
email(client);
}
});
}
Good
function emailClients(clients) {
clients
.filter(isClientActive)
.forEach(email);
}
function isClientActive(client) {
const clientRecord = database.lookup(client);
return clientRecord.isActive();
}
Tên hàm phải nói ra được những gì chúng làm
Not Good
function addToDate(date, month) {
}
const date = new Date();
addToDate(date, 1);
Good
function addMonthToDate(month, date) {
}
const date = new Date();
addMonthToDate(1, date);
Hàm chỉ nên có một lớp trừu tượng
Not Good
function parseBetterJSAlternative(code) {
const REGEXES = [
];
const statements = code.split(' ');
const tokens = [];
REGEXES.forEach((REGEX) => {
statements.forEach((statement) => {
});
});
const ast = [];
tokens.forEach((token) => {
});
ast.forEach((node) => {
});
}
Good
function tokenize(code) {
const REGEXES = [
];
const statements = code.split(' ');
const tokens = [];
REGEXES.forEach((REGEX) => {
statements.forEach((statement) => {
tokens.push( );
});
});
return tokens;
}
function lexer(tokens) {
const ast = [];
tokens.forEach((token) => {
ast.push( );
});
return ast;
}
function parseBetterJSAlternative(code) {
const tokens = tokenize(code);
const ast = lexer(tokens);
ast.forEach((node) => {
});
}