Cách cấu trúc một thư viện javascript

Khung không có cấu trúc tự nhiên của JavaScript giúp bạn có thể sử dụng nó theo nhiều cách khác nhau. Tuy nhiên, những cách này thường kết thúc rất khó đọc. Thật dễ dàng để rơi vào cái bẫy của một mớ mã JavaScript lộn xộn, không có tổ chức – đặc biệt nếu bạn là một nhà phát triển mới. Rốt cuộc, khi bạn đang chịu áp lực phải hoàn thành công việc và đáp ứng thời hạn của mình, việc bỏ qua tầm quan trọng của giao diện người dùng và chỉ tập trung vào “phần quan trọng của ứng dụng” là điều tự nhiên. ”

Sự thật là, JavaScript không có tổ chức cuối cùng có thể đại diện cho một phần lớn sản phẩm đã hoàn thành và trước khi bạn biết điều đó, bạn có thể có một mớ hỗn độn lớn trong tay để duy trì hoặc thậm chí tệ hơn là nhờ người khác bảo trì.

Các phương pháp hay nhất về cấu trúc tệp JavaScript

JavaScript là một trong những ngôn ngữ linh hoạt nhất hiện có và với tính linh hoạt sẽ có chỗ để làm mọi thứ sai cách. Các khung, như Angular và React, có thể giúp thiết lập cấu trúc mã javascript của bạn (hoặc Bản mô tả được biên dịch thành JavaScript trong trường hợp của Angular). Rất tiếc, không phải lúc nào khung cũng được sử dụng trong cấu trúc thư mục của bạn. Có thể doanh nghiệp muốn tránh xa các khung JavaScript hoặc có thể chúng chỉ là quá mức cần thiết. Mặc dù về mặt lý thuyết, các khung là một ý tưởng hay, nhưng chúng đi kèm với một mức độ chi phí chung có thể gây ra sự phức tạp khác của riêng chúng

Vậy bạn nên tổ chức mã của mình như thế nào khi viết một ứng dụng với một khung? . Hãy xem xét kỹ hơn 5 cách để sắp xếp JavaScript của bạn đúng cách

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

Khi viết một hàm mới, lớp, mô hình, hằng số hoặc bất kỳ thứ gì thực sự, hãy để lại nhận xét để giúp đỡ bất kỳ ai đang làm việc với nó. Lưu ý rằng kiểu nhận xét này cung cấp cho bạn các chú giải công cụ tuyệt vời trong IDE như Mã VS

Có một lợi ích phụ là nếu bạn đang sử dụng các bình luận kiểu JSDoc, bạn sẽ nhận được tài liệu toàn diện, đẹp mắt miễn phí

2. Sử dụng các lớp ES6

ES6 đã mang lại rất nhiều tính năng cho JavaScript, vì vậy hãy tận dụng chúng. Một trong những tính năng này là các lớp, đây có lẽ là cách tốt nhất để tổ chức logic nghiệp vụ của bạn

Như bạn có thể thấy trong ảnh chụp màn hình ở trên, bạn có thể cấu trúc các mô hình của mình theo cách rất dễ đọc và đơn giản và cũng có thể mở rộng. Khả năng mở rộng là rất lớn. Điều đó có nghĩa là bạn có thể có một lớp kế thừa các thuộc tính và chức năng cụ thể từ lớp cơ sở. Như bạn có thể thấy, lớp PropertyAddress thực sự mở rộng từ lớp Address. Điều này sẽ giúp bạn duy trì nguyên tắc tuyệt vời DRY (Đừng lặp lại chính mình)

3. Sử dụng lời hứa trong cấu trúc dữ liệu Javascript của bạn

Là một nhà phát triển cơ sở, rất dễ có thói quen chuyển các chức năng gọi lại vào các chức năng khác. Chẳng hạn, giả sử bạn muốn lấy danh sách nhân viên từ API. Chà, bạn có thể gọi nó và chuyển vào hàm gọi lại

Bản thân điều này có vẻ vô hại, nhưng điều gì sẽ xảy ra khi bạn cần thực hiện một cuộc gọi khác sau khi nhân viên đã hoàn thành công việc?

Thay vào đó, hãy tận dụng những gì có trong bộ công cụ của bạn, Promises. Điều này sẽ cho phép bạn xâu chuỗi các chức năng gọi lại theo cách có tổ chức và dễ đọc. Điều này cũng cho phép bạn tách hoàn toàn chức năng gọi lại khỏi chức năng, điều đó có nghĩa là phương thức danh sách không còn phải lo lắng liệu có chức năng gọi lại hay không

4. Giữ mọi thứ riêng biệt

Khi viết JavaScript dành riêng cho một “mô-đun” có khả năng được sử dụng lại, hãy đặt nó vào tệp JavaScript của chính nó. Ngoài ra, nếu bạn đang viết JavaScript với mục đích thực hiện một số chức năng dành riêng cho trang thì hãy đặt nó vào tệp riêng được bao gồm trên trang. Giả sử bạn đang tạo trang danh sách nhân viên, sau đó bạn có thể có hai tệp. Nhân viên. js và chỉ mục. js

nhân viên. js chứa tất cả logic dựa trên mô hình phải thực hiện với một nhân viên -- đó không phải là trang cụ thể. chỉ mục. js bao gồm những thứ dành riêng cho trang đó. Điều này có thể giống như duy trì danh sách nhân viên hoặc điều gì xảy ra khi bạn nhấp vào một nhân viên

5. Sử dụng hằng số và Enums

Nếu bạn thấy mình viết đi viết lại cùng một chuỗi mã hóa cứng, bạn nên tạo một hằng số cho chuỗi đó. Hằng số là một cách tuyệt vời để sắp xếp mọi thứ có tổ chức và dễ dàng thay đổi sau này

Nếu bạn thấy mình có một nhóm logic liên quan đến nhau, chẳng hạn như các loại, thì enums có thể thực sự hữu ích cho việc đó. Mặc dù JavaScript không thực sự có “enums”, nhưng bạn có thể tạo một đối tượng và chú thích nó bằng cách sử dụng thứ gì đó như JSDoc để giúp giữ mọi thứ ở một nơi và dễ dàng nhìn thấy

Điểm mấu chốt

Bỏ qua tầm quan trọng của việc tổ chức JavaScript của bạn có thể dễ dàng dẫn đến sự lãng phí thời gian rất lớn cho các nhà phát triển khác sau này. Viết mã lộn xộn, khó đọc, không thể bảo trì là một trong những vấn đề tồi tệ nhất mà bạn hoặc nhà phát triển khác có thể gặp phải. Đây là một vấn đề thực sự, đặc biệt là ở các công ty nhỏ không có quy trình thực sự hoặc bất kỳ nhà phát triển cấp cao nào để phụ trách.

Tin tốt là vấn đề này có thể được giải quyết bằng cách tiếp cận phù hợp. Thật đáng để dành thêm thời gian để tìm hiểu về những gì bạn viết và để mã của bạn ở trạng thái tốt hơn so với khi bạn tìm thấy nó

Có ai có thể tạo thư viện JavaScript không?

Ví dụ về thư viện JavaScript là gì?

Hai phần của thư viện JavaScript là gì?

Thư viện JavaScript hoạt động như thế nào?