Best Practices trong JavaScript

Best Practices trong JavaScript

– Giảm thiểu sử dụng các biến toàn cục (global variables), cũng như các data types, objects, and functions toàn cục. Vì nó có thể bị ghi đè (overwritten) bởi các tập lệnh scripts khác.

– Thay vào đó hãy sử dụng các biến cục bộ (local variables).

– Tất cả các biến được sử dụng trong một hàm nên được khai báo dưới dạng biến cục bộ.

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

– Trong chế độ nghiêm ngặt (strict mode) không cho phép sử dụng biến nếu biến đó chưa được khai báo.

– Đây là một cách lập trình tốt, nên đặt tất cả các khai báo ở đầu mỗi tập lệnh script hoặc function. Điều này sẽ giúp:

• Nhìn code rõ ràng.
• Dễ dàng tìm biến cục bộ, chỉ cần tìm ở một nơi duy nhất.
• Tránh tạo ra các biến cục bộ ghi đè (overwritten) lẫn nhau.
• Tránh việc khai báo lại các biến trùng tên.

// Khai báo đặt ở đầu
var firstName, lastName, price, discount, fullPrice;

// Sau đó sử dụng
firstName = "John";
lastName = "Doe";

price = 19.90;
discount = 0.10;

fullPrice = price * 100 / discount;

– Điều này cũng tương tự khi sử dụng biến vòng lặp

// Khai báo đặt ở đầu
var ii;

// Sau đó sử dụng
for (ii = 0; ii < 5; ii++) {

Đây là một cách lập trình tốt, nên khởi tạo giá trị cho biến khi bạn khai báo chúng. Điều này sẽ giúp:

• Nhìn code rõ ràng.
• Xác định một nơi duy nhất để khởi tạo biến.
• Tránh các giá trị không xác định.

// Khai báo và khởi tạo biến ngay từ đầu
var firstName = "",
    lastName = "",
    price = 0,
    discount = 0,
    fullPrice = 0,
    myArray = [],
    myObject = {};

Không tạo các biến mới nếu bạn không có kế hoạch lưu các giá trị để tính toán về sau.

var fullName = firstName + " " + lastName;
document.getElementById("demo").innerHTML = fullName;

document.getElementById("demo").innerHTML = firstName + " " + lastName

– Các vòng lặp thường được sử dụng trong lập trình.

– Mỗi câu lệnh trong một vòng lặp, bao gồm câu lệnh for, được thực hiện cho mỗi lần lặp của vòng lặp.

– Các câu lệnh hay các khai báo có thể được đặt bên ngoài vòng lặp sẽ làm cho vòng lặp chạy nhanh hơn.

var ii;
for (ii = 0; ii < arr.length; ii++) {

var ii;
var len = arr.length;
for (ii = 0; ii < len; ii++) {

– Việc truy cập DOM HTML rất chậm so với các câu lệnh JavaScript khác.

– Nếu bạn muốn truy cập một phần tử DOM nhiều lần, hãy truy cập nó một lần và sử dụng nó như một biến cục bộ:

<p id="demo"></p>

<script>

var domId;
domId = document.getElementById("demo");
domId.innerHTML = "Hello World!";

</script>

– Lưu ý rằng các số (numbers) có thể vô tình được chuyển đổi thành chuỗi (strings) hoặc NaN (Not a Number).

– JavaScript có kiểu dữ liệu của biến rất linh hoạt. Một biến có thể chứa các kiểu dữ liệu khác nhau và một biến có thể thay đổi kiểu dữ liệu của nó:

var x = "Hello";	// typeof x là một string
x = 5;				// thay đổi typeof x thành một number

– Khi thực hiện các phép toán, JavaScript có thể chuyển đổi số thành chuỗi:

var x1 = 5 + 7;		// x1.valueOf() là 12,  typeof x1 là một number
var x2 = 5 + "7";	// x2.valueOf() là 57,  typeof x2 là một string
var x3 = "5" + 7;	// x3.valueOf() là 57,  typeof x3 là một string
var x4 = 5 - 7;		// x4.valueOf() là -2,  typeof x4 là một number
var x5 = 5 - "7";	// x5.valueOf() là -2,  typeof x5 là một number
var x6 = "5" - 7;	// x6.valueOf() là -2,  typeof x6 là một number
var x7 = 5 - "x";	// x7.valueOf() là NaN, typeof x7 là một number

– Trừ một chuỗi từ một chuỗi, không tạo ra lỗi nhưng trả về NaN (Not a Number):

"Hello" - "World"	// return NaN

– Toán tử so sánh == luôn chuyển đổi (thành matching types) trước khi so sánh. Chỉ so sánh giá trị (value).

– Còn toán tử === so sánh cả giá trị (value) và kiểu (type):

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

– Nếu một hàm được gọi với một tham số còn thiếu, giá trị của tham số bị thiếu đó sẽ được set là undefined.

– Giá trị undefined có thể làm lỗi code của bạn. Vì thế, một thói quen tốt là nên gán các giá trị mặc định cho các tham số:

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

function (a=1, b=1) { // function code }

Luôn luôn kết thúc câu lệnh switch với một default. Ngay cả khi bạn nghĩ rằng không có nhu cầu dùng nó.

switch (new Date().getDay()) {
    case 0:
        day = "Sunday";
        break;
    case 1:
        day = "Monday";
        break;
    case 2:
        day = "Tuesday";
        break;
    case 3:
        day = "Wednesday";
        break;
    case 4:
        day = "Thursday";
        break;
    case 5:
        day = "Friday";
        break;
    case 6:
        day = "Saturday";
        break;
    default:
        day = "Unknown";
}

– Luôn luôn coi các numbers, strings, hoặc booleans là giá trị nguyên thủy. Không phải là đối tượng.

– Khai báo các kiểu này làm đối tượng, làm chậm tốc độ thực thi. Hơn nữa, từ khóa new làm phức tạp code. Điều này có thể tạo ra một số kết quả không mong muốn như dưới đây:

var x = "John";             
var y = new String("John");
(x === y)	// return false
			// vì x là một string, còn y là một object.

– Hoặc thậm chí tệ hơn:

var x = new String("John");             
var y = new String("John");
(x == y)	// return false
			// vì không thể so sánh object.

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àm eval() được sử dụng để thực thi văn bản dưới dạng mã. Trong hầu hết các trường hợp, bạn không cần phải sử dụng nó.

– Vì nó có thể thực thi mã tùy ý, đó cũng là một vấn đề bảo mật.

– Tránh sử dụng từ khóa with. Vì nó có tác động tiêu cực đến tốc độ thực thi. Nó cũng làm xáo trộn các phạm vi JavaScript.

– Từ khóa with không được phép dùng ở chế độ nghiêm ngặt (strict mode).

Cảm ơn bạn đã theo dõi. Đừng ngần ngại hãy cùng thảo luận với chúng tôi!