IMG-LOGO
×

Tài Liệu Học

Khoá học lập trình Javascript

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

[Video] Tạo dự án JS đầu tiên - Lập Trình JS [Video] Khai báo biến - toán tử - Lập Trình JavaScript [Video] Các hàm sẵn có trong js - Khoá Học Lập Trình JS

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

[Video] Cấu trúc điều kiện if else switch - Lập trình Javascript

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

[Video] Tìm hiểu vòng lặp for, while, do .. while trong Javascript

Array & Function & Object

[Video] Tìm hiểu Function trong Javascript [Video] Tìm hiểu Array trong Javascript [Video] Khai báo Object trong Javascript [Video] Gửi giữ liệu qua các trang html bằng javascript - HTML/CSS [Video] Bài tập - ôn tập mảng - quản lý sinh viên - Lập trình Javascript [Video] Khai báo function trong Object - Lập trình Javascript [Video] Tìm hiểu function trong string - Lập trình Javascript

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

[Video] Event - Lập Trình JS [Video] Tương tác lên tags trong HTML bằng JS [Video] Thêm tags vào tags khác bằng javascript + ví du thêm sinh viên - lập trình JS [Video] Tương tác thẻ HTML bằng Javascript qua ví dụ đặt đơn hàng (Order Entry Form) [Video] Bài tập - Quản lý sản phẩm bằng javascript - lập trình javascript [Video] Quản lý sinh viên - Lập trình Javascript

Lưu trữ Javascript

[Video] Cookie - khoá học lập trình JavaScript [Video] Localstorage - Khoá học lập trình JavaScript [Video] Lưu trữ thông tin sinh viên bằng LocalStorage - Lập trình Javascript

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

1000 Bài tập JavaScript - Lập Trình JavaScript




Trang Chủ Học JS JavaScript Best Practices - Cách thực hành JavaScript tốt nhất

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

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

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.


Bình luận



Tài Liệu Tham Khảo

Đã sao chép!!!