JavaScript Best Practices - Cách thực hành JavaScript tốt nhất

by GokiSoft.Com - 14:06 18/05/2020 2,882 Lượt Xem

Short URL: https://gokisoft.com/1408

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

Tránh các biến toàn cục

Giảm tối đa việc sử dụng các biến toàn cục.

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

Các biến toàn cục và các hàm có thể bị viết đè bằng script khác.

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

Luôn khai báo các biến cục bộ(địa phương)

Tất cả các biến được dùng trong một hàm nên được khai báo như biến cục bộ.

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

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

Khai báo trên hàng đầu

Đây là một sự luyện tập code tốt, khi bạn đặt hết tất cả các khai báo ở trên đầu mỗi tập lệnh hoặc một hàm.

Và nó sẽ:

Cung cấp code sạch sẽ hơn
Cung cấp một nơi duy nhất để tìm các biến cục bộ.
Làm nó dễ dàng hơn trong việc tránh các biến toàn cục không mong muốn
Giảm thiểu khả năng bị khai báo lại không mong muốn

// Declare at the beginning
var firstName, lastName, price, discount, fullPrice;

// Use later
firstName = "John";
lastName = "Doe";

price = 19.90;
discount = 0.10;

fullPrice = price + discount;

Điều này cũng được áp dụng với các biến trong vòng lặp:

// Declare at the beginning
var i;

// Use later
for (i = 0; i < 5; i++) {

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

Khởi tạo các biến(Initialize Variables)

Đây là sự luyện tập code tốt, khởi tạo các biến khi bạn khai báo chúng.

Và nó sẽ:

Cung cấp code sạch sẽ hơn
Cung cấp một nơi duy nhất để khởi tạo các biến
Tránh các giá trị undefined

// Declare and initiate at the beginning
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 các đối tượng, Number, String, hoặc Boolean

Luôn coi các số, chuỗi, hoặc booleans như các giá trị nguyên thủy. Không phải như một đối tượng.

Khai báo các kiểu dữ liệu như các đối tượng, làm chậm tốc độ thực thi, và mang đến nhiều hiệu ứng phụ khó chịu:

ví dụ

var x = "John";             
var y = new String("John");
(x === y) // is false because x is a string and y is an object.

<!DOCTYPE html>
<html>
<body>

<p>Never create strings as objects.</p>
<p>Strings and objects cannot be safely compared.</p>

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

<script>
var x = "John";        // x is a string
var y = new String("John");  // y is an object
document.getElementById("demo").innerHTML = x===y;
</script>

</body>
</html>

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

ví dụ

var x = new String("John");             
var y = new String("John");
(x == y) // is false because you cannot compare objects.

<!DOCTYPE html>
<html>
<body>

<p>Never create strings as objects.</p>
<p>JavaScript cannot compare objects.</p>

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

<script>
var x = new String("John"); 
var y = new String("John");
document.getElementById("demo").innerHTML = x==y;
</script>

</body>
</html>

Đừng dùng new Object()

Dùng {} thay vì new Object()
Dùng "" thay vì new String()
Dùng 0 thay vì new Number()
Dùng false thay vì new Boolean()
Dùng [] thay vì new Array()
Dùng /()/ thay vì new RegExp()
Dùng function (){} thay vì 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

<!DOCTYPE html>
<html>
<body>

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

<script>
var x1 = {};
var x2 = "";
var x3 = 0;
var x4 = false;
var x5 = [];
var x6 = /()/;
var x7 = function(){};

document.getElementById("demo").innerHTML =
"x1: " + typeof x1 + "<br>" +
"x2: " + typeof x2 + "<br>" +
"x3: " + typeof x3 + "<br>" +
"x4: " + typeof x4 + "<br>" +
"x5: " + typeof x5 + "<br>" +
"x6: " + typeof x6 + "<br>" +
"x7: " + typeof x7 + "<br>";
</script>

</body>
</html>

Cảnh giác với sự chuyển kiểu tự động

Cảnh giác rằng các chữ số không thể lỡ bị chuyển thành chuỗi hoặc NaN (Not a Number).

JavaScript là kiểu dữ liệu lỏng lẻo. 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ể chuyển kiểu dữ liệu của chính nó:

ví dụ

var x = "Hello";     // typeof x is a string
x = 5;               // changes typeof x to a number

<!DOCTYPE html>
<html>
<body>

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

<script>
var x = "Hello";
var x = 5;
document.getElementById("demo").innerHTML = typeof x;
</script>

</body>
</html>

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

ví dụ

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

<!DOCTYPE html>
<html>
<body>

<p>Remove the comment (at the beginning of the lines) to test each case:</p>

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

<script>
var x = 5;
//x = 5 + 7;    // x.valueOf() is 12, typeof x is a number
//x = 5 + "7";  // x.valueOf() is 57, typeof x is a string
//x = "5" + 7;  // x.valueOf() is 57, typeof x is a string
//x = 5 - 7;    // x.valueOf() is -2, typeof x is a number
//x = 5 - "7";  // x.valueOf() is -2, typeof x is a number
//x = "5" - 7;  // x.valueOf() is -2, typeof x is a number
//x = 5 - "x";  // x.valueOf() is NaN, typeof x is a number

document.getElementById("demo").innerHTML = x.valueOf() + " " + typeof x;
</script>

</body>
</html>

Trừ một chuỗi cho một chuỗi, không sinh ra lỗi nhưng trả về NaN:

ví dụ

"Hello" - "Dolly"    // returns NaN

<!DOCTYPE html>
<html>
<body>

<p id="demo">My first paragraph.</p>

<script>
document.getElementById("demo").innerHTML = "Hello" - "Dolly";
</script>

</body>
</html>

Dùng === để so sánh

Toán tử so sánh == luôn chuyển kiểu(thành kiểu phù hợp) trước khi so sánh.

Toán tử === buộc so sánh với cả giá trị và kiểu:

ví dụ

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

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

<!DOCTYPE html>
<html>
<body>

<p>Remove the comment (at the beginning of each line) to test each case:</p>

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

<script>
var x;
//x = (0 == "");   // true
//x = (1 == "1");  // true
//x = (1 == true);   // true
//x = (0 === "");  // false
//x = (1 === "1");   // false
//x = (1 === true);  // false
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

Dùng các tham số mặc định

Nếu một hàm được gọi với một đối số bị thiếu, giá trị của đối số bị thiếu được đặt thành undefined.

ví dụ

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

<!DOCTYPE html>
<html>
<body>

<p>Setting a default value to a function parameter.</p>
<p id="demo"></p>

<script>
function myFunction(x, y) {
  if (y === undefined) {
    y = 0;
  }  
  return x * y;
}
document.getElementById("demo").innerHTML = myFunction(4);
</script>

</body>
</html>

ECMAScript 2015 cho phép các đối số mặc định trong gọi hàm:

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

Đọc nhiều hơn về các tham số và các đối số trong Các tham số của hàm(Function Parameters)

Kết thúc vòng Switch với Default

Luôn kết thúc câu lệnh switch của bạn bằng một lệnh default. Kể cả khi bạn nghĩ nó không cần thiết.

ví dụ

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";
}

<!DOCTYPE html>
<html>
<body>

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

<script>
var day;
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";
}
document.getElementById("demo").innerHTML = "Today is " + day;
</script>

</body>
</html>

Tránh dùng eval()

Hàm eval() được 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 dùng đến.

Bởi vì nó cho phép các code tùy ý được chạy, nó cũng gây ra một vấn đề về bảo mật.

Ứng Dụng Học

Theo dõi cập nhật nội dung học trên Youtube & Facebook

Thông Tin Liên Hệ

Công Ty Cổ Phần Phát Triển Công Nghệ Gozic.

Website: https://gozic.vn

SĐT: 096 - 70 25 996

Email: ziczacgroup@gmail.com

Thiết kế webiste chuyên nghiệp
Thiết kế phần mềm quản trị
Thiết kế ứng dụng Android
Thiết kế ứng dụng IOS
Thiết kế Web App
Hỗ trợ Digital Marketing
Hỗ trợ quảng cáo Google Ads
Hỗ trợ quảng cáo Facebook Ads
Hỗ trợ SEO Website

Tags:

javascript khoa hoc javascript khóa học javascript tài liệu javascript

Bình luận

Tôi muốn xem code từ thành viên khác

Tài Liệu Tham Khảo

Ứng Dụng Tiện Ích

MD5 Chuyển Đổi Chữ Hoa - UpperCase JSON Editor Coding Online Database Diagram Fake API Base64

Tài Liệu Học

Khai báo biến & hàm mặc định trong Javascript

Mệnh đề điều kiện

Vòng lặp for, while, do..while

Array & Function & Object

Xử lý sự kiện & thao tác thẻ HTML

Lưu trữ Javascript

Examination & Ôn Tập Tổng Quát