Hướng dẫn phong cách JavaScript

Luôn sử dụng cùng một quy ước mã hóa cho tất cả các dự án JavaScript của bạn.

Quy ước mã JavaScript

Quy ước mã hóa (Coding conventions) là:Hướng dẫn về phong cách lập trình。Những nguyên tắc này大体 bao gồm:

  • Các quy tắc về đặt tên và khai báo biến và hàm
  • Các quy tắc về việc sử dụng khoảng trống, lùi và chú thích
  • Thói quen và nguyên tắc lập trình

Quy ước mã hóaBảo đảm chất lượng:

  • Thực hiện mã dễ đọc hơn
  • Tăng cường khả năng bảo trì mã

Quy ước mã hóa có thể là các quy định viết thành văn bản mà nhóm của bạn tuân thủ hoặc là thói quen mã hóa cá nhân của bạn.

Bạn nên tiếp tục đọc chương tiếp theo

Tên biến

Tại CodeW3C.com, chúng ta sử dụng tên标识符 (biến và hàm) theocamelCase.

Tất cả các tên bắt đầu vớiChữ cáiBắt đầu.

Trên trang này, chúng ta sẽ thảo luận rộng rãi về quy tắc đặt tên.

firstName = "Bill";
lastName = "Gates";
price = 19.90;
tax = 0.20;
fullPrice = price + (price * tax);

Khoảng trống xung quanh toán tử

Luôn thêm khoảng trống xung quanh toán tử ( = + - * / ) và dấu phẩy;

Mô hình

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

Nhấn vào mã

Luôn sử dụng 4 khoảng trống để nhấn vào khối mã;

Hàm

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

Không sử dụng tab để nhấn vào. Các trình chỉnh sửa khác nhau có thể giải thích tab khác nhau.

Quy tắc câu

Quy tắc chung cho câu đơn:

Luôn kết thúc câu đơn bằng dấu chấm phẩy;

Mô hình

var values = ["Volvo", "Saab",  "Fiat"];
var person = {
    firstName: "Bill",
     lastName: "Gates",
    age: 50,
    eyeColor:  "blue"
};

Các quy tắc chung cho câu phức tạp (compound):

  • Viết dấu mở ngoặc trên dòng đầu tiên;
  • Sử dụng một khoảng trống trước dấu mở ngoặc;
  • Viết dấu đóng ngoặc đơn trên dòng mới, không có khoảng trống đầu tiên;
  • Không kết thúc câu 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;
}

Điều kiện:

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

Quy tắc đối tượng

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

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

Mô hình

var person = {
    firstName: "Bill",
    lastName: "Gates",
    age: 19,
    eyeColor:  "blue"
};

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

var person = {firstName:"Bill", lastName:"Gates", age:50, eyeColor:"blue"};

Độ dài dòng dưới 80

Để tăng cường khả năng đọc, hãy tránh để độ dài của mỗi dòng vượt quá 80 ký tự.

Nếu câu lệnh JavaScript vượt quá độ dài một dòng, vị trí tốt nhất để换 dòng là sau toán tử hoặc dấu phẩy.

Mô hình

document.getElementById("demo").innerHTML =
    "Hello Kitty.";

Hãy thử trực tiếp

Quy ước đặt tên

Hãy luôn sử dụng cùng một quy ước đặt tên cho tất cả mã của bạn. Ví dụ:

  • Tên biến và hàm nên viếtviết hoa gợn sóngđể viết
  • sử dụng cho biến toàn cụcký tự viết hoa(Chúng ta không làm điều này, nhưng điều này rất phổ biến)
  • sử dụng cho hằng số (ví dụ như PI)ký tự viết hoa

Chúng ta có nên sử dụng trong tên biến không?dấu gạch nối、viết hoa gợn sónghoặcDấu gạch dướikhông?

Đây là vấn đề mà các nhà phát triển thường thảo luận. Câu trả lời phụ thuộc vào người trả lời vấn đề này:

Dấu gạch nối trong HTML và CSS:

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

CSS sử dụng dấu gạch nối trong property-names (font-size).

Dấu gạch nối (-) có thể bị nhầm lẫn là dấu toán trừ. Tên库名 trong JavaScript không được phép sử dụng dấu gạch nối.

Dấu gạch dưới:

Nhiều nhà phát triển thích sử dụng dấu gạch dưới (date_of_birth), đặc biệt là trong cơ sở dữ liệu SQL.

Dấu gạch dưới thường được sử dụng trong tài liệu tham khảo PHP.

Cách đặt tên PascalCase:

Nhà phát triển C thường sử dụng cách đặt tên PascalCase.

Viết hoa gợn sóng (camelCase):

JavaScript, jQuery và các thư viện JavaScript khác sử dụng viết hoa gợn sóng (camelCase).

Đặt tên JavaScript không nên bắt đầu bằng ký hiệu $ để tránh xung đột tên库名 trong JavaScript.

Tải JavaScript vào HTML

Sử dụng ngữ pháp đơn giản để tải mã脚本的 bên ngoài (thuộc tính type không bắt buộc):

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

Truy cập vào phần tử HTML

Hậu quả của việc sử dụng phong cách HTML "bất cẩn" có thể là gây ra lỗi JavaScript.

Câu lệnh JavaScript này sẽ tạo ra kết quả khác nhau:

var obj = getElementById("Demo")
var obj = getElementById("demo")

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

Truy cập hướng dẫn giao diện HTML.

đuôi tệp

Tệp HTML nên sử dụng .html đuôi tệp (không phải .htm)

Tệp CSS nên sử dụng .css Đuôi tệp.

Tệp JavaScript nên sử dụng .js Đuôi tệp.

Sử dụng tên tệp viết thường

Hầu hết các máy chủ web (Apache, Unix) phân biệt chữ hoa-thường trong tên tệp:

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

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

london.jpg có thể truy cập được bằng London.jpg hoặc london.jpg.

Nếu bạn sử dụng cả chữ hoa và chữ thường, bạn phải duy trì liên tục và nhất quán.

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

Để tránh những vấn đề này, hãy luôn sử dụng tên tệp viết thường (nếu có thể).

Hiệu suất

Máy tính sẽ không sử dụng các quy ước mã. Hầu hết các quy tắc ảnh hưởng rất nhỏ đến việc thực thi của chương trình.

Việc sử dụng dấu nhấn và khoảng trống thêm không quan trọng đối với các đoạn mã ngắn.

Đối với các đoạn mã trong quá trình phát triển, nên ưu tiên tính đọc được. Nên rút gọn các đoạn mã sản xuất lớn hơn.