9 tip cho các Javascript Developer trong năm 2019

1907

Lại một năm nữa trôi qua và JavaScript vẫn còn thay đổi nữa. Tuy nhiên, có một số tip có thể giúp bạn viết code clean và hiệu quả hơn trong năm 2019. Dưới đây là danh sách 9 tip hữu ích sẽ giúp bạn trở thành một developer giỏi hơn.

1. async / await

Nếu không thật sự cần thiết thì đừng sử dụng callback, ví dụ như được yêu cầu bởi một library hoặc vì lý do hiệu suất. Promise cũng ổn, nhưng sẽ hơi khó sử dụng nếu codebase của bạn ngày càng trở nên lớn hơn. Giải pháp của tôi là async / await, cái này giúp việc đọc và cải thiện code clean hơn rất nhiều. Thực ra, bạn có thể await mọi Promise trong JavaScript, trong trường hợp library bạn đang sử dụng đang trả lại một Promise, chỉ cần await nó. Trong thực tế, async / await chỉ là phần bọc ngoài bên cạnh các Promise. Để code hoạt động, bạn chỉ cần thêm từ khóa async trước một function. Dưới đây là một ví dụ ngắn:

Lưu ý rằng await ở cấp cao nhất là không thể, bạn chỉ có thể call một async function.

async / await tuân theo ES2017, vậy nên hãy đảm bảo transpile code của bạn.

 

2. async control flow

Thông thường, ta cần phải tìm về nhiều dataset và làm gì đó cho mỗi data hoặc hoàn thành một task sau khi tất cả các async call đã trả về một giá trị.

for…of

Ví dụ chúng ta có một vài Pokemon trên page và chúng ta phải lấy thông tin chi tiết về chúng. Chúng ta không muốn đợi tất cả các call kết thúc, đặc biệt là khi chúng ta không biết có tất cả bao nhiêu call, nhưng lại muốn cập nhật dataset của mình ngay khi nhận được cái gì đó. Chúng ta có thể sử dụng for ... of để lặp một array và thực hiện async code bên trong block, việc thực thi sẽ bị tạm dừng cho đến khi mỗi call thành công. Điều quan trọng cần lưu ý là hiệu suất có thể bị tắc nghẽn nếu bạn làm điều này trong code của mình, nhưng sẽ rất hữu ích khi giữ trong toolset của bạn. Đây là một ví dụ:

Đây đều là những ví dụ thực tế, cứ tự nhiên copy và paste chúng vào code sandbox yêu thích của bạn

Promise.all

Nếu bạn muốn fetch tất cả các Pokemon cùng lúc? Vì ta có thể await tất cả các Promise, bạn chỉ cần sử dụng Promise.all:

for...ofPromise.all tuân theo ES6+, vì vậy hãy đảm bảo transpile code của bạn.

 

3. Destructuring & default values

Hãy quay lại ví dụ trước, khi chúng ta làm như sau:

Có một cách dễ dàng hơn để làm việc đó, chúng ta có thể sử dụng destructuring để lấy một hoặc một số value từ một object hoặc một array. Chúng ta sẽ làm thế này:

Chỉ còn một dòng code! Yay! Bạn cũng có thể đổi tên biến của mình:

Một tip hay khác là đưa ra các default value khi destructuring. Điều này đảm bảo rằng bạn sẽ không bao giờ gặp undefined và không phải kiểm tra các biến một cách thủ công.

Những tip này cũng có thể được sử dụng với các tham số function, ví dụ:

Ban đầu xem ví dụ có thể hơi khó hiểu, nhưng hãy dành thời gian thực hành nó. Khi chúng ta không chuyển bất kỳ value nào làm argument cho function, các default value được sử dụng. Ngay khi chúng ta bắt đầu chuyển các value, chỉ các default value cho các argument không tồn tại được sử dụng.

Destructuring và các default value tuân theo ES6, vì vậy hãy đảm bảo transpile code của bạn.

 

4. Truthy và falsy values

Khi sử dụng các default value, việc kiểm tra các value đang tồn tại sẽ không còn cần thiết. Tuy nhiên, thật tuyệt khi bạn có thể làm việc với các truthy và falsy value. Điều này sẽ cải thiện code và giúp bạn bỏ qua một vài bước hướng dẫn. Thường mọi người làm như thế này:

Rút gọn thành:

Để tận dụng những tính năng này, bạn phải hiểu truthy và falsy values là gì. Đây là bản tóm tắt ngắn gọn:

Falsy

  • chuỗi có độ dài bằng 0
  • số 0
  • false
  • undefined
  • null
  • Nan

Truthy

  • các array trống
  • các object trống
  • bất kỳ thứ gì

Lưu ý rằng khi kiểm tra các truthy/falsy value sẽ không có sự so sánh rõ ràng, giống như việc kiểm tra hai dấu bằng bằng nhau == chứ không phải ba ===. Nói chung, chúng hoạt động theo cách giống nhau nhưng có một số tình huống bạn sẽ gặp phải bug. Đối với tôi, chuyện này xảy ra chủ yếu với số 0.

5. Logical và ternary operators

Chúng được sử dụng để rút ngắn code. Thường thì chúng là những tool tốt và giúp giữ cho code của bạn clean, nhưng chúng cũng có thể tạo ra một số nhầm lẫn, đặc biệt là khi xâu chuỗi.

Logical operators

Về cơ bản, các logical operator kết hợp hai biểu thức và sẽ trả về true, false hoặc value phù hợp và được hiển thị bằng &&, có nghĩa là “and” – cũng như | | có nghĩa là “or”. Hãy xem ví dụ sau:

Chúng ta có thể kết hợp các logical operator với các truthy và falsy value. Khi sử dụng các logical operator, các quy tắc sau được áp dụng:

  • &&: Các falsy value đầu tiên được trả về, nếu không có giá trị nào thì truthy value cuối cùng được trả về.
  • ||: Các truthy value đầu tiên được trả về, nếu không có giá trị nào, operation sẽ bằng falsy value cuối cùng.

Ternary operator

Ternary operator rất giống với logical operator, nhưng có ba phần:

  1. So sánh, sẽ là falsy hoặc truthy
  2. Value trả về đầu tiên, trong trường hợp so sánh là truthy
  3. Value trả về thứ hai, trong trường hợp so sánh là falsy

Dưới đây là một ví dụ:

  1. Optional chaining

Bạn đã bao giờ gặp vấn đề khi truy cập một object property lồng nhau mà không biết liệu object hoặc một trong các sub-property có tồn tại hay không? Bạn có thể gặp như thế này:

Cách này thật tẻ nhạt và có một cách tốt hơn. Nó được gọi là chuỗi tùy chọn và hoạt động như sau:

Tôi nghĩ đó là một cách hiệu quả hơn để kiểm tra các property lồng nhau và làm cho code clean hơn.

Hiện tại, optional chaining không thuộc thông số kỹ thuật chính thức mà đang ở giai đoạn 1 như là một tính năng thử nghiệm. Bạn phải thêm @babel/plugin-proposal-optional-chaining trong babelrc của bạn để sử dụng.

 

7. Các class property & binding

Binding function trong JavaScript là một task phổ biến. Với việc giới thiệu các arrow function trong ES6, giờ đây chúng ta có một cách để tự động bind các function với bối cảnh khai báo – rất hữu ích và thường được sử dụng bởi các JavaScript developer. Khi các class được giới thiệu lần đầu tiên, bạn không còn sử dụng các arrow function được nữa vì các phương thức class phải được khai báo theo một cách cụ thể. Chúng ta cần bind functions ở nơi khác, ví dụ như trong constructor (thực hành với React.js là tốt nhất). Tôi luôn bị bug khi theo workflow của các phương pháp defining class đầu tiên và sau đó bind chúng. Với cú pháp class property, chúng ta có thể sử dụng lại các arrow function và có được các hỗ trợ tuyệt vời từ auto-binding. Bây giờ arrow function có thể được sử dụng trong class. Dưới đây là một ví dụ với _increasCount bị bind:

Hiện tại, các class property không thuộc thông số kỹ thuật chính thức mà đang ở giai đoạn 3 như là một tính năng thử nghiệm. Bạn phải thêm @babel/plugin-proposal-class-properties trong babelrc để sử dụng.

 

8. Sử dụng parcel

Là một frontend developer, bạn chắc chắn đã gặp bundling và transpiling code. Tiêu chuẩn thực tế cho cái này là webpack trong một thời gian dài. Khi đó, tôi đã gặp nhiều khó khăn khi sử dụng webpack phiên bản 1. Sau khi loay hoay với tất cả các tùy chọn cấu hình khác nhau, tôi đã dành rất nhiều thời gian cố gắng có được bundling up và running. Nhưng mà tôi không làm được, và tôi không muốn đụng vào nó nữa để khỏi làm hỏng cái gì. Một vài tháng trước tôi phát hiện ra parcel, và nó thật sự cứu tôi tức thì. Nó làm gần như mọi thứ cho bạn, trong khi vẫn cho bạn khả năng thay đổi nó nếu cần thiết. Nó cũng hỗ trợ hệ thống plugin, tương tự như webpack hoặc babel, và cực kỳ nhanh. Nếu bạn không biết parcel thì bạn cần phải xem nó liền đi!

 

9. Tự viết thêm code

Đây là một chủ đề hay. Tôi đã có rất nhiều cuộc thảo luận khác nhau về nó. Ngay cả đối với CSS, rất nhiều người có xu hướng sử dụng một component library như bootstrap. Đối với JavaScript, tôi vẫn thấy mọi người sử dụng jQuery và các library nhỏ cho validation, sliders, v.v. Mặc dù việc sử dụng các library rất tiện, tôi vẫn thực sự khuyên bạn nên tự viết nhiều code hơn là cài đặt các npm package một cách mù quáng. Khi có các library lớn (hoặc thậm chí các framework) chẳng hạn như Moment.js hoặc datepicker, sẽ không có ý nghĩa gì khi không thử tự viết mã. Bạn có thể tự viết hầu hết các code bạn đang sử dụng. Điều này sẽ cung cấp cho bạn ba lợi thế chính:

  1. Bạn biết chính xác những gì đang diễn với code của bạn
  2. Tại thời điểm nào đó, bạn sẽ bắt đầu thực sự hiểu lập trình và cách mọi thứ hoạt động
  3. Ngăn việc codebase ngày trở nên lớn hơn

Ban đầu, việc sử dụng npm package sẽ dễ dàng hơn. Và bạn sẽ mất nhiều thời gian hơn để tự thực hiện một số chức năng. Nhưng nếu package hoạt động không như mong đợi và bạn phải chuyển nó thành cái khác, và dành nhiều thời gian hơn để đọc API của chúng được thiết lập như thế nào. Khi tự mình thực hiện nó, bạn có thể điều chỉnh 100% cho usecase của bạn.

Techtalk via gitconnected

CHIA SẺ