Thực hành tốt nhất trong JavaScript
- Trang trước Hướng dẫn phong cách CSS JS
- Trang tiếp theo Lỗi JS
Vui lòng tránh biến toàn cục,new、===、eval()
Tránh biến toàn cục
Vui lòng sử dụng biến toàn cục ít nhất có thể.
Nó bao gồm tất cả các loại dữ liệu, đối tượng và hàm.
Biến toàn cục và hàm có thể bị các đoạn mã khác chèn盖.
Vui lòng sử dụng biến cục bộ thay thế và học cách sử dụngBao bọc。
Luôndeclare biến cục bộ
Tất cả các biến được sử dụng trong hàm nên đượcdeclare làCục bộBiến.
Biến cục bộPhảiQua var Đềdeclare bằng từ khóa, nếu không chúng sẽ trở thành biến toàn cục.
Chế độ chặt chẽ không cho phép biến không đượcdeclare.
Đềdeclare ở trên cùng
Một thói quen lập trình tốt là đặt tất cả các宣言 ở trên cùng của mỗi đoạn mã hoặc hàm.
Lợi ích của việc này là:
- Nhận mã nguồn sạch hơn
- Cung cấp vị trí tốt để tìm kiếm biến cục bộ
- Dễ dàng tránh biến toàn cục không cần thiết
- Giảm thiểu khả năng phải lạideclare không cần thiết
// Đềdeclare ở trên cùng var firstName, lastName, price, discount, fullPrice; // Sử dụng sau firstName = "Bill"; lastName = "Gates"; price = 19.90; discount = 0.10; fullPrice = price * 100 / discount;
Cũng có thể sử dụng cho biến lặp:
// Đềdeclare ở trên cùng
var i;
// Sử dụng sau
for (i = 0; i < 5; i++) {
Mặc định, JavaScript sẽ di chuyển tất cả các宣言 lên trên cùng (JavaScript hoisting).
Khởi tạo biến
Thói quen khởi tạo biến khi bạn tuyên bố nó là một thói quen tốt.
Lợi ích của việc này là:
- Mã nguồn sạch hơn
- Khởi tạo biến ở vị trí riêng lẻ
- Tránh giá trị không xác định
// Khởi tạo và tuyên bố biến ở đầu
var firstName = "",
lastName = "",
price = 0,
discount = 0,
fullPrice = 0,
myArray = [],
myObject = {};
Việc khởi tạo biến giúp chúng ta hiểu mục đích sử dụng và loại dữ liệu mong đợi.
Hãy không tuyên bố số, chuỗi hoặc boolean là đối tượng
Hãy luôn coi số, chuỗi hoặc boolean là giá trị nguyên thủy, không phải đối tượng.
Nếu bạn đặt các loại này là đối tượng, nó sẽ làm chậm tốc độ thực thi và gây ra tác dụng phụ khó chịu:
Mẫu
var x = "Bill";
var y = new String("Bill");
(x === y) // Kết quả là false vì x là chuỗi, còn y là đối tượng.
hoặc thậm chí còn tệ hơn:
Mẫu
var x = new String("Bill");
var y = new String("Bill");
(x == y) // Kết quả là false vì bạn không thể so sánh đối tượng.
Hãy không sử dụng new Object()
- Hãy sử dụng {} để thay thế new Object()
- Hãy sử dụng "" để thay thế new String()
- Hãy sử dụng 0 để thay thế new Number()
- Hãy sử dụng false để thay thế new Boolean()
- Hãy sử dụng [] để thay thế new Array()
- Hãy sử dụng /()/ để thay thế new RegExp()
- Hãy sử dụng function (){} để thay thế new Function()
Mẫu
var x1 = {}; // Mối đối tượng mới
var x2 = ""; // Mối đối tượng giá trị nguyên thủy chuỗi
var x3 = 0; // Mối đối tượng giá trị nguyên thủy số
var x4 = false; // Mối đối tượng giá trị nguyên thủy boolean
var x5 = []; // Mối đối tượng mảng mới
var x6 = /()/; // Mối đối tượng biểu thức chính quy mới
var x7 = function(){}; // Mối đối tượng hàm mới
Hãy nhận ra rằng có sự tự động chuyển đổi loại dữ liệu
Hãy nhận ra rằng số có thể bị chuyển đổi thành chuỗi một cách ngẫu nhiên hoặc NaN(Không phải số).
JavaScript thuộc loại loại thả lỏng. Biến có thể chứa nhiều loại dữ liệu khác nhau và biến có thể thay đổi loại dữ liệu của nó:
Mẫu
var x = "Hello"; // typeof x là chuỗi x = 5; // Thay đổi typeof x thành số
Nếu thực hiện toán học, JavaScript có thể chuyển đổi số thành chuỗi:
Mẫu
var x = 5 + 7; // x.valueOf() là 12, typeof x là số var x = 5 + "7"; // x.valueOf() là 57, typeof x là chuỗi var x = "5" + 7; // x.valueOf() là 57, typeof x là chuỗi var x = 5 - 7; // x.valueOf() là -2, typeof x là số var x = 5 - "7"; // x.valueOf() là -2, typeof x là số var x = "5" - 7; // x.valueOf() là -2, typeof x là số var x = 5 - "x"; // x.valueOf() là NaN, typeof x là số
Trừ hai chuỗi sẽ không tạo ra lỗi mà sẽ trả về NaN（Not a Number）：
Mẫu
"Hello" - "Dolly" // Trả về NaN
Sử dụng === để so sánh
== các toán tử so sánh luôn chuyển đổi loại trước khi so sánh (để phù hợp với loại).
=== toán tử sẽ ép buộc so sánh giá trị và loại:
Mẫu
0 == ""; // true 1 == "1"; // true 1 == true; // true 0 === ""; // false 1 === "1"; // false 1 === true; // false
Sử dụng Parameter Defaults
Nếu thiếu một tham số khi gọi hàm, giá trị của tham số bị thiếu sẽ được đặt là undefined。
undefined giá trị sẽ phá hủy mã của bạn. Việc đặt giá trị mặc định cho tham số là một thói quen tốt.
Mẫu
function myFunction(x, y) {
if (y === undefined) {
y = 0;
}
}
Vui lòngTham số hàmTrong chương này, hãy đọc thêm về các tham số hàm.
sử dụng mặc định để kết thúc switch
Vui lòng sử dụng mặc định để kết thúc switch Câu lệnh. Mặc dù bạn có thể nghĩ rằng bạn không cần nó.
Mẫu
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;
mặc định:
day = "Unknown";
}
Tránh sử dụng eval()
eval() Hàm được sử dụng để cho phép văn bản như mã. Trong hầu hết các trường hợp, bạn không cần phải sử dụng nó.
Bởi vì cho phép chạy mã ngẫu nhiên, điều này cũng đồng nghĩa với việc có vấn đề an toàn.
- Trang trước Hướng dẫn phong cách CSS JS
- Trang tiếp theo Lỗi JS
