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 Style Guide and Coding Conventions - Hướng dẫn phong cách và quy ước viết code trong JavaScript

JavaScript Style Guide and Coding Conventions - Hướng dẫn phong cách và quy ước viết code trong JavaScript

by GokiSoft.Com - 21:47 18/05/2020 2,213 Lượt Xem

Luôn sử dụng một quy ước viết code cho tất cả các dự án JavaScript.



Quy ước viết code JavaScript(JavaScript Coding Conventions)


Các quy ước code là các hướng dẫn phong cách lập trình. Chúng thông thường bao gồm:

  • Các quy tác đặt tên và khai báo cho các biến và các hàm.
  • Các quy tắc sử dụng khoảng trắng, thụt dòng, và các chú thích.
  • Thực hành lập trình và các nguyên lý.

Quy ước lập trình khiến chất lượng code được đảm bảo:

  • Cải thiện khả năng đọc code
  • Làm code dễ dàng hơn trong việc bảo trì

Các quy ước code có thể là các quy tắc được tài liệu hóa cho các nhóm làm theo, hoặc chỉ là sự luyện tập cá nhân của bạn.

Trang này thể hiện các quy ước phổ biến trong các quy ước code trong JavaScript.

Bạn cũng nên đọc chương tiếp theo "Các luyện tập tốt nhất(Best Practices)", và học cách tránh các bẫy về code.



Tên biến


Trong W3school chúng ta dùng camelCase cho việc xác đinh tên (biến và hàm).

Tất cả các tên bắt đầu bằng một chữ cái.

Ở cuối của trang này, bạn sẽ tìm thấy các bàn luận rộng hơn về các quy tắc đặt tên.

firstName = "John";
lastName = "Doe";

price = 19.90;
tax = 0.20;

fullPrice = price + (price * tax);



Khoảng trắng quanh các toán tử


Luôn đặt các khoảng trắng xung quanh các toán tử ( = + - * /), và sau các dấu phẩy:

ví dụ

var x = y + z;
var values = ["Volvo", "Saab", "Fiat"];



Thụt đầu dòng code


Luôn sử dụng hai khoảng trắng để lùi đầu dòng cho các khối code:

hàm:

function toCelsius(fahrenheit) {
  return (5 / 9) * (fahrenheit - 32);
}


Không sử dụng tab cho việc thụt đầu dòng. Các trình biên dịch khác nhau dịch các tab theo các cách khác nhau.



Các quy tắc về cú pháp


Các quy tắc dùng cho các câu lệnh đơn giản:

  • Luôn kết thúc một câu lệnh đơn giản với một dấu chấm phẩy.

ví dụ

var values = ["Volvo", "Saab", "Fiat"];

var person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};


Các quy tắc chung cho các câu lệnh phức tạp(ghép) :

  • Đặt dấu ngoặc nhọn mở ở cuối dòng đầu tiên.
  • Sử dụng một khoảng trắng trước dấu ngoặc nhọn mở.
  • Đặt dấu ngoặc nhọn đóng trên một dòng mởi, không sử dụng khoảng trắng đầu dòng.
  • Đừng kết thúc một câu lệnh phức tạp bằng dấu chấm phẩy.


Hàm:

function toCelsius(fahrenheit) {
  return (5 / 9) * (fahrenheit - 32);
}


Vòng lặp

for (i = 0; i < 5; i++) {
  x += i;
}


Câu điều kiện

if (time < 20) {
  greeting = "Good day";
} else {
  greeting = "Good evening";
}



Các quy tắc của đối tượng(object)


Các quy tắc dung cho việc định nghĩa đối tượng:

  • Đặt dấu ngoặc mở trên cùng dòng với tên đối tượng.
  • Sử dụng dấu hai chấm thêm một khoảng trắng giữa mỗi thuộc tính và các giá trị của nó.
  • Sử dụng các dấu nháy xung quanh các giá trị chuỗi, không sử dụng chúng xung quanh các giá trị số.
  • Không thêm dấu phẩy sau cặp giá trị - thuộc tính cuối cùng.
  • Đặt dấu ngoặc đóng trên một dòng mới, mà không có khoảng trắng ở đầu.
  • Luôn luôn kết thúc một định nghĩa đối tượng bằng một dấu chấm phẩy.


ví dụ

var person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};


Các đối tượng ngắn có thể được viết nén, trên một dòng, chỉ dùng các khoảng trắng giữa các thuộc tính, như thế này:

var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};



Độ dài của một dòng < 80


Cho khả năng đọc dễ dàng, tránh các dòng dài hơn 80 kí tự.

Nếu một câu lệnh JavaScript không vừa trên một dòng, nơi tốt nhất để ngắt nó, là sau một toán tử hoặc một dấu phẩy.

ví dụ

document.getElementById("demo").innerHTML =
"Hello Dolly.";
<!DOCTYPE html>
<html>
<body>

<h2>My Web Page</h2>

<p>The best place to break a code line is after an operator or a comma.</p>

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

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

</body>
</html>



Các quy ước đặt tên(Naming Conventions)


Luôn sử dụng một quy ước đặt tên giống nhau cho tất cả code của bạn. Ví dụ:

  • Các tên biến và tên hàm được viết dưới dạng camelCase
  • Các biến toàn cục được viết dưới dạng CHỮ IN HOA(UPERCASE) (Chúng tôi không dùng, nhưng nó rất phổ biến)
  • Các hằng số (như PI) được viết dưới dạng CHỮ IN HOA(UPPERCASE)

Bạn có nên sử dụng gạch-nối, camelCase, hoặc dấu_gạch_dưới trong các tên biến không?

Đây là một câu hỏi mà các lập trình viên thường xuyên thảo luận. Kết quả phụ thuộc vào người mà bạn hỏi:

Các dấu gạch ngang trong HTML và CSS(Hyphens in HTML and CSS):

Các thuộc tính HTML5 có thể bắt đầu bằng dữ liệu-(data-) (data-quantity, data-price).

CSS dùng các dấu gạch ngang trong các tên thuộc tính (font-size).

Các dấu gạch ngang có thể bị nhầm như một phép trừ. Dấu gạch ngang không cho phép trong đặt tên của JavaScript.

Dấu gạch dưới(Underscrores):

Nhiều lập trình viên ưa thích sử dụng các dấu gạch dưới (date_of_birth), đặt biệt trong các cơ sở dữ liệu SQL.

PascalCase:

PascalCase thường được ưa thích bởi các lập trình viên C.

camelCase:

camelCase được dùng bởi chính JavaScript, với jQuery, và các thư viện JavaScript khác.

Đừng bắt đầu các tên bằng một dấu $. Nó sẽ khiến bạn bị xung đột với nhiều tên thư viện của JavaScript.



Tải lên JavaScript trong HTML


Dùng cú pháp đơn giản cho việc tải lên các script bên ngoài (kiểu của thành phần là không cần thiết).

<script src="myscript.js"></script>



Truy cập các thành phần HTML


Một kết quả của việc sử dụng các phong cách HTML "không gọn gàng", có thể dẫn đến lỗi JavaScript.

Hai dòng lệnh JavaScript này sẽ dẫn đến hai kết quả khác nhau

var obj = getElementById("Demo")

var obj = getElementById("demo")


Nếu có thể, sử dụng cùng quy ước đặt tên (như JavaScript) trong HTML.



Các file mở rộng(File Extensions)


Các file HTML nên có một đuôi mở rộng là .html (không phải .htm).

Các file CSS nên có một đuôi mở rộng là .css

Các file JavaScript nên có một đuôi mở rộng là .js.



Sử dụng các tên file viết thường.


Hầu hết các máy chủ web (Apache, Unix) đều là phân biệt hoa thường với các tên file:

london.jpg không thể được truy cập như London.jpg.

Các máy chủ khác (Microsoft, IIS) không phân biệt hoa thường:

london.jpg có thể được truy cập như London.jpg hay london.jpg.

Nếu bạn sử dụng kết hợp chữ hoa và chữ thường, bạn phải cực kì nhất quán.

Nếu bạn di chuyển từ một máy chủ không phân biệt hoa thường, sang một máy chủ phân biệt hoa thường, kể cả một lỗi nhỏ có thể làm hỏng trang web của bạn.

Để tránh các lỗi này, luôn dùng các tên file viết thường (nếu có thể).



Hiệu năng


Các quy ước code không được sử dụng bên trong các máy tính. Hầu hết các quy tác có một ảnh hưởng nhỏ trong việc thực thi các chương trình.

Sự thụt dòng và khoảng trắng ảnh hưởng không đáng kể trong các tập lệnh nhỏ.

Đối với code trong phát triển, khả năng đọc nên được ưu tiên. Các tập lệnh sản xuất lớn hơn nên được giảm thiểu.


Bình luận



Chia sẻ từ lớp học

Phân Loại Bài Viết

Tài Liệu Tham Khảo

Đã sao chép!!!