Code của chúng ta phải sạch và dễ đọc nhất có thể. Viết Code JavaScript cũng vậy.
Nhưng để viết code JavaScript đẹp đó thực sự là nghệ thuật.
Bởi vì chúng ta phải vừa cố gắng viết logic chính xác vừa phải cố gắng biến những thứ phức tạp (mà máy hiểu) thành thứ mà con người có thể hiểu được.
Với nhiệm vụ khó khăn này, cách viết code JavaScript đẹp mà mình sẽ giới thiệu ở dưới đây sẽ giúp bạn tiếp tục đi đúng hướng.
1. CÚ PHÁP JAVASCRIPT ĐẸP
Để viết code JavaScript đẹp thì liên quan đến khá nhiều thứ ... nhưng ở bài này, chúng ta sẽ bắt đầu với những thứ cơ bản trước đó là cú pháp JS.
Viết cú pháp đẹp là bạn đã hoàn thành phần lớn mục tiêu rồi.
> Lưu ý: Đây chỉ là phong cách cá nhân của mình. Không phải quy tắc của JS.
1.1. Ngoặc nhọn
Trong hầu hết các dự án JavaScript, cặp dấu ngoặc nhọn { } được viết theo kiểu “Ai Cập” với dấu ngoặc nhọn mở { trên cùng dòng với từ khóa tương ứng - không phải trên dòng mới.
Cũng phải có một khoảng trắng trước dấu ngoặc mở {, như sau:
// Cách đặt cặp ngoặc nhọn
if (dieuKien) {
// Code ở đây
// Ở đây nữa
}
Có nhiều người thích đặt cặp ngoặc nhọn như thế này:
if (dieuKien)
{
// Code ở đây
// Ở đây nữa
}
Nhưng mình thật sự không thích nó bởi mình không thấy sự liên kết giữa từ khóa và phần thân của nó.
Khi bạn sử dụng các extension (plugin) để định dạng code thì hầu hết nó sẽ định dạng như cách đầu tiên.
Đó là cách viết code nếu phần thân dài ( trên nhiều dòng ).
Còn một câu lệnh if trên một dòng thì sao?
Chẳng hạn như:
if (dieuKien) lamGiDo()
Trong trường hợp này, có nên đặt chúng trong ngoặc nhọn { } không?
Để chọn ra giải pháp tốt nhất. Hãy xem các ví dụ dưới đây và mình nghĩ bạn có thể tự đánh giá được khả năng đọc của chúng:
Cách #1: Những người mới học lập trình JavaScript thường làm như thế này
if (n < 0) { alert(`Điểm dễ đọc là: ${n}`); }
Xấu, khó đọc.
Cách #2: Tách ra một dòng riêng mà không cần dấu ngoặc nhọn.
if (n < 0)
alert(`Điểm dễ đọc là: ${n}`);
Đừng bao giờ làm như trên, nó dễ gây ra lỗi khi chúng ta thêm dòng mới.
Cách #3: Viết trên một dòng, không có ngoặc nhọn.
if (n < 0) alert(`Điểm dễ đọc là: ${n}`);
Có thể chấp nhận được nếu nó ngắn.
Cách #4: Cách làm phổ biến nhất
if (n < 0) {
alert(`Điểm dễ đọc là: ${n}`);
}
Bạn thấy thế nào?
Dễ quan sát hơn chứ?
Đối với cách làm này, nếu bạn muốn đọc hiểu, thêm code, chỉnh sửa đều dễ dàng.
Túm cái váy, đối với một câu lệnh rất ngắn gọn, một dòng không ngoặc nhọn thì ổn, ví dụ:
if (dieuKien) return null;
Nhưng sử dụng một khối (block code) (Cách #4) thường dễ đọc hơn.
1.2. Độ dài của một dòng
Không ai thích đọc một dòng một dòng dài cả. Code cũng thế.
Cách tốt nhất là chia chúng ra.
let str = `
Nếu bạn muốn viết chuỗi trên nhiều dòng
trong khi code thì có thể sử dụng
dấu backtick
`;
Trong câu điều kiện kết hợp cũng rất hay gặp trường hợp quá dài.
Thay thì viết như thế này:
if (id === 123 && name === 'niithanoi' && password === 'hoclaptrinh') {
// Code khi điều kiện đúng
lamGiDo();
}
Hãy tách các điều kiện thành dòng riêng biệt:
if (
id === 123 &&
name === "niithanoi" &&
password === "hoclaptrinh"
) {
// Code khi điều kiện đúng
lamGiDo();
}
Độ dài dòng tối đa nên được quy định chung ở trong một nhóm. Nó thường là 80 hoặc 120 ký tự.
Nói chung ngắn sẽ ổn hơn là dài.
1.3. Thụt lề
Thụt lề ngang được thực hiện bằng cách sử dụng 2 hoặc 4 dấu cách (phím Space) hoặc ký hiệu tab ngang (phím Tab).
Chọn sử dụng cái nào tốt hơn là một cuộc tranh cãi lớn.
Nó giống như kiểu so sánh Dynamic và Static vậy.
Nhưng Space khá là phổ biến (sử dụng 2 hoặc 4 cách)
Một lợi thế của dấu cách so với Tab là dấu cách cho phép cấu hình thụt lề linh hoạt hơn, tự do hơn.
Lưu ý:
TỰ DO CHỈ DÀNH CHO NHỮNG NGƯỜI KỶ LUẬT CAO!
Còn nếu bạn không có tính kỷ luật cao, không tự đặt ra một quy tắc sử dụng Space thống nhất, xuyên suốt cho mình thì mình khuyên bạn nên sử dụng Tab.
Ví dụ, Chúng ta có thể căn chỉnh các đối số bằng dấu ngoặc mở, như sau:
show(thamSo0,
thamSo1, // 5 spaces ở bên trái
thamSo2,
thamSo3,
thamSoCuoi
) {
// ...
}
Nếu bạn sử dụng Tab, các IDE hoặc Editor sẽ tự động điều chỉnh khoảng cách.
Ví dụ, thay vì 5 lần cách, bạn chỉ cần 1 Tab như thế này:
show(thamSo0,
thamSo1, // 1 Tab ở bên trái
thamSo2,
thamSo3,
thamSoCuoi
) {
// ...
}
Nhanh hơn, đơn giản hơn phải không?
Nếu bạn sử dụng VSCode hoặc Extension định dạng code thì mặc định nó sẽ sử dụng Tab (Chỉ cần Ctrl + S là nó sẽ định dạng code giúp bạn như trên)
Cá nhân mình thì thích sử dụng Tab, và trong trường hợp này, mình sẽ xuống dòng tham số như sau:
show(
thamSo0,
thamSo1, // 1 Tab ở bên trái
thamSo2,
thamSo3,
thamSoCuoi
) {
// ...
}
1.4. Xuống dòng để tách logic code
Ngay cả một hàm đơn lẻ thường có thể được chia thành các khối logic để dễ đọc hơn, dễ liên kết và tách ý nghĩa của chúng ra.
Trong ví dụ dưới đây, việc khởi tạo biến, vòng lặp chính và return được tách nhau ra:
// Tính x^n
function pow(x, n) {
let ketQua = 1;
// <-- Xuống dòng để tách logic
for (let i = 0; i < n; i++) {
ketQua *= x;
}
// <-- Xuống dòng để tách logic
return ketQua;
}
Chèn thêm một dòng mới để giúp code JS của bạn dễ đọc hơn.
Và không được viết hơn 9 dòng code mà chẳng xuống dòng trống.
1.5. Dấu chấm phảy
Ngôn ngữ JavaScript là một ngôn ngữ kiểu Dynamic. Nó có thể bỏ qua dấu chấm phảy ; (JavaScript Engine tự nội suy)
Nhưng dấu chấm phẩy là nên có sau mỗi câu lệnh, ngay cả khi nó có thể bị bỏ qua.
Với lại, trong JavaScript, có những trường hợp ngắt dòng không được hiểu là kết thúc câu lệnh, điều này khiến code dễ bị lỗi.
Ví dụ:
alert("Tất cả đều ổn");
[1, 2].forEach(alert)
Nhưng khi không có dấu chấm phảy như thế này:
alert("Thế này sẽ bị lỗi")
[1, 2].forEach(alert)
Chúng ta có thể nghĩ nó ổn.
Nhưng thực sự JavaScript Engine thấy như thế này:
alert("Thế này sẽ bị lỗi")[1, 2].forEach(alert)
Dĩ nhiên là trường hợp này sẽ bị lỗi ở đoạn sau.
Nếu bạn là một lập trình viên JavaScript có kinh nghiệm, bạn có thể chọn kiểu viết code mà không sử dụng dấu chấm phẩy như StandardJS.
Nhưng nếu không, tốt nhất bạn nên sử dụng dấu chấm phẩy để tránh những lỗi có thể xảy ra.
Đặc biệt là khi làm việc trong một team mà trình độ của mỗi người không giống nhau, thi thoảng lại có mem mới tò te.
Phần lớn các lập trình viên có kinh nghiệm đều đặt dấu chấm phẩy để đảm bảo code được hiểu đúng.
> Ghi chú: Thiếu dấu chấm phảy ; là không được chấp nhận trong Java. Khác với JavaScript, Java rất chặt chẽ về cú pháp. Đó cũng là một lý do khiến nó có hiệu suất cao hơn JavaScript
> Nếu bạn yêu thích những thứ chặt chẽ. Hãy HỌC JAVA (Full Stack) ngay!
1.6. Code lồng code
Có thể bạn đã biết, code lồng nhau càng sâu thì càng khiến hiệu suất kém đi.
Vì thế, các lập trình viên có kinh nghiệm thường cố gắng tránh lồng mã quá nhiều cấp độ sâu.
Ví dụ: Trong vòng lặp, đôi khi bạn nên sử dụng lệnh từ khóa continue để tránh lồng thêm.
Thay vì thêm một if lồng nhau có điều kiện như thế này:
for (let i = 0; i < 10; i++) {
if (dieuKien) {
... // <- Thêm một cấp lồng
}
}
Bạn có thể viết như thế này:
for (let i = 0; i < 10; i++) {
if (!dieuKien) continue;
... // <- Không bị lồng thêm
}
Điều tương tự có thể được thực hiện với if / else và return.
Ví dụ, hai cấu trúc dưới đây giống hệt nhau.
Cách 1:
function pow(x, n) {
if (n < 0) {
alert("Không chơi số ÂM");
} else {
let ketQua = 1;
for (let i = 0; i < n; i++) {
ketQua *= x;
}
return ketQua;
}
}
Cách 2:
function pow(x, n) {
if (n < 0) {
alert("Không chơi số ÂM");
return;
}
let ketQua = 1;
for (let i = 0; i < n; i++) {
ketQua *= x;
}
return ketQua;
}
Cái thứ hai dễ đọc hơn vì "trường hợp đặc biệt" của n bằng 0 sẽ được xử lý sớm.
Sau khi kiểm tra xong, chúng ta có thể chuyển sang các dòng code chính mà không cần phải lồng thêm nhiều lần.
1.7. Vị trí đặt khai báo hàm
Nếu bạn đang viết một số hàm “trợ giúp” và code sử dụng chúng, có ba cách để tổ chức các hàm.
Cách 1: Khai báo các hàm ở phía trên và sau đó sử dụng
// Khai báo các hàm
function taoPhanTu() {
...
}
function thietLapPhanThu(elem) {
...
}
function lamGiDo() {
...
}
// Code sử dụng chúng
let elem = taoPhanTu();
thietLapPhanThu(elem);
lamGiDo();
Cách 2: Sử dụng chúng trước và sau đó khai báo chúng
// Code sử dụng chúng trước
let elem = taoPhanTu();
thietLapPhanThu(elem);
lamGiDo();
// Sau đó hai báo các hàm
function taoPhanTu() {
...
}
function thietLapPhanThu(elem) {
...
}
function lamGiDo() {
...
}
Nếu như bạn đã biết hoisting trong JavaScript thì khi chạy chương trình, JavaScript Engine sẽ kéo các khai báo lên trên đầu trước khi thực sự thực hiện điều gì đó.
Và cách làm trên hoạt động như bình thường.
Cách 3: Một hàm được khai báo ở nơi nó được sử dụng lần đầu tiên.
Hầu hết, cách thứ 2 được sử dụng phổ biến hơn.
Bởi vì khi đọc code, trước tiên chúng ta sẽ muốn biết chúng cái gì đang làm việc.
Sau đó nếu chúng ta muốn biết hàm này hoạt động như thế nào thì chúng ta sẽ tìm đến chỗ khai báo nó.
Hoặc nếu tên hàm đã mô tả được ý nghĩa của nó thì có lẽ chúng ta chẳng cần xem khai báo chúng làm gì cả (nếu nó chạy được).
1.8. Khai báo, định nghĩa
Đừng khai báo biến như thế này:
let a="ABC";
Thay vào đó, hãy làm thế này:
let a = "ABC";
Đừng khai báo mảng thế này:
let arr = [1,2,3,4,5];
Hãy làm như thế này:
let arr = [1, 2, 3, 4, 5];
Các dấu cách sau mỗi phần tử (sẽ được bỏ qua bởi JavaScript Engine) giúp bạn đọc mảng dễ hơn.
Và cũng đừng khai báo vòng lặp như thế này:
for(let i=1; i<10, i++) {
// Làm cái gì đó
}
Thay vào đó, hãy làm thế này:
for (let i = 1; i < 10, i++) {
// Làm cái gì đó
}
Đừng khai báo đối tượng như thế này:
let sinhVien = {ten:"Nguyen Van A",tuoi:19,mssv:"NIIT3369"};
Thay vào đó, hãy làm như thế này:
let sinhVien = {
ten: "Nguyen Van A",
tuoi: 19,
mssv: "NIIT3369"
}
2. CÓ CÁC HƯỚNG DẪN CÁCH VIẾT CODE JS CỤ THỂ NÀO KHÁC KHÔNG?
Có!
Có nhiều hướng dẫn về quy tắc viết code JavaScript, ví dụ: Sử dụng dấu ngoặc kép nào, bao nhiêu dấu cách để thụt lề, độ dài dòng tối đa, v.v.
Rất nhiều thứ nhỏ nhặt.
Khi tất cả các thành viên trong nhóm sử dụng cùng một kiểu lập trình, code sẽ trông đồng nhất, cho dù là thành viên nào trong nhóm đã viết nó.
Tất nhiên, một bạn hoặc nhóm của bạn có thể tự viết cách viết code JS phong cách của riêng họ, nhưng thường thì không cần thiết.
Bởi vì đã có rất nhiều hướng dẫn (hoàn chỉnh) hiện có để lựa chọn.
Một số lựa chọn phổ biến:
Nếu bạn là một người mới bắt đầu, thì đừng quên HỌC JAVASCRIPT cho vững nhé.
Sau đó, bạn có thể xem qua các hướng dẫn viết code JS khác (đã giới thiệu ở trên) để chọn cái bạn thích nhất.
3. TỰ ĐỘNG ĐỊNH DẠNG CODE JS
Có các công cụ có thể tự động kiểm tra kiểu mã của bạn và đưa ra các đề xuất cải tiến.
Điều tuyệt vời về chúng là kiểm tra kiểu cũng có thể tìm thấy một số lỗi, như lỗi chính tả trong tên biến hoặc hàm.
Do tính năng này, nên sử dụng chúng ngay cả khi bạn không muốn dính vào một “kiểu viết code” cụ thể.
Dưới đây là một số công cụ nổi tiếng:
-
JSLint - một trong những công cụ đầu tiên.
-
JSHint - nhiều cài đặt hơn JSLint.
-
ESLint - có lẽ là công cụ theo tiêu chuẩn (ES) mới nhất
Tất cả chúng đều có thể làm được việc.
Mình thì sử dụng ESLint.
Hầu hết các công cụ đều được tích hợp với các Editor hay IDE phổ biến.
Do đó, bạn chỉ cần mở phần cài đặt Extension / Plugin lên và tìm kiếm "ESlint" rồi sau đó cài đặt.
Ví dụ, đối với ESLint, bạn nên làm như sau:
-
Cài đặt Node.js.
-
Cài đặt ESLint bằng lệnh
npm install -g eslint (npm là một trình cài đặt package của JavaScript).
-
Tạo một tệp cấu hình có tên
.eslintrc trong thư mục gốc của dự án JavaScript của bạn (trong thư mục chứa tất cả các tệp của bạn).
-
Cài đặt / bật plugin cho Editor của bạn tích hợp với ESLint.
Dưới đây là ví dụ về tệp .eslintrc:
{
"extends": "eslint:recommended",
"env": {
"browser": true,
"node": true,
"es6": true
},
"rules": {
"no-console": 0,
"indent": ["warning", 2]
}
}
Ở đây, chỉ thị extends biểu thị rằng cấu hình dựa trên bộ cài đặt eslint:recommended. Sau đó, chúng ta có thể cài đặt thêm.
Bạn cũng có thể tải xuống các bộ quy tắc từ web và thay vì extend nó. Xem https://eslint.org/docs/user-guide/getting-started để biết thêm chi tiết về cách cài đặt.
Ngoài ra, một số trình soạn thảo như VSCode hỗ trợ rất tốt định dạng code.
Bạn có thể cài đặt ESlint trên VS Code như sau:
-
Extensions (Hoặc Ctrl + Shift + X)
-
Đi đến
Manager > Extension Setting nếu bạn biết cài đặt (Còn không thì để mặc định)
TỔNG KẾT VỀ CÁCH VIẾT CODE JS ĐẸP
Tất cả các quy tắc viết code JavaScript đẹp được chia sẻ trong bài viết này (và trong hướng dẫn kiểu được tham chiếu) nhằm mục đích tăng khả năng đọc mã của bạn.
Tuy nhiên, nó không phải là hoàn hảo.
Khả năng đọc tốt hơn như thế nào vẫn còn là điều tranh cãi.
Nhưng chỉ cần khi bạn nghĩ về việc làm sao để viết code JS tốt hơn, câu hỏi chúng ta nên tự hỏi là:
"ĐIỀU GÌ LÀM CHO CODE DỄ ĐỌC VÀ DỄ HIỂU HƠN?"
và
"ĐIỀU GÌ CÓ THỂ GIÚP TRÁNH SAI SÓT?"
Và nếu bạn cho rằng phương án của bạn giải quyết được 2 câu hỏi trên thì cách viết code JS của bạn là Đẹp.
Ít nhất nó tốt đối với bạn.
2 câu hỏi này cũng chính là 2 câu hỏi cần trả lời khi tranh luận về cách viết code nào đẹp hơn.
Và cuối cùng, hãy thường xuyên đọc các hướng dẫn các viết code phổ biến sẽ giúp bạn cập nhật những ý tưởng mới nhất về xu hướng code và các cách viết code JS đẹp nhất.
Làm một bài tập đơn giản nhé, hãy vận dụng các cách viết code JavaScript đẹp ở trên để viết lại đoạn code này theo cách tốt hơn:
function pow(x,n)
{
let ketQua=1;
for(let i=0;i<n;i++) {ketQua*=x;}
return ketQua;
}
let x=prompt("x?",''), n=prompt("n?",'')
if (n<=0)
{
alert(`Số ${n} không chơi bạn ơi. Làm ơn điền lại một số nguyên dương bạn nhé!`);
}
else
{
alert(pow(x,n))
}
Chúc bạn học JS tốt.
Đọc thêm:
> Cách đặt tên trong JavaScript
> Cách đặt tên trong Java
---
HỌC VIỆN ĐÀO TẠO CNTT NIIT - ICT HÀ NỘI
Học Lập trình chất lượng cao (Since 2002). Học làm Lập trình viên. Hành động ngay!
Đc: Tầng 3, 25T2, N05, Nguyễn Thị Thập, Cầu Giấy, Hà Nội
SĐT: 02435574074 - 0914939543
Email: hello@niithanoi.edu.vn
Fanpage: https://facebook.com/NIIT.ICT/
#niit #niithanoi #niiticthanoi #hoclaptrinh #khoahoclaptrinh #hoclaptrinhjava #hoclaptrinhphp #java #php #python