HomeLập trìnhJavaScript13 Điểm Đáng...

13 Điểm Đáng chú ý từ Hướng dẫn Phong cách JavaScript của Google


bởi Daniel Simmons

EyAKPyvoPbvsvUBpzxNMSvEfNZfwxwZelPIk

Đối với bất kỳ ai chưa quen với nó, Google đưa ra một hướng dẫn về phong cách viết JavaScript đưa ra (những gì Google tin là) các phương pháp hay nhất để viết mã rõ ràng, dễ hiểu.

Đây không phải là những quy tắc khó và nhanh để viết JavaScript hợp lệ, chỉ là những quy tắc để duy trì các lựa chọn phong cách nhất quán và hấp dẫn trong các tệp nguồn của bạn. Điều này đặc biệt thú vị đối với JavaScript, đây là một ngôn ngữ linh hoạt và dễ tính toán, cho phép có nhiều lựa chọn về phong cách.

Google và Airbnb có hai hướng dẫn phong cách phổ biến nhất hiện có. Tôi chắc chắn khuyên bạn nên kiểm tra cả hai nếu bạn dành nhiều thời gian để viết JS.

Sau đây là 13 trong số những quy tắc mà tôi nghĩ là thú vị và phù hợp nhất từ ​​Google’s JS Style Guide.

Chúng xử lý mọi thứ, từ các vấn đề gây tranh cãi sôi nổi (các tab so với dấu cách và vấn đề gây tranh cãi về cách sử dụng dấu chấm phẩy), cho đến một số thông số kỹ thuật khó hiểu hơn khiến tôi ngạc nhiên. Họ chắc chắn sẽ thay đổi cách tôi viết JS của mình trong tương lai.

Đối với mỗi quy tắc, tôi sẽ đưa ra một bản tóm tắt về thông số kỹ thuật, theo sau là một trích dẫn hỗ trợ từ hướng dẫn phong cách mô tả chi tiết quy tắc đó. Nếu có thể, tôi cũng sẽ cung cấp một ví dụ về phong cách trong thực tế và đối chiếu nó với mã không tuân theo quy tắc.

Sử dụng khoảng trắng, không phải tab

Ngoài trình tự kết thúc dòng, ký tự khoảng cách ngang ASCII (0x20) là ký tự khoảng trắng duy nhất xuất hiện ở bất kỳ đâu trong tệp nguồn. Điều này ngụ ý rằng… Các ký tự tab là không phải được sử dụng để thụt lề.

Hướng dẫn sau đó chỉ định bạn nên sử dụng hai khoảng trắng (không phải bốn) để thụt đầu dòng.

// badfunction foo() {∙∙∙∙let name;}// badfunction bar() {∙let name;}// goodfunction baz() {∙∙let name;}

Dấu chấm phẩy là bắt buộc

Mọi câu lệnh phải được kết thúc bằng dấu chấm phẩy. Dựa vào chèn dấu chấm phẩy tự động bị cấm.

Mặc dù tôi không thể tưởng tượng được tại sao mọi người lại phản đối ý tưởng này, nhưng việc sử dụng nhất quán dấu chấm phẩy trong JS đang trở thành cuộc tranh luận mới về ‘dấu cách so với tab’. Google sẽ kiên quyết bảo vệ dấu chấm phẩy ở đây.

// badlet luke = {}let leia = {}[luke, leia].forEach(jedi => jedi.father="vader")
// goodlet luke = {};let leia = {};[luke, leia].forEach((jedi) => {  jedi.father="vader";});

Không sử dụng các mô-đun ES6 (chưa)

Chưa sử dụng các mô-đun ES6 (tức là exportimport từ khóa), vì ngữ nghĩa của chúng chưa được hoàn thiện. Lưu ý rằng chính sách này sẽ được xem xét lại sau khi ngữ nghĩa hoàn toàn chuẩn.

// Don't do this kind of thing yet:
//------ lib.js ------export function square(x) {    return x * x;}export function diag(x, y) {    return sqrt(square(x) + square(y));}//------ main.js ------import { square, diag } from 'lib';

Căn ngang không được khuyến khích (nhưng không cấm)

Thực hành này được cho phép, nhưng nó là thường không khuyến khích của Google Style. Nó thậm chí không bắt buộc phải duy trì căn chỉnh ngang ở những nơi nó đã được sử dụng.

Căn chỉnh theo chiều ngang là cách thêm một số khoảng trắng bổ sung có thể thay đổi vào mã của bạn để làm cho một số mã thông báo nhất định xuất hiện ngay bên dưới một số mã thông báo khác trên các dòng trước đó.

// bad{  tiny:   42,    longer: 435, };
// good{  tiny: 42,   longer: 435,};

Đừng dùng var nữa

Khai báo tất cả các biến cục bộ với một trong hai const hoặc let. Sử dụng const theo mặc định, trừ khi một biến cần được gán lại. Các var từ khóa không được sử dụng.

Tôi vẫn thấy mọi người sử dụng var trong các mẫu mã trên StackOverflow và các nơi khác. Tôi không thể biết liệu có những người ngoài kia sẽ ủng hộ nó hay đó chỉ là trường hợp của những thói quen cũ khó chết.

// badvar example = 42;
// goodlet example = 42;

chức năng mũi tên được ưa thích

Các hàm mũi tên cung cấp một cú pháp ngắn gọn và khắc phục một số khó khăn với this. Thích các chức năng mũi tên hơn function từ khóa, đặc biệt cho các chức năng lồng nhau

Thành thật mà nói, tôi chỉ nghĩ rằng các chức năng mũi tên là tuyệt vời bởi vì chúng ngắn gọn hơn và dễ nhìn hơn. Hóa ra chúng cũng phục vụ một mục đích khá quan trọng.

// bad[1, 2, 3].map(function (x) {  const y = x + 1;  return x * y;});// good[1, 2, 3].map((x) => {  const y = x + 1;  return x * y;});

Sử dụng chuỗi mẫu thay vì nối

Sử dụng các chuỗi mẫu (được phân cách bằng `) qua nối chuỗi phức tạp, đặc biệt nếu liên quan đến nhiều chuỗi ký tự. Chuỗi mẫu có thể kéo dài trên nhiều dòng.

// badfunction sayHi(name) {  return 'How are you, ' + name + '?';}// badfunction sayHi(name) {  return ['How are you, ', name, '?'].join();}// badfunction sayHi(name) {  return `How are you, ${ name }?`;}// goodfunction sayHi(name) {  return `How are you, ${name}?`;}

Không sử dụng phần tiếp theo của dòng cho các chuỗi dài

Không được dùng nối tiếp dòng (nghĩa là, kết thúc một dòng bên trong một chuỗi ký tự bằng dấu gạch chéo ngược) bằng ký tự chuỗi thông thường hoặc chuỗi mẫu. Mặc dù ES5 cho phép điều này, nhưng nó có thể dẫn đến các lỗi phức tạp nếu có bất kỳ khoảng trắng ở cuối nào xuất hiện sau dấu gạch chéo và ít rõ ràng hơn đối với người đọc.

Thật thú vị, đây là một quy tắc mà Google và Airbnb không đồng ý (đây là thông số kỹ thuật của Airbnb).

Đọc thêm  Khám phá phép lặp JavaScript

Mặc dù Google khuyên bạn nên nối các chuỗi dài hơn (như được hiển thị bên dưới) nhưng hướng dẫn về phong cách của Airbnb khuyến nghị về cơ bản không làm gì cả và cho phép các chuỗi dài tiếp tục miễn là chúng cần.

// bad (sorry, this doesn't show up well on mobile)const longString = 'This is a very long string that \    far exceeds the 80 column limit. It unfortunately \    contains long stretches of spaces due to how the \    continued lines are indented.';
// goodconst longString = 'This is a very long string that ' +     'far exceeds the 80 column limit. It does not contain ' +     'long stretches of spaces since the concatenated ' +    'strings are cleaner.';

“for… of” là loại ưa thích của ‘vòng lặp for’

Với ES6, ngôn ngữ hiện có ba loại khác nhau for vòng lặp. Tất cả có thể được sử dụng, mặc dù forof vòng lặp nên được ưu tiên khi có thể.

Đây là một điều kỳ lạ nếu bạn hỏi tôi, nhưng tôi nghĩ tôi nên đưa nó vào vì điều khá thú vị là Google tuyên bố một loại ưu tiên của for vòng.

Tôi luôn có ấn tượng rằng for... in các vòng lặp tốt hơn cho các đối tượng, trong khi for... of phù hợp hơn với mảng. Một tình huống kiểu ‘đúng công cụ cho đúng công việc’.

Mặc dù thông số kỹ thuật của Google ở ​​đây không nhất thiết mâu thuẫn với ý tưởng đó, nhưng vẫn rất thú vị khi biết rằng họ đặc biệt ưu tiên cho vòng lặp này.

Đọc thêm  Tres forms de factorizar un numero en JavaScript

Không sử dụng eval()

Không được dùng eval hoặc là Function(...string) hàm tạo (ngoại trừ trình tải mã). Các tính năng này có khả năng gây nguy hiểm và đơn giản là không hoạt động trong môi trường CSP.

Trang MDN cho eval() thậm chí có một phần gọi là “Không sử dụng eval!”

// badlet obj = { a: 20, b: 30 };let propName = getPropName();  // returns "a" or "b"eval( 'var result = obj.' + propName );
// goodlet obj = { a: 20, b: 30 };let propName = getPropName();  // returns "a" or "b"let result = obj[ propName ];  //  obj[ "a" ] is the same as obj.a

Các hằng số phải được đặt tên trong ALL_UPPERCASE được phân tách bằng dấu gạch dưới

Sử dụng tên hằng CONSTANT_CASE: tất cả các chữ hoa, với các từ được phân tách bằng dấu gạch dưới.

Nếu bạn hoàn toàn chắc chắn rằng một biến sẽ không thay đổi, bạn có thể chỉ ra điều này bằng cách viết hoa tên của hằng số. Điều này làm cho tính bất biến của hằng trở nên rõ ràng khi nó được sử dụng trong toàn bộ mã của bạn.

Một ngoại lệ đáng chú ý đối với quy tắc này là nếu hằng số nằm trong phạm vi chức năng. Trong trường hợp này, nó nên được viết bằng camelCase.

// badconst number = 5;
// goodconst NUMBER = 5;

Một biến trên mỗi khai báo

Mọi khai báo biến cục bộ chỉ khai báo một biến: các khai báo như let a = 1, b = 2; không được sử dụng.

// badlet a = 1, b = 2, c = 3;
// goodlet a = 1;let b = 2;let c = 3;

Sử dụng dấu ngoặc đơn, không phải dấu ngoặc kép

Các chuỗi ký tự thông thường được phân cách bằng dấu nháy đơn ('), thay vì dấu ngoặc kép (").

Mẹo: nếu một chuỗi chứa một ký tự trích dẫn, hãy cân nhắc sử dụng chuỗi mẫu để tránh phải thoát khỏi trích dẫn.

// badlet directive = "No identification of self or mission."
// badlet saying = 'Say it ain\u0027t so.';
// goodlet directive="No identification of self or mission.";
// goodlet saying = `Say it ain't so`;

Một lưu ý cuối cùng

Như tôi đã nói lúc đầu, đây không phải là nhiệm vụ. Google chỉ là một trong nhiều gã khổng lồ công nghệ và đây chỉ là những đề xuất.

Đọc thêm  Cách xây dựng Máy tính tiền boa bằng HTML, CSS và JavaScript

Điều đó nói rằng, thật thú vị khi xem xét các đề xuất về phong cách được đưa ra bởi một công ty như Google, nơi tuyển dụng rất nhiều người tài giỏi, những người dành nhiều thời gian để viết mã xuất sắc.

Bạn có thể tuân theo các quy tắc này nếu bạn muốn tuân theo các nguyên tắc dành cho ‘mã nguồn tuân thủ của Google’ — nhưng, tất nhiên, nhiều người không đồng ý và bạn có thể tự do loại bỏ bất kỳ hoặc tất cả những điều này.

Cá nhân tôi nghĩ rằng có nhiều trường hợp thông số kỹ thuật của Airbnb hấp dẫn hơn của Google. Bất kể lập trường của bạn đối với các quy tắc cụ thể này là gì, điều quan trọng là phải ghi nhớ tính nhất quán về phong cách khi viết bất kỳ loại mã nào.



Zik.vn – Biên dịch & Biên soạn Lại

spot_img

Create a website from scratch

Just drag and drop elements in a page to get started with Newspaper Theme.

Buy Now ⟶

Bài viết liên quang

DMCA.com Protection Status