Categories JavaScript

Các thực hành tốt nhất của JavaScript lập trình viên nên biết

Tránh biến toàn cục, tránh new, tránh ==, tránh eval().


Tránh Biến Toàn Cục

Tối thiểu hoá sử dụng các biến toàn cục.

Điều này bao gồm tất cả các dạng dữ liệu, đối tượng và hàm.

Các biến toàn cục và hàm có thể bị ghi đè bời các script khác.

Sử dụng biến địa phương để thay thế và học cách sử dụng closures.


Luôn luôn khai báo các biến địa phương

Tất cả các biến sử dụng trong hàm nên được khai báo như các biến địa phương.

Các biến địa phương phải được khai báo với từ khoá var, nếu không chúng sẽ trở thành biến toàn cục.

Ở chế độ nghiêm ngặt không cho phép không khai báo biến.


Các khai báo ở trên cùng

Một thực hành tốt khi code là đưa tất cả các khai báo lên đỉnh của mã script hoặc hàm.

Điều này sẽ:

  • Cung cấp mã sạch sẽ gọn gàng hơn;
  • Cung cấp một vị trí cho việc xem lại các biến địa phương;
  • Giúp tránh các biến toàn cục không mong muốn;
  • Giảm khả năng không mong muốn là khai báo lại;
// Khai báo biến tại vị trí đầu tiên
var firstName, lastName, price, discount, fullPrice;
// sử dụng sau đó
firstName = "Duc Anh";
lastName = "Nguyen";

price = 19.90;
discount = 0.10;

fullPrice = price * 100 / discount;

Điều này cũng đúng cho biến trong vòng lặp:

// Khai báo tại vị trí bắt đầu
var i;

// Sử dụng sau đó
for (i = 0; i < 5; i++) {

Theo mặc định, JavaScript chuyển tất cả các khai báo lên đầu (JavaScript hoisting).


Khởi tạo các biến

Là thực hành code tốt để khởi tạo các biến khi bạn khai báo chúng.

Điều này sẽ:

  • Tạo ra code gọn gàng sạch sẽ;
  • Cung cấp một vị trí duy nhất để khởi tạo các biến;
  • Tránh các giá trị không xác định;
// Khai báo và khởi tạo tại vị trí bắt đầu
var firstName = "",
lastName = "",
price = 0,
discount = 0,
fullPrice = 0,
myArray = [],
myObject = {};

Khởi tạo các biến cung cấp một ý tưởng về mục đích sử dụng (và kiểu dữ liệu dự định).


Không bao giờ khai báo Số, Chuỗi hoặc Boolean là Đối tượng

Luôn xử lý các số, chuỗi và booleans như các giá trị nguyên thuỷ. Không phải như các Đối tượng.

Khai báo các định dạng này như đối tượng sẽ làm giảm tốc độ thực thi và tạo ra các tác dụng phụ khó chịu.

Ví dụ:

var x = "Đức Anh";
var y = new String("Đức Anh");
(x === y) // cho kết quả false bởi vì x là chuỗi và y là đối tượng.

Hoặc thậm chí tồi tệ hơn.

Ví dụ:

var x = new String("John");
var y = new String("John");
(x == y) // cho kết quả false bởi vì bạn không thể so sánh hai đối tượng.

Không sử dụng new Object()

  • Sử dụng {} thay thế new Object()
  • Sử dụng “” thay thế new String()
  • Sử dụng 0 thay thế new Number()
  • Sử dụng false thay thế new Boolean()
  • Sử dụng [] thay thế new Array()
  • Sử dụng /()/ thay thế new RegExp()
  • Sử dụng function (){} thay thế new Function()

Ví dụ:

var x1 = {}; // new object
var x2 = ""; // new primitive string
var x3 = 0;  // new primitive number
var x4 = false;  // new primitive boolean
var x5 = [];  // new array object
var x6 = /()/; // new regexp object
var x7 = function(){}; // new function object

Hãy coi chừng các chuyển đổi định dạng tự động

Hãy coi chừng các con số có thể vô tình bị chuyển đổi thành chuỗi hoặc NaN (Not a Number – Không phải là Số).

JavaScript là ngôn ngữ có định dạng lỏng lẻo. Một biến có thể bao gồm nhiều định dạng khác nhau và một biến có thể thay đổi kiểu dữ liệu của nó.

Ví dụ:

var x = "Xin chào";  // typeof x là string
x = 5; //thay đổi typeof x sang kiểu number

Khi làm việc với các biểu thức toán học, JavaScript có thể chuyển các con số sang dạng chuỗi.

Ví dụ:

var x = 5 + 7; // x.valueOf() là 12,  typeof x là number
var x = 5 + "7"; // x.valueOf() là 57,  typeof x là string
var x = "5" + 7; // x.valueOf() là 57,  typeof x là string
var x = 5 - 7; // x.valueOf() là -2,  typeof x là number
var x = 5 - "7"; // x.valueOf() là -2,  typeof x là number
var x = "5" - 7; // x.valueOf() là -2,  typeof x là number
var x = 5 - "x"; // x.valueOf() là NaN, typeof x là number

Phép trừ một chuỗi cho một chuỗi không tạo ra lỗi nhưng trả về kết quả NaN (Not a Number – Không phải là Số).

Ví dụ:

"Nguyễn" - "Trần"    // trả về kết quả NaN

Sử dụng so sánh ===

Toán tử so sánh == luôn chuyển (sang định dạng phù hợp) trước khi so sánh.

Toán tử === so sánh mạnh hơn, nó so sánh cả giá trị và định dạng.

Ví dụ:

0 == "";        // true
1 == "1";       // true
1 == true;      // true

0 === "";       // false
1 === "1";      // false
1 === true;     // false

Sử dụng tham số mặc định

Nếu một hàm được gọi bị thiếu đối số, giá trị của đối số bị mất được thiết lập là undefined.

Giá trị undefined có thể phá hỏng code của bạn. Sẽ là thói quen tốt để gán giá trị mặc định cho đối số.

Ví dụ:

function myFunction(x, y) {
if (y === undefined) {
y = 0;
}
}

Đọc thêm về các tham số và đối số của hàm ở bài viết Tham số của Hàm.


Kết thúc Switches của bạn với Defaults

Luôn luôn kết thúc câu lệnh switch với default. Thậm chí ngay cả khi bạn nghĩ nó không cần thiết.

Ví dụ:

switch (new Date().getDay()) {
case 0:
day = "Chủ Nhật";
break;
case 1:
day = "Thứ Hai";
break;
case 2:
day = "Thứ Ba";
break;
case 3:
day = "Thứ Tư";
break;
case 4:
day = "Thứ Năm";
break;
case 5:
day = "Thứ Sáu";
break;
case 6:
day = "Thứ Bảy";
break;
default:
day = "Không Rõ";
}

Tránh sử dụng eval()

Hàm eval() được sử dụng để chạy văn bản như code. Trong hầu hết các trường hợp, nó không cần thiết sử dụng.

Bởi vì nó cho phép code tuỳ tiện có thể chạy, nó cũng làm xuất hiện một rắc rối về an ninh.

Back to Top