Cách tốt nhất để thực hành JavaScript là gì?

JavaScript sử dụng hai loại toán tử đẳng thức khác nhau.

   x = false

   x = false

   x = false

   x = false

"Nếu hai toán hạng có cùng kiểu và giá trị, thì === tạo ra true và. == tạo sai. " -JavaScript. Các bộ phận tốt

Tuy nhiên, khi làm việc với 

   x = false

   x = false

2.  

   x = false

78 Xấu

Đối với những người không quen thuộc, hàm 

   x = false

   x = false

Điều này không chỉ làm giảm đáng kể hiệu suất tập lệnh của bạn mà còn gây ra rủi ro bảo mật rất lớn vì nó cấp quá nhiều quyền lực cho văn bản được truyền vào. tránh nó

3. Không sử dụng tốc ký

Về mặt kỹ thuật, bạn có thể bỏ qua hầu hết các dấu ngoặc nhọn và dấu chấm phẩy. Hầu hết các trình duyệt sẽ giải thích chính xác những điều sau đây

1

   x = false

   x = false

   x = false

Tuy nhiên, hãy xem xét điều này

1

   x = false

   x = false

   x = false

   x = false

   x = false

Bạn có thể nghĩ rằng đoạn mã trên sẽ tương đương với

1

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

Thật không may, bạn sẽ sai. Trong thực tế, nó có nghĩa là

1

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

Như bạn sẽ nhận thấy, vết lõm bắt chước chức năng của dấu ngoặc nhọn. Không cần phải nói, đây là một thực tế khủng khiếp nên tránh bằng mọi giá. Lần duy nhất mà các dấu ngoặc nhọn nên được bỏ qua là với một lớp lót, và thậm chí đây là một chủ đề được tranh luận nhiều

1

   x = false

Luôn Nghĩ Về Tương Lai

Điều gì sẽ xảy ra nếu sau này bạn cần thêm nhiều lệnh hơn vào câu lệnh if này? . Điểm mấu chốt—hãy thận trọng khi bỏ qua

4. Sử dụng JSLint

JSLint là trình gỡ lỗi do Douglas Crockford viết. Chỉ cần dán vào tập lệnh của bạn và nó sẽ nhanh chóng quét mọi vấn đề và lỗi đáng chú ý trong mã của bạn

"JSLint lấy một nguồn JavaScript và quét nó. Nếu tìm thấy sự cố, nó sẽ trả về một thông báo mô tả sự cố và vị trí gần đúng trong nguồn. Vấn đề không nhất thiết là lỗi cú pháp, mặc dù nó thường là. JSLint xem xét một số quy ước về kiểu dáng cũng như các vấn đề về cấu trúc. Nó không chứng minh rằng chương trình của bạn là đúng. Nó chỉ cung cấp một cặp mắt khác để giúp phát hiện ra các vấn đề. " - Tài liệu JSLint

Trước khi đăng xuất trên một tập lệnh, hãy chạy tập lệnh đó qua JSLint để đảm bảo rằng bạn không mắc phải bất kỳ lỗi bất cẩn nào

5.  Đặt đoạn mã ở cuối trang của bạn

Mẹo này đã được đề xuất trong bài viết trước của loạt bài này. Tuy nhiên, vì nó rất phù hợp, tôi sẽ dán thông tin vào

Hãy nhớ—mục tiêu chính là làm cho trang tải càng nhanh càng tốt cho người dùng. Khi tải tập lệnh, trình duyệt không thể tiếp tục cho đến khi toàn bộ tệp được tải. Do đó, người dùng sẽ phải đợi lâu hơn trước khi nhận thấy bất kỳ tiến trình nào

Nếu bạn có các tệp JS với mục đích duy nhất là thêm chức năng—ví dụ: sau khi nhấp vào nút—hãy tiếp tục và đặt các tệp đó ở dưới cùng, ngay trước thẻ đóng nội dung. Đây hoàn toàn là một thực hành tốt nhất

Tốt hơn

1

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

6.  Khai báo các biến bên ngoài câu lệnh For

Khi thực hiện các câu lệnh 

   x = false

Xấu

1

   x = false

   x = false

1

   x = false

1

   x = false

1

   x = false

   x = false

Lưu ý cách chúng ta phải xác định độ dài của mảng cho mỗi lần lặp và cách chúng ta duyệt qua DOM để tìm phần tử "vùng chứa" mỗi lần—rất không hiệu quả

Tốt hơn

1

1

   x = false

   x = false

   x = false

1

   x = false

1

   x = false

   x = false

7.  Cách nhanh nhất để tạo chuỗi

Không phải lúc nào bạn cũng tìm đến câu lệnh 

   x = false

1

   x = false

   x = false

   x = false

Tôi sẽ không làm bạn chán với điểm chuẩn; . Đây là phương pháp nhanh nhất cho đến nay

Sử dụng các phương pháp gốc như

   x = false

83, bất kể điều gì đang diễn ra đằng sau lớp trừu tượng, thường nhanh hơn nhiều so với bất kỳ phương pháp thay thế không gốc nào. —James Padolsey, James. padolsey. com

8.  Sử dụng chữ mẫu

Các chuỗi mà chúng tôi tạo bằng dấu ngoặc kép hoặc dấu ngoặc đơn có rất nhiều hạn chế. Bạn có thể muốn thay thế một số chuỗi của mình bằng chữ mẫu để làm việc với chúng dễ dàng hơn nhiều. Chữ mẫu được tạo bằng cách sử dụng ký tự backtick [

   x = false

1

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

Như bạn có thể thấy, chúng ta không phải liên tục di chuyển vào và ra khỏi mẫu theo nghĩa đen, như chúng ta phải làm với một chuỗi ký tự thông thường được tạo bằng dấu ngoặc đơn hoặc dấu ngoặc kép. Điều này làm giảm khả năng xảy ra bất kỳ lỗi nào liên quan đến đánh máy và giúp chúng tôi viết mã sạch hơn

9.  Giảm hình cầu

"Bằng cách giảm dấu chân toàn cầu của bạn thành một tên duy nhất, bạn giảm đáng kể khả năng tương tác xấu với các ứng dụng, tiện ích con hoặc thư viện khác. " —Douglas Crockford

1

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

Tốt hơn

1

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

Lưu ý cách chúng tôi đã "giảm dấu chân của mình" thành đối tượng có tên buồn cười 

   x = false

10.  Cân nhắc sử dụng 

   x = false

86 và 

   x = false

87 

Từ khóa 

   x = false

   x = false

   x = false

   x = false

   x = false

1

   x = false

Trong ví dụ trên, giá trị của biến

   x = false

   x = false

   x = false

11.  Nhận xét mã của bạn

Thoạt nghe có vẻ không cần thiết, nhưng hãy tin tôi đi, bạn muốn nhận xét mã của mình tốt nhất có thể. Điều gì sẽ xảy ra khi bạn quay lại dự án vài tháng sau đó, chỉ để thấy rằng bạn không thể dễ dàng nhớ được dòng suy nghĩ của mình là gì?

1

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

12.  Đón nhận cải tiến liên tục

Luôn bù trừ khi JavaScript bị tắt. Bạn có thể nghĩ rằng, "Phần lớn người xem của tôi đã bật JavaScript, vì vậy tôi sẽ không lo lắng về điều đó. " Tuy nhiên, đây sẽ là một sai lầm lớn

Bạn đã dành chút thời gian để xem thanh trượt tuyệt đẹp của mình khi tắt JavaScript chưa? . ] Nó có thể phá vỡ hoàn toàn trang web của bạn. Theo nguyên tắc thông thường, hãy thiết kế trang web của bạn với giả định rằng JavaScript sẽ bị tắt. Sau đó, khi bạn đã hoàn thành, hãy bắt đầu nâng cao dần bố cục của mình

13.  Không chuyển chuỗi tới 

   x = false

96 hoặc 

   x = false

97

Hãy xem xét đoạn mã sau

1

   x = false

   x = false

   x = false

   x = false

Mã này không chỉ không hiệu quả mà còn hoạt động theo cách giống như hàm

   x = false

   x = false

   x = false

1

   x = false

14.  Sử dụng 

1

01 Thay vì 

1

02

Có nhiều cách để tạo đối tượng trong JavaScript. Có lẽ phương pháp truyền thống hơn là sử dụng hàm tạo 

1

1

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

Tuy nhiên, phương pháp này nhận được dấu "thực hành xấu". Nó không thực sự có hại, nhưng nó hơi dài dòng và bất thường. Thay vào đó, tôi khuyên bạn nên sử dụng phương thức đối tượng bằng chữ

Tốt hơn

1

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

Lưu ý rằng nếu bạn chỉ muốn tạo một đối tượng trống, 

1

1

   x = false

"Các ký tự đối tượng cho phép chúng tôi viết mã hỗ trợ nhiều tính năng nhưng vẫn cung cấp một quy trình tương đối đơn giản cho những người triển khai mã của chúng tôi. Không cần gọi trực tiếp các hàm tạo hoặc duy trì đúng thứ tự các đối số được truyền cho các hàm. " — dyn-web. com

15.  Sử dụng 

1

05 Thay vì 

1

06

Điều tương tự cũng áp dụng cho việc tạo một mảng mới

Được chứ

1

   x = false

   x = false

   x = false

   x = false

   x = false

Tốt hơn

1

   x = false

"Một lỗi phổ biến trong các chương trình JavaScript là sử dụng một đối tượng khi một mảng được yêu cầu hoặc một mảng khi một đối tượng được yêu cầu. Quy tắc rất đơn giản. khi tên thuộc tính là số nguyên tuần tự nhỏ, bạn nên sử dụng một mảng. Nếu không, hãy sử dụng một đối tượng. " —Douglas Crockford

16. Sử dụng Toán tử Trải rộng

Bạn đã bao giờ ở trong tình huống muốn chuyển tất cả các phần tử của một mảng dưới dạng các phần tử riêng lẻ sang một số hàm khác hay bạn muốn chèn tất cả các giá trị từ mảng này sang mảng khác chưa? . Đây là một ví dụ

1

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

17.  Cẩn thận với 

   x = false

81.

1

09 Báo cáo

Khi lặp qua các mục trong một đối tượng, bạn có thể thấy rằng bạn cũng truy xuất các hàm phương thức hoặc các thuộc tính kế thừa khác. Để giải quyết vấn đề này, hãy luôn đặt mã của bạn trong câu lệnh _______094 lọc bằng 

1

1

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

Mẹo này từ JavaScript. Những Phần Tốt, bởi Douglas Crockford

18.  Đọc, đọc, đọc.

Mặc dù tôi là một fan hâm mộ lớn của các blog phát triển web [như blog này. ], thực sự không gì có thể thay thế một cuốn sách khi ăn trưa, hoặc ngay trước khi bạn đi ngủ. Luôn để một cuốn sách phát triển web trên bàn cạnh giường ngủ của bạn. Dưới đây là một số JavaScript yêu thích của tôi

• JavaScript hướng đối tượng
• JavaScript. Các bộ phận tốt
• Học JavaScript

Đọc chúng. nhiều lần. tôi vẫn làm

19.  Chức năng tự thực thi

Thay vì gọi một hàm, khá đơn giản để làm cho một hàm chạy tự động khi tải trang hoặc hàm cha được gọi. Chỉ cần bọc hàm của bạn trong dấu ngoặc đơn, sau đó nối thêm một bộ bổ sung, về cơ bản gọi hàm

1

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

20. JavaScript thô luôn nhanh hơn sử dụng thư viện

Các thư viện JavaScript, chẳng hạn như jQuery và lodash, có thể giúp bạn tiết kiệm rất nhiều thời gian khi viết mã—đặc biệt là với các thao tác AJAX. Phải nói rằng, hãy luôn nhớ rằng thư viện không bao giờ có thể nhanh bằng JavaScript thô [giả sử bạn viết mã chính xác]

Phương thức 

1

   x = false

21. Gán nhanh các giá trị của biến bằng tính năng hủy cấu trúc

Chúng ta đã tìm hiểu về toán tử trải rộng trong JavaScript trước đó trong bài viết. Việc hủy cấu trúc có phần tương tự theo nghĩa là nó cũng giải nén các giá trị được lưu trữ bên trong các mảng. Sự khác biệt là chúng ta có thể gán các giá trị được giải nén này cho các biến duy nhất

Cú pháp tương tự như tạo một mảng bằng cách sử dụng tốc ký 

1

1

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

Bạn có để ý rằng chúng ta vừa bỏ qua việc gán phần tử mảng thứ ba cho bất kỳ biến nào bằng cách không chuyển tên biến không?

22.  Trình lặp và 

   x = false

81.

1

16 Vòng lặp

Trình lặp trong JavaScript là các đối tượng triển khai phương thức 

1

1

1

JavaScript cũng có một số trình vòng lặp tích hợp sẵn như 

1

1

1

   x = false

1

   x = false

1

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

Với vòng lặp 

1

23.  

1

27 và 

1

28

Bạn có thể sử dụng từ khóa 

1

1

1

1

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

Trong ví dụ trên, 

1

1

1

1

24. Sử dụng hàm mũi tên

Một tính năng thiết yếu khác được thêm vào JavaScript gần đây là chức năng mũi tên. Họ đi kèm với rất nhiều lợi ích. Đầu tiên, chúng làm cho các thành phần chức năng của JavaScript bắt mắt hơn và dễ viết hơn

Hãy xem cách chúng tôi triển khai bộ lọc không có chức năng mũi tên

1

   x = false

   x = false

   x = false

Ở đây, hàm gọi lại mà chúng ta chuyển đến bộ lọc trả về true cho bất kỳ số chẵn nào

Các chức năng mũi tên làm cho điều này dễ đọc và ngắn gọn hơn nhiều.  

1

   x = false

   x = false

   x = false

Một lợi ích đáng chú ý khác của hàm mũi tên là chúng không xác định phạm vi, thay vào đó nằm trong phạm vi cha. Điều này ngăn chặn nhiều vấn đề có thể xảy ra khi sử dụng từ khóa

1

1

1

25. Sử dụng Phương thức

1

39 Javascript

Phương thức

1

1

   x = false

   x = false

   x = false

   x = false

   x = false

Điều đáng chú ý là phương thức

1

1

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

26. Chạy lời hứa song song

Bạn nên chạy song song các tác vụ không đồng bộ vì nó có thể làm cho ứng dụng của bạn nhanh hơn và phản hồi nhanh hơn nhiều. Nếu các nhiệm vụ của bạn không dựa vào kết quả của nhau, chỉ cần bọc chúng trong

1

Thật tuyệt khi kết hợp

1

1

1

1

1

1

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

Điều này sẽ ánh xạ các URL trong mảng thành một mảng các hàm không đồng bộ. Mỗi chức năng không đồng bộ sẽ tìm nạp văn bản từ URL và trả về. Vì đây là một chức năng không đồng bộ, nên nó thực sự là một

1

1

27. Sử dụng Regex khi trích xuất hoặc làm việc với chuỗi

Regex [biểu thức chính quy] là một công cụ thực sự mạnh mẽ và thú vị. Nếu bạn thấy mình đang thực hiện các tìm kiếm và thao tác phức tạp trên chuỗi bằng các phương pháp như

1

1

Biểu thức chính quy cho phép bạn tìm kiếm các mẫu phức tạp và thay thế hoặc trích xuất văn bản khớp với các mẫu đó

Một cách sử dụng cổ điển của regex là để xác thực đầu vào. Ví dụ: biểu thức chính quy sau có thể được sử dụng để xác thực mã zip gồm năm chữ số của Hoa Kỳ

1

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

28. Đặt JavaScript vào một tệp riêng

JavaScript có thể được viết trong thẻ

1

Giữ JavaScript của bạn trong các tệp riêng biệt bên ngoài HTML sẽ tạo điều kiện thuận lợi cho việc sử dụng lại mã trên nhiều tệp HTML. Nó cung cấp khả năng đọc mã dễ dàng hơn và tiết kiệm thời gian tải vì trình duyệt web có thể lưu trữ các tệp JavaScript bên ngoài

29. Sử dụng Mối nối để Xóa các Mục khỏi Mảng

Tôi đã thấy các nhà phát triển sử dụng phương pháp

1

1

1

1

1

1

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

   x = false

30. Tìm hiểu kiểm thử đơn vị

Khi tôi lần đầu tiên bắt đầu thêm các bài kiểm tra đơn vị với tư cách là nhà phát triển, tôi thường xuyên phát hiện ra các lỗi. Kiểm tra là cách hiệu quả nhất để đảm bảo rằng mã của bạn không có lỗi. Jest là một nơi tuyệt vời để bắt đầu, nhưng có những tùy chọn khác cũng dễ sử dụng. Trước khi bất kỳ mã nào được triển khai, nó phải được kiểm tra đơn vị để đảm bảo rằng nó đáp ứng các tiêu chuẩn chất lượng. Điều này thúc đẩy một môi trường kỹ thuật đáng tin cậy ưu tiên chất lượng. Thử nghiệm đơn vị tiết kiệm thời gian và tiền bạc trong vòng đời phát triển sản phẩm và nó giúp các nhà phát triển thiết kế mã tốt hơn, hiệu quả hơn

Thế thôi mọi người

Vì vậy, có bạn có nó. 30 mẹo cần thiết cho JavaScripters mới bắt đầu. Cảm ơn vì đã đọc.  

Và hãy chắc chắn kiểm tra hàng nghìn mặt hàng JavaScript có sẵn trên Envato Market. Chắc chắn sẽ có thứ gì đó giúp bạn phát triển JavaScript

• 10 trình phát âm thanh HTML5 tốt nhất

  Daniel Strongin

  18 Thg 10 2021

• 17 Mẫu trò chơi HTML5 tốt nhất năm 2022 với mã nguồn

  Frank Lucas

  26 Th03 2020

• 19 mẫu và công cụ trò chơi HTML5 và JavaScript tốt nhất

  Frank Lucas

  30 Th08 2021

• 24 thanh trượt hình ảnh jQuery tốt nhất

  Daniel Strongin

  26 Thg 10 2021

Bài đăng này đã được cập nhật với sự đóng góp của Monty Shokeen và Ezekiel Lawson. Monty là một nhà phát triển full-stack, người cũng thích viết hướng dẫn và tìm hiểu về các thư viện JavaScript mới. Ezekiel là nhà phát triển front-end tập trung vào việc viết mã rõ ràng, có thể bảo trì bằng các công nghệ web như JavaScript, Vue. js, HTML và CSS

Làm thế nào để thực hành JavaScript cho người mới bắt đầu?

Làm cách nào tôi có thể cải thiện bản thân trong JavaScript?

2 tháng có đủ để học JavaScript không?

3 tháng có đủ để học JavaScript không?