Phong cách javascript

Because

```javascript
// Không tốt
var a = 1;
var b = 2;

// Tốt
const a = 1;
const b = 2;
```

3 nó chỉ có nghĩa trong một phạm vi xác định nhất (Phạm vi khối), không giống như 

```javascript
// Không tốt
var a = 1;
var b = 2;

// Tốt
const a = 1;
const b = 2;
```

6 có nghĩa trong một hàm (Phạm vi chức năng)

Đối với những ai chưa biết, Google đã cho ra mắt Hướng dẫn về phong cách viết code Javascript chỉ ra cách (Google tin là) sẽ làm cho code viết ra sạch sẽ và dễ hiểu hơn

Đây là những hướng dẫn để duy trì phong cách phù hợp trong tệp nguồn chứ không phải là những quy tắc khó hoặc nhanh để viết mã Javascript khả dụng. Điều này khá phù hợp với Javascript – một ngôn ngữ linh hoạt cho phép nhiều sự lựa chọn phong phú

Google và Airbnb có 2 trong những Style guide nổi tiếng nhất. Các bạn nên xem qua cả 2 nếu đang dành nhiều thời gian để viết code Javascript

Bên dưới là 13 điều khiển được cho là thú vị và thích hợp nhất từ ​​Google’s JS Style Guide. Họ nhắc đến mọi thứ từ những vấn đề đang tranh cãi gay gắt (như tab vs dấu cách, dấu chấm phẩy. ) đến một vài vấn đề chuyên biệt khác nhau khiến tác giả phải ngạc nhiên. Họ chắc chắn đã thay đổi cách viết mã JS sau điều này

Với mỗi quy định tác giả sẽ tóm tắt lại, theo sau đó là một dòng trích dẫn mô tả chi tiết quy định đó trong Style Guide. Những nơi cần thiết, tác giả cũng sẽ cung cấp ví dụ giả thực tiễn và so sánh nó với mã không viết theo hướng dẫn để các bạn có góc nhìn tổng quan hơn

Use space chứ không sử dụng tab

Bên cạnh các dãy kết thúc dòng, ký tự không gian theo bảng ASCII (0x20) là ký tự khoảng trắng duy nhất xuất hiện bất cứ nơi nào trong tệp nguồn. Điều này có nghĩa là. Tab ký tự không được sử dụng để canh lề

Hướng dẫn này sẽ chỉ cho bạn cách sử dụng 2 lần phím cách (chứ không phải 4) để canh lề

// bad
function foo() {
∙∙∙∙let name;
}
// bad
function bar() {
∙let name;
}
// good
function baz() {
∙∙let name;
}

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

Mỗi câu lệnh đều phải kết thúc bằng dấu ;

Unsigned character character ;

Mặc dù tôi (- tác giả) không tưởng tượng nổi tại sao nhiều người lại bất đồng với ý kiến ​​này, việc sử dụng dấu ; . Google chắc chắn đang chọn sử dụng dấu ;

// bad
let luke = {}
let leia = {}
[luke, leia].forEach(jedi => jedi.father = 'vader')

// good
let luke = {};
let leia = {};
[luke, leia].forEach((jedi) => {
  jedi.father = 'vader';
});

Please (tạm thời) not used ES6 Module

Vui lòng (tạm thời) chưa sử dụng các mô-đun ES6 (tức là các từ khóa đầu vào) bởi vì nghĩa của chúng vẫn chưa được giải quyết xong. Lưu ý là điều này sẽ được xem xét lại ngay khi ngữ nghĩa đã được định nghĩa

// 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 cũng không bị cấm)

Điều khoản này được cho phép nhưng Google Style không khuyến khích nó. Thôi chí việc duy trì căn ngang ở những nơi đã từng được căn ngang còn không bắt buộc

Căn ngang là việc thêm vào mã của bạn những khoảng trống để đảm bảo các mã thông báo xuất hiện trực tiếp bên dưới các mã thông báo khác của dòng trước

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

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

Don't use var more

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

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

________số 8

Nên sử dụng arrow function

Arrow function cung cấp một cú pháp thu gọn và sửa đổi nhiều khó khăn khi viết cú pháp. Nên sử dụng chức năng mũi tên thay vì từ khóa chức năng, đặc biệt là cho các chức năng lồng nhau

Thú thực là tôi chỉ nghĩ là chức năng mũi tên tuyệt vời vì họ nhìn ngắn gọn và dễ chịu hơn, hóa ra thì họ giải quyết được rất nhiều vấn đề

// 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;
});

Use template string instead of concatenation

Sử dụng các chuỗi mẫu (được phân định bằng `) thay vì các chuỗi nối phức tạp, đặc biệt khi có nhiều chuỗi ký tự. Chuỗi mẫu có thể trải rộng trên nhiều dòng

```javascript
// Không tốt
var a = 1;
var b = 2;

// Tốt
const a = 1;
const b = 2;
```

0

Không sử dụng các dòng liên tục đối với các chuỗi dài

Không sử dụng các dòng liên tục ( nghĩa là, kết thúc 1 dòng bên trong 1 chuỗi ký tự với một \) trong bất kể cả ký tự chuỗi mẫu hay bình thường. Mặc dù ES5 cho phép điều này nhưng nó có thể dẫn đến các lỗi nếu bất kỳ khoảng trắng nào theo dấu gạch chéo và ít rõ ràng hơn so với người đọc

Thật thú vị và quy định này Google và Airbnb lại không đồng ý với nhau (theo hướng dẫn Airbnb)

Trong khi Google khuyến mãi nối lại các chuỗi dài hơn (như bên dưới) thì Airbnb lại nhấn mạnh rằng không nên làm gì cả và cho phép các chuỗi cứ kéo dài đến khi nào cần

```javascript
// Không tốt
var a = 1;
var b = 2;

// Tốt
const a = 1;
const b = 2;
```

1

"vì. of” được khuyến mãi hơn “for loop”

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

Điều này có vẻ hơi kỳ lạ nếu bạn hỏi tôi, nhưng tôi nghĩ mình vẫn nên đề cập đến vì thực sự thú vị là Google tuyên bố có một dạng tốt hơn của vòng lặp for

Tôi luôn bị ấn tượng rằng vì. in loops better than for objects, while for. of the reason better with the value in array (mảng). Đây là một trường hợp điển hình của “công việc của mọi người”

Tuy Google không thực sự chỉ ra ngoài đối xứng với ý tưởng này nhưng vẫn thực sự thú vị khi biết rằng họ có sở thích sử dụng vòng lặp này hơn

Không sử dụng eval()

Don't used eval or is Function(…string) (ngoại trừ code loader). Những tính năng này khá nguy hiểm và không hoạt động trong môi trường CSP

Trang MDB cho eval() even also has 1 section call is “ Don't use eval”

// bad
let luke = {}
let leia = {}
[luke, leia].forEach(jedi => jedi.father = 'vader')

0

Hằng số phải đạt được tên trong ALL_UPPERCASE, được tách ra bởi gạch dưới

Tên các hằng số sử dụng CONSTANT_USE. Tất cả các ký tự phải viết hoa với các khoảng cách nhau bằng dấu gạch dưới

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

Lưu ý là quy định này không áp dụng với các hằng số trong phạm vi chức năng. Trong trường hợp này, nó nên được viết bằng camelCase

// bad
let luke = {}
let leia = {}
[luke, leia].forEach(jedi => jedi.father = 'vader')

1

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

Mỗi khai báo biến cục bộ chỉ khai báo 1 biến. những khai báo như let a = 1, b = 2 không nên sử dụng

// bad
let luke = {}
let leia = {}
[luke, leia].forEach(jedi => jedi.father = 'vader')

2

Use ‘ chứ không phải “

Các chuỗi ký tự thông thường thường được phân cách bằng dấu ‘ hơn là dấu ‘’

Lời khuyên. if a string has contains dấu ‘. Vui lòng xem xét sử dụng chuỗi bảng nhóm để tránh phải thoát

// bad
let luke = {}
let leia = {}
[luke, leia].forEach(jedi => jedi.father = 'vader')

3

Ghi chú cuối cùng

Như tôi đã nói ngay từ đầu, đây không phải là mệnh lệnh. Google chỉ là một trong những công ty công nghệ lớn và những điều trên chỉ là đề xuất thôi. Tuy nhiên, cũng phải nói rằng thực sự thú vị khi đọc các đề xuất phong cách được xuất bản bởi các công ty như Google – nơi đã tuyển dụng rất nhiều người tài năng – đã dành nhiều thời gian để viết ra những đoạn mã tuyệt vời này

Bạn có thể code theo những quy định này nếu bạn muốn theo sự chỉ dẫn viết mã nguồn của Google, tuy nhiên cũng sẽ có rất nhiều người không tán thành, và bạn cứ tự nhiên gạt hết đi nhưng thứ không phù hợp với bản thân.

Cá nhân tôi nghĩ là có nhiều trường hợp sách hướng dẫn của Airbnb hấp dẫn hơn so với Google. Bất kể lập trường của bạn như thế nào, điều quan trọng nhất vẫn là phải giữ được 1 kiểu hệ thống nhất khi viết bất kỳ dòng mã nào