Hướng dẫn Airbnb JavaScript Style Guide

8102

Những nội dung của bài viết gồm có:

  1. Types
  2. References
  3. Objects
  4. Arrays
  5. Destructuring
  6. Strings
  7. Functions
  8. Arrow Functions
  9. Constructors
  10. Modules
  11. Iterators and Generators
  12. Properties
  13. Variables
  14. Hoisting
  15. Comparison Operators & Equality
  16. Blocks
  17. Comments
  18. Whitespace
  19. Commas
  20. Semicolons
  21. Type Casting & Coercion
  22. Naming Conventions
  23. Accessors
  24. Events
  25. jQuery
  26. ECMAScript 5 Compatibility
  27. ECMAScript 6 Styles
  28. Testing
  29. Performance
  30. Resources
  31. In the Wild
  32. Translation
  33. The JavaScript Style Guide Guide
  34. Chat With Us About JavaScript
  35. Contributors
  36. License

Types

  • 1.1 Primitives: Khi bạn truy cập các kiểu dữ liệu nguyên thủy, bạn làm việc trực tiếp với giá trị của biến (tham trị).
    • string
    • number
    • boolean
    • null
    • undefined

  • 1.2 Complex: Khi bạn làm việc với các kiểu dữ liệu phức tạp, bạn làm việc gián tiếp với giá trị của biến thông qua địa chỉ vùng nhớ của nó (tham chiếu).
    • object
    • array
    • function

References

  • 2.1 Sử dụng const cho khai báo hằng; tránh sử dụng var.

> Khi sử dụng cost chúng ta không thể thay đổi giá trị của nó. Điều này giúp chúng ta ngăn chặn các lỗi có thể xảy ra

  • 2.2 Để thay đổi các thông số, sử dụng let và tránh sử dụng var.

> Vì let nó chỉ có nghĩa trong một phạm vi nhất định (Block-Scope), không giống như var có nghĩa trong một hàm (Funciton-Scope).

  • 2.3 letconst có giá trị trong một phạm vi nhất định (Block-Scope).

Objects

  • 3.1 Dùng {} để tạo một đối tượng.
  • 3.2 Không sử dụng các từ khoá mặc định để làm thuộc tính.
  • 3.3 Dùng những từ ngữ đồng nghĩa với thuật ngử dành riêng.
  • 3.4 Sử dụng tên thuộc tính khi tạo đối tượng với tên thuộc tính động.

> Việc này giúp chúng ta định nghĩa tất cả các thuộc tính của đối tượng một lần duy nhất.

  • 3.5 Sử dụng cách khai báo phương thức rút ngắn (Property Value Shorthand).

  • 3.6 Sử dụng cách khai báo rút ngắn cho thuộc tính (Object Method.

> Cách viết ngắn gọn và dể hiểu hơn.

  • 3.7 Gom nhóm các thuộc tính được khai báo rút ngắn đặt lên đầu của mỗi đối tượng.

Arrays

  • 4.1 Sử dụng [] để khai báo một mảng.

     
  • 4.2 Dùng Array#push để thêm một phần từ vào mảng thay vì thêm trực tiếp.

     

 

  • 4.3 Dùng ... (Spreads) để sao chép mảng.// Không tốt

     
  • 4.4 Dùng Array#from để chuyển đổi từ đối tượng sang mảng.

Destructuring

  • 5.1 Dùng Destructuring để chuyển giá trị từng thuộc tính của đối tượng vào một biến.

    Điều này giúp giảm bớt việc dùng các biến tạm thời để lưu các thuộc tính trong đối tượng.

     

     

  • 5.2 Dùng destructuring cho mảng.

     

  • 5.3 Dùng destructuring cho nhiều giá trị trả về, không dùng destructuring array.

> Cách dùng này giúp chúng ta có thể thêm một thuộc tính mới hoặc sắp xếp thứ tự trả về mà không gây ảnh hưởng cho các hàm khác.

Strings

  • 6.1 Sử dụng dầu nháy đơn '' đối với chuỗi.

     
  • 6.2 Khi chuỗi dài hơn 100 kí tự nên chia nhiều dòng và nối chuỗi đó lại.
  • 6.3 Ghi chú: Việc áp dụng nối chuỗi nhiều sẽ gây ảnh hưởng tới hiệu năng. jsPerf & Thảo luận.

     

 

  • 6.4 Dùng template thay vì dùng cách nối chuỗi.

> Dùng template sẽ giúp chúng ta dể đọc, cú pháp ngắn gọn.

  • 6.5 Không bao giờ sử dụng eval() cho chuỗi.

Functions

  • 7.1 Sử dụng Function declarations thay vì Function expressions.

> Function declarations được đặt tên rõ ràng, do đó có thể xác định nó ở call stacks. Luôn luôn dùng Arrow Functions với Function expressions.

  • 7.2 Function expressions:

     
  • 7.3 Không được khai báo một hàm khi sử dụng các câu điều kiện (if, while, …). Thay vào đó lưu hàm vào một biến cụ thể.
  • 7.4 Ghi chú: ECMA-262 định nghĩa block như là danh sách các câu lệnh. Read ECMA-262’s note on this issue.
  • 7.5 Không được khai báo các tham số của hàm trùng với arguments.

     

7.6 Không được dùng arguments, dùng ... (Spreads) thay thế.

> ... sẽ chuyển các arguments thành một mảng các giá trị.

  • 7.7 Sử dụng cách truyền tham số mặc định.javascript

     
  • 7.8 Tránh đặt nó là các thông số mặc định.

 

  • 7.9 Luôn đặt tham số mặc định ở cuối.javascript
  • 7.10 Không bao giờ dùng cách khơi tạo một hàm bằng cách dùng new Function.

Arrow Functions

  • 8.1 Một khi bạn sử dụng Function expressions (Anonymous function), thì nên dùng Arrow Functions hoặc =>.javascript

     
  • 8.2 Nếu chỉ một câu lệnh tính toán thì có thể không dùng {}, nhưng khi có nhiều câu lệnh thì nên dùng {} và dùng return để trả về kết quá cuối cùng.
  • 8.3 Khi có nhiều chuỗi có nhiều dòng nên bao chuỗi đó trong dấu ().js
  • 8.4 Nếu trong hàm chỉ có một câu lệnh duy nhất có thể không cần dùng ().js

Constructors

  • 9.1 Luôn luôn dùng class. Không nên dùng prototype.javascript
  • 9.2 Sử dụng extends để tạo một lớp kế thừa.

     
  • 9.3 Phương thức có thể trả về this.

     
  • 9.4 Có thể mở rộng phương thức toString().

Modules

  • 10.1 Luôn luôn dùng (import/export) khi làm việc với modules thay thế kiểu modules truyền thống require/module.exports.javascript
  • 10.3 Không được dùng export trực tiếp từ import.

> Bời vì tách importexport giúp cho việc đọc dể, có ý nghĩa hơn.

Iterators and Generators

  • 11.1 Không được dùng vòng lặp thay vào đó dùng map() hoặc reduce thay thế for-of.

     
  • 11.2 Không được dùng generators ở thời điểm hiện tại.

> Có lỗi khi chuyển sang ES5.

Properties

  • 12.1 Sử dụng . khi truy cập vào một biến.

     
  • 12.2 Sử [] để truy cập thuộc tính đối với biến.

Variables

  • 13.1 Luôn luôn sử dụng const để khai báo một biến.
  • 13.2 Dùng mỗi const cho việc khai báo một biến.

     
  • 13.3 Gôm nhóm biến theo consts và lets.

     
  • 13.4 Khai báo biến khi cần thiết và đặt chúng ở đúng nơi.

> letconstblock scoped và không phải function scoped.

Hoisting

  • 14.1 var được khai báo trước ở đầu trong pham vi của biến hoặc hàm. constlet được dùng với một khái niệm mới Temporal Dead Zones (TDZ). typeof is no longer safe.

     
  • 14.2 Anonymous function được khai báo bằng một biến.

     
  • 14.3 Named Function expressions - Việc thông báo này hoạt động bằng tên hàm. Kết quả như ví dụ trước.

     
  • 14.4 Function declarations - Đối với hàm mà không có các giá trị đầu vào cho biến.

     

Comparison Operators & Equality

  • 15.1 Sử dụng ===!== thay cho ==!=.
  • 15.2 Khi dùng if các loại đối tượng sẽ được chuyển đổi sang kiểu Boolean:
    • Objects chuyển thành true
    • Undefined chuyển thành false
    • Null chuyển thành false
    • Booleans chuyển thành the value of the boolean
    • Numbers chuyển thành false Nếu +0, -0, or NaN, ngược lại true
    • Strings chuyển thành false Nếu là chuỗi rổng '', ngược lại true

     

  • 15.3 Sử dụng ngắn gọn.

     

  • 15.4 Truth Equality and JavaScript by Angus Croll.

Blocks

  • 16.1 Sử dụng {}.

  • 16.2 Nếu dùng nhiều câu điều kiện ifelse, đặt else cùng dòng với dấu } của if.

Comments

  • 17.1 Sử dụng /** ... */ khi cần chú thích nhiều. Nên mô tả đầy đủ như types, values của nhiều tham số, giá trị trả về là gì.

     

  • 17.2 Sử dụng // khi chú thích một dòng duy nhất. Cách một dòng đối với câu lệnh phía trước khi sử dụng // để chú thích.

     

  • 17.3 Thêm tiền tố phía trước FIXME hoặc TODO để những người trong cùng một team có thể dể đọc hiểu code. FIXME -- need to figure this out hoặc TODO -- need to implement.
  • 17.4 Use // FIXME: to annotate problems.

     

  • 17.5 Dùng // TODO: chú thích cách giải quyết vấn đề.

Whitespace

  • 18.1 Dùng 2 spaces thay vì 4.

     

  • 18.2 Thêm dấu cách trước {.

     

  • 18.3 Thêm 1 khoảng cách sau các câu điều kiện (if, while ...). Không nên có khoảng cách trong Function Arguments.

  • 18.4 Đối với các phép tính (+, -, *, / ...) thêm khoảng cách trước và sau các phép tính đó.

     

  • 18.5 Thêm một dòng trống khi file đó kết thúc.

     

     

  • 18.6 Sử dụng indentation khi gọi nhiều methods cùng một lúc.javascript

     

  • 18.7 Thêm một dòng trống sau {} và bắt đầu một câu lệnh tiếp theo.

     

Commas

  • 19.1 Dùng , ở đầu: Không

     

  • 19.2 Thêm trailing comma: Yup.

Semicolons

  • 20.1 Yup.

     

     

Type Casting & Coercion

  • 21.1 Áp dụng các kiểu chuyển đổi.
  • 21.2 Strings:

  • 21.3 Numbers: Sử dụng Number cho castingparseInt luôn luôn dùng với radix khi chuyển từ chuỗi sang số.

     

  • 21.4 Sử dụng Bitshift Lý do, và chú thích đầy đủ khi dùng Bitshift

     

  • 21.5 Ghi chú: Cẩn thận khi dùng Bitshift. Bitshift luôn trả về 32-bit integer (source). Khi số lớn hơn 32 bits sẽ dẫn đến một số lỗi. Thảo luận. Số lớn nhất 32-bit Int là 2,147,483,647:

  • 21.6 Booleans:

     

Naming Conventions

  • 22.1 Nên mô tả đầy đủ một tên hàm hay biến.

  • 22.2 Dùng cách đặt tên camelCase cho đối tượng, biến, hàm, kế thừa …

     

  • 22.3 Dùng kiểu PascalCase để đặt tên cho Class hoặc Constructor.

     

  • 22.4 Dùng _ ở đầu tên biến khi nó là loại private.

     

  • 22.5 Sử dụng Arrow function (=>) hoặc Function#bind.

     

  • 22.6 Khi export một class duy nhất, thì tên file nên trùng với tên class.

     

  • 22.7 Dùng kiểu camelCase khi export mặc định hàm. Tên file và tên hàm nên tương tự nhau.

     

  • 22.8 Dùng kiểu PascalCase khi export một singleton / function library / bare object.

     

Accessors

  • 23.1 Accessor functions cho các thuộc tính không cần thiết.
  • 23.2 Khi tạo một accessor functions sử dụng cấu trúc getVal()setVal('hello').

     

  • 23.3 Nếu thuộc tính là boolean, sử dụng isVal()hasVal().`javascript

     

  • 23.4 Có thể ghi đè 2 hàm mặc định get()set(), nhưng phải có tính nhất quán.

     

Events

  • 24.1 Dùng hash value thay vì raw value khi truyền các tham số vào events.

    prefer:

     

jQuery

  • 25.1 Thêm tiền tố $ khi biến đó được tạo ra từ jQuery.

     

  • 25.2 Cache jQuery.

  • 25.3 Sử dụng kiểu Cascading $('.sidebar ul') hoặc là kiểu parent > child $('.sidebar > ul'). jsPerf
  • 25.4 Sử dụng find.

     

ECMAScript 5 Compatibility

ECMAScript 6 Styles

  • 27.1 ES6 Features.
  1. Arrow Functions
  2. Classes
  3. Object Shorthand
  4. Object Concise
  5. Object Computed Properties
  6. Template Strings
  7. Destructuring
  8. Default Parameters
  9. Rest
  10. Array Spreads
  11. Let and Const
  12. Iterators and Generators
  13. Modules

Testing

  • 28.1 Yup.

     

  • 28.2 No, but seriously:
  • Luôn luôn viết test!
  • Chia nhỏ hàm.
  • Cẩn thận khi dùng stubsmocks.
  • mochatape được sử dụng ở Airbnb.
  • Bảo đảm các test đều chạy tốt (100% coverage).
  • Khi sửa chửa mộ lỗi nào đó nên viết lại test.

Performance

 

TÀI NGUYÊN

Học ES6

Nên đọc

Tools

Các Styles Guide khác

Styles Khác

Đọc thêm

Sách

 

In the Wild

Danh sách các trang wed sử dụng style guide của Airbnb.

Techtalk via Github

Người thực hiện giangpii