Định hướng Lối viết JavaScript của Airbnb() {

Một cách tiếp cận hợp lý đối với JavaScript

Lưu ý của người dịch: Bản dịch này, với nỗ lực truyền đạt nội dung bằng tiếng Việt nhiều nhất có thể, đã dịch sang tiếng Việt các thuật ngữ, và/hoặc các từ, cụm từ mà thông thường không được dịch, như: "style guide", "object", "polyfill", v.v. Nếu bạn cảm thấy không quen thuộc hoặc khó khăn trong việc hiểu một số từ trong bản dịch này, hoặc muốn biết các từ tương ứng trong Tiếng Anh, vui lòng tham khảo phần Danh mục các Thuật ngữ.

Lưu ý: Định hướng này giả định bạn đang sử dụng Babel, và đòi hỏi bạn sử dụng babel-preset-airbnb hoặc một bộ tương đương. Nó cũng giả định rằng bạn đang cài bộ trợ năng cho ứng dụng của bạn, như airbnb-browser-shims hoặc một bộ tương đương.

Định hướng này cũng được dịch sang các ngôn ngữ khác. Xem phần Dịch.

Các Định hướng Lối viết Khác

• ES5 (Đã lỗi thời)
• React
• CSS-trong-JavaScript
• CSS & Sass
• Ruby

Mục lục

1. Các Kiểu giá trị
2. Các Tham chiếu
3. Các Đối tượng
4. Các Mảng
5. Trích xuất
6. Các Chuỗi
7. Các Hàm
8. Các Hàm mũi tên
9. Các Lớp & các Hàm tạo
10. Các Mô-đun
11. Các Đối tượng duyệt and các Hàm sinh trị
12. Các Thuộc tính
13. Các Biến
14. Sự kéo lên
15. Các Toán tử So sánh và Sự bằng nhau
16. Các Khối
17. Các Câu lệnh Điều khiển
18. Các Chú thích
19. Khoảng trắng
20. Các Dấu phẩy
21. Các Dấu chấm phẩy
22. Sự ép kiểu
23. Các Quy ước Đặt tên
24. Các Hàm truy cập
25. Các Sự kiện
26. jQuery
27. Tính tương thích của ECMAScript 5
28. Lối viết ECMAScript 6+ (ES 2015+)

Các Kiểu giá trị

• 1.1 Kiểu nguyên thủy: Khi bạn truy cập một giá trị kiểu nguyên thủy, bạn làm việc trực tiếp trên giá trị của nó.

  • string
  • number
  • boolean
  • null
  • undefined
  • symbol
  • bigint

  const foo = 1;
  let bar = foo;
  
  bar = 9;
  
  console.log(foo, bar); // => 1, 9
  

  • Sự thiếu hỗ trợ cho các Symbol và BigInt không thể được lấp đầy bởi các bộ trợ năng một cách toàn diện, do đó, chúng không nên được sử dụng khi hướng đến các trình duyệt/môi trường không có hỗ trợ sẵn.

• 1.2 Kiểu phức tạp: Khi bạn truy cập một giá trị kiểu phức tạp, bạn làm việc trên tham chiếu giá trị của nó.

  • object
  • array
  • function

  const foo = [1, 2];
  const bar = foo;
  
  bar[0] = 9;
  
  console.log(foo[0], bar[0]); // => 9, 9
  

⬆ về đầu trang

Các Tham chiếu

• 2.1 Sử dụng const đối với tất cả các tham chiếu; tránh sử dụng var. eslint: prefer-const, no-const-assign

  Tại sao? Điều này đảm bảo rằng bạn không thể gán lại các tham chiếu, việc có thể gây ra các lỗi và gây khó khăn cho sự đọc hiểu mã nguồn.

  // không tốt
  var a = 1;
  var b = 2;
  
  // tốt
  const a = 1;
  const b = 2;
  

• 2.2 Nếu bạn bắt buộc phải gán lại các tham chiếu, sử dụng let, thay vì var. eslint: no-var

  Tại sao? let thuộc phạm vi khối mà nó được khởi tạo, thay vì thuộc phạm vi hàm như var.

  // không tốt
  var count = 1;
  if (true) {
    count += 1;
  }
  
  // tốt, sử dụng let.
  let count = 1;
  if (true) {
    count += 1;
  }
  

• 2.3 Lưu ý rằng cả let và const đều thuộc phạm vi khối, còn var thuộc phạm vi hàm.

  // const và let chỉ tồn tại trong phạm vi khối tạo ra chúng.
  {
    let a = 1;
    const b = 1;
    var c = 1;
  }
  console.log(a); // ReferenceError
  console.log(b); // ReferenceError
  console.log(c); // In ra 1
  

  Trong đoạn mã trên, bạn có thể thấy rằng lỗi ReferenceError xảy ra khi truy cập a và b, trong khi c vẫn là số đã gán. Nguyên nhân là vì a và b thuộc phạm vi khối, còn c thuộc phạm vi hàm chứa đoạn mã trên.

⬆ về đầu trang

Các Đối tượng

• 3.1 Sử dụng cú pháp nguyên văn {} để khởi tạo đối tượng. eslint: no-new-object

  // không tốt
  const item = new Object();
  
  // tốt
  const item = {};
  

• 3.2 Sử dụng các tên được tính của thuộc tính [key()] khi tạo các đối tượng có các tên của thuộc tính là động.

  Tại sao? Chúng cho phép bạn định nghĩa tất cả các thuộc tính của một đối tượng cùng một chỗ.

  
  function getKey(k) {
    return `tên của thuộc tính là ${k}`;
  }
  
  // không tốt
  const obj = {
    id: 5,
    name: 'San Francisco',
  };
  obj[getKey('enabled')] = true;
  
  // tốt
  const obj = {
    id: 5,
    name: 'San Francisco',
    [getKey('enabled')]: true,
  };
  

• 3.3 Sử dụng cú pháp định nghĩa phương thức rút gọn để định nghĩa các phương thức của đối tượng. eslint: object-shorthand

  // không tốt
  const atom = {
    value: 1,
  
    addValue: function (value) {
      return atom.value + value;
    },
  };
  
  // tốt
  const atom = {
    value: 1,
  
    addValue(value) {
      return atom.value + value;
    },
  };
  

• 3.4 Sử dụng cú pháp định nghĩa thuộc tính rút gọn để định nghĩa các thuộc tính của đối tượng. eslint: object-shorthand

  Tại sao? Nó ngắn gọn và súc tích.

  const lukeSkywalker = 'Luke Skywalker';
  
  // không tốt
  const obj = {
    lukeSkywalker: lukeSkywalker,
  };
  
  // tốt
  const obj = {
    lukeSkywalker,
  };
  

• 3.5 Gom tất cả các thuộc tính rút gọn ở trên cùng khi khai báo đối tượng.

  Tại sao? Điều này giúp bạn dễ dàng biết được thuộc tính nào sử dụng cú pháp rút gọn.

  const anakinSkywalker = 'Anakin Skywalker';
  const lukeSkywalker = 'Luke Skywalker';
  
  // không tốt
  const obj = {
    episodeOne: 1,
    twoJediWalkIntoACantina: 2,
    lukeSkywalker,
    episodeThree: 3,
    mayTheFourth: 4,
    anakinSkywalker,
  };
  
  // tốt
  const obj = {
    lukeSkywalker,
    anakinSkywalker,
    episodeOne: 1,
    twoJediWalkIntoACantina: 2,
    episodeThree: 3,
    mayTheFourth: 4,
  };
  

• 3.6 Chỉ sử dụng dấu lược ' ' cho các thuộc tính có định danh không hợp lệ. eslint: quote-props

  Tại sao? Nhìn chung, chúng ta sẽ thấy nó dễ đọc hơn nhiều. Nó cải thiện nhấn mạnh cú pháp, và nó cũng giúp việc tối ưu hóa bằng các trình thực thi JS hiệu quả hơn.

  // không tốt
  const bad = {
    'foo': 3,
    'bar': 4,
    'một-cái-tên': 5,
  };
  
  // tốt
  const good = {
    foo: 3,
    bar: 4,
    'một-cái-tên': 5,
  };
  

• 3.7 Không gọi các phương thức Object.prototype một cách trực tiếp, ví dụ như hasOwnProperty, propertyIsEnumerable, và isPrototypeOf. eslint: no-prototype-builtins

  Tại sao? Những phương thức này có thể bị thay thế bởi các thuộc tính của một đối tượng - như { hasOwnProperty: false } - hoặc, đối tượng có thể là một đối tượng rỗng (Object.create(null)).

  // không tốt
  console.log(object.hasOwnProperty(key));
  
  // tốt
  console.log(Object.prototype.hasOwnProperty.call(object, key));
  
  // tốt nhất
  const has = Object.prototype.hasOwnProperty; // lưu tạm phương thức một lần, dùng cho cả mô-đun.
  console.log(has.call(object, key));
  /* hoặc */
  import has from 'has'; // https://www.npmjs.com/package/has
  console.log(has.call(object, key));
  

• 3.8 Ưu tiên sử dụng cú pháp liệt kê ... so với Object.assign để tạo bản sao nhanh của một đối tượng. Sử dụng toán tử còn-lại ... để tạo một đối tượng mới với một số thuộc tính đã bị loại bỏ. eslint: prefer-object-spread

  // rất không tốt
  const original = { a: 1, b: 2 };
  const copy = Object.assign(original, { c: 3 }); // cái này làm biến đổi `original` ಠ_ಠ
  delete copy.a; // cái này cũng vậy
  
  // không tốt
  const original = { a: 1, b: 2 };
  const copy = Object.assign({}, original, { c: 3 }); // copy => { a: 1, b: 2, c: 3 }
  
  // tốt
  const original = { a: 1, b: 2 };
  const copy = { ...original, c: 3 }; // copy => { a: 1, b: 2, c: 3 }
  
  const { a, ...noA } = copy; // noA => { b: 2, c: 3 }
  

⬆ về đầu trang

Các Mảng

• 4.1 Sử dụng cú pháp nguyên văn [] để khởi tạo mảng. eslint