Style code trong Javascript, Nodejs Phần 4
Tiếp theo bài Style code trong Javascript, Nodejs mình tiếp tục phần 4 hướng dẫn các bạn các đối tượng khác trong javascript, Nodejs
Các bạn chưa theo dõi hãy xem lại để nắm bắt thêm những thông tin bổ ích
- Style code trong Javascript, Nodejs Phần 1
- Style code trong Javascript, Nodejs Phần 2
- Style code trong Javascript, Nodejs Phần 3
I. Modules
1. Luôn luôn dùng (import/export)
khi làm việc với modules
thay thế kiểu modules
truyền thống require/module.exports
.
// Không tốt
const AirbnbStyleGuide = require('./AirbnbStyleGuide');
module.exports = AirbnbStyleGuide.es6;
// ok
import AirbnbStyleGuide from './AirbnbStyleGuide';
export default AirbnbStyleGuide.es6;
// Tốt nhất
import { es6 } from './AirbnbStyleGuide';
export default es6;
2. Không được dùng wildcard
imports
// Không tốt
import * as AirbnbStyleGuide from './AirbnbStyleGuide';
// Tốt
import AirbnbStyleGuide from './AirbnbStyleGuide';
3. Không được dùng export
trực tiếp từ import
Bời vì tách
import
vàexport
giúp cho việc đọc dể, có ý nghĩa hơn.
// Không tốt
// filename es6.js
export { es6 as default } from './airbnbStyleGuide';
// Tốt
// filename es6.js
import { es6 } from './AirbnbStyleGuide';
export default es6;
II. Iterators and Generators
1. Không được dùng vòng lặp thay vào đó dùng map()
hoặc reduce
thay thế for-of
.
const numbers = [1, 2, 3, 4, 5];
// Không tốt
let sum = 0;
for (let num of numbers) {
sum += num;
}
sum === 15;
// Tốt
let sum = 0;
numbers.forEach((num) => sum += num);
sum === 15;
// Tốt nhất
const sum = numbers.reduce((total, num) => total + num, 0);
sum === 15;
2. Không được dùng generators
ở thời điểm hiện tại
Có lỗi khi chuyển sang
ES5
.
III. Properties
1. Sử dụng .
khi truy cập vào một biến
const luke = {
jedi: true,
age: 28,
};
// Không tốt
const isJedi = luke['jedi'];
// Tốt
const isJedi = luke.jedi;
2. Sử []
để truy cập thuộc tính đối với biến.
const luke = {
jedi: true,
age: 28,
};
function getProp(prop) {
return luke[prop];
}
const isJedi = getProp('jedi');
IV. Variables
1. Luôn luôn sử dụng const
để khai báo một biến.
// Không tốt
superPower = new SuperPower();
// Tốt
const superPower = new SuperPower();
2. Dùng mỗi const
cho việc khai báo một biến
// Không tốt
const items = getItems(),
goSportsTeam = true,
dragonball = 'z';
// Không tốt
const items = getItems(),
goSportsTeam = true;
dragonball = 'z';
// Tốt
const items = getItems();
const goSportsTeam = true;
const dragonball = 'z';
3. Gom nhóm biến theo const
s và let
s
// Không tốt
let i, len, dragonball,
items = getItems(),
goSportsTeam = true;
// Không tốt
let i;
const items = getItems();
let dragonball;
const goSportsTeam = true;
let len;
// Tốt
const goSportsTeam = true;
const items = getItems();
let dragonball;
let i;
let length;
4. Khai báo biến khi cần thiết và đặt chúng ở đúng nơi.
let
vàconst
làblock scoped
và không phảifunction scoped.
// Tốt
function() {
test();
console.log('doing stuff..');
//..other stuff..
const name = getName();
if (name === 'test') {
return false;
}
return name;
}
// Không tốt - hàm không cần thiết
function(hasName) {
const name = getName();
if (!hasName) {
return false;
}
this.setFirstName(name);
return true;
}
// good
function(hasName) {
if (!hasName) {
return false;
}
const name = getName();
this.setFirstName(name);
return true;
}
V. Hoisting
1. var
được khai báo trước ở đầu trong pham vi của biến hoặc hàm. const
và let
được dùng với một khái niệm mới Temporal Dead Zones (TDZ). typeof is no longer safe.
function example() {
console.log(notDefined); // => ReferenceError
}
// Khai báo một biến sau khai biến đó đã được gọi,
// trong trường hợp này biến sẽ không `hoisted`
function example() {
console.log(declaredButNotAssigned); // => undefined
var declaredButNotAssigned = true;
}
// Biến được khai báo ở đầu
function example() {
let declaredButNotAssigned;
console.log(declaredButNotAssigned); // => undefined
declaredButNotAssigned = true;
}
// sử dụng `const` and `let`
function example() {
console.log(declaredButNotAssigned); // => throws a ReferenceError
console.log(typeof declaredButNotAssigned); // => throws a ReferenceError
const declaredButNotAssigned = true;
}
2. Anonymous function
được khai báo bằng một biến
function example() {
console.log(anonymous); // => undefined
anonymous(); // => TypeError anonymous is not a function
var anonymous = function() {
console.log('anonymous function expression');
};
}
3. Named Function expressions
– Việc thông báo này hoạt động bằng tên hàm. Kết quả như ví dụ trước.
function example() {
console.log(named); // => undefined
named(); // => TypeError named is not a function
superPower(); // => ReferenceError superPower is not defined
var named = function superPower() {
console.log('Flying');
};
}
// Kết quả giống như khi dùng tên hàm
// trùng với tên biến
function example() {
console.log(named); // => undefined
named(); // => TypeError named is not a function
var named = function named() {
console.log('named');
}
}
4. Function declarations
– Đối với hàm mà không có các giá trị đầu vào cho biến.
function example() {
superPower(); // => Flying
function superPower() {
console.log('Flying');
}
}