Khi viết ứng dụng Vanilla JavaScript, bạn không phải lưu trữ tất cả mã bạn sử dụng trên trang web của riêng mình
Hầu hết các thư viện JavaScript phổ biến đều có sẵn từ Mạng phân phối nội dung công khai [CDN]
Điều này có thể đơn giản hóa việc triển khai ứng dụng và luôn cập nhật các phần phụ thuộc. Trên thực tế, nếu bạn đã làm theo bất kỳ hướng dẫn JavaScript nào cho thư viện, thì có thể bạn đã sử dụng CDN công khai nhưng có thể không biết về nó
CDN là gì?
CDN là Mạng phân phối nội dung. Đây là các dịch vụ lưu trữ tệp cho nhiều phiên bản thư viện phổ biến. Chúng thường có hiệu suất cao và cung cấp các tệp được lưu trong bộ nhớ cache theo vị trí, vì vậy bất kể người dùng của bạn ở đâu, họ sẽ nhận được các tệp từ các vị trí địa lý gần họ. Điều này có thể làm cho ứng dụng của bạn nhanh hơn so với việc tự lưu trữ tệp
CDN cũng có lợi thế là nếu bạn đang sử dụng các thư viện chung cho nhiều trang web thì người dùng của bạn có thể đã lưu tệp vào bộ nhớ cache trong trình duyệt của họ. Điều này tăng tốc trang web của bạn vì trình duyệt không cần tải lại thư viện
Ví dụ: JQuery có CDN JQuery chính thức. Nếu hầu hết các ứng dụng JQuery nhập thư viện JQuery từ CDN này, thì nhiều khả năng người dùng đã có sẵn JQuery trong bộ đệm của họ
CDN dựa trên
4
Không phải mọi thư viện đều có CDN của riêng họ. Hầu hết các thư viện triển khai cho npmjs. com và dựa vào việc lập trình viên thêm thư viện vào dự án của họ thông qua
Chúng tôi không cần phải sử dụng quy trình xây dựng
'CDN do npm-Driven' là nơi lưu trữ mã phân phối cho các thư viện triển khai tới
Ví dụ: Lưới AG mà tôi đã trình bày trong bài viết "Cách chuyển đổi bảng HTML tĩnh thành lưới dữ liệu JavaScript động" triển khai cho
CDN dựa trên
Trong mã nguồn của bài đăng freeCodeCamp trước đây của tôi, tôi đã sử dụng lệnh unpkg. com CDN để nhập AG Grid trong mã của tôi bằng phần tử
Như với tất cả mã mà chúng tôi sao chép và dán, bạn nên hiểu chức năng của mã đó để có thể xử lý mọi sự cố
Những CDN nào có sẵn?
Tôi mới chỉ sử dụng ba CDN
- Giải nén. com
- jsDelivr. com
- cdnjs. com
Đây là tất cả các trang web chuyên nghiệp và chạy tốt. Và lý do chính khiến tôi chọn cái này trên cái kia là hướng dẫn lần đầu tiên tôi làm theo cho một thư viện đã sử dụng CDN cụ thể đó trong mã
Biết rằng nhiều CDN có sẵn là hữu ích vì
- một phiên bản cụ thể của thư viện bạn muốn sử dụng có thể không có trên mọi CDN
- nếu CDN bắt đầu gặp sự cố thì bạn có thể sửa đổi mã của mình để sử dụng mã khác
- một số thư viện có thể phổ biến hơn trên một CDN so với CDN khác và bạn có thể muốn sử dụng CDN phổ biến nhất để tăng khả năng mã thư viện JavaScript được lưu trong bộ nhớ cache trên trình duyệt của người dùng của bạn
4 CDN phân phối nhiều hơn JavaScript
CDN cung cấp nhiều hơn JavaScript. Ví dụ: AG Grid triển khai các tệp CSS cũng như JavaScript
Chúng sẽ được tham chiếu từ CDN như bình thường bằng cách sử dụng các phần tử
Ví dụ: AG Grid sử dụng hai biểu định kiểu
Bảng Kiểu cấu trúc cung cấp CSS sẽ bố trí dữ liệu dưới dạng Lưới
Bảng Kiểu chủ đề cung cấp tính thẩm mỹ trực quan cho Lưới
Cả hai tệp CSS này cũng được triển khai cho npmjs. com và có thể được đưa vào dự án của chúng tôi từ CDN
Làm thế nào [và tại sao] để kiểm soát phiên bản của thư viện
Trong tôi, tôi sử dụng ba thư viện. AG Grid, PapaParse và Faker
Faker gần đây đã gặp sự cố khi một phiên bản gần đây được triển khai cho npm có vấn đề. Vì vậy, nếu mã của tôi được mặc định là phiên bản mới nhất thì ứng dụng của tôi sẽ bị lỗi
May mắn thay, tôi đã nhập một phiên bản faker cụ thể từ unpkg. Như bạn có thể thấy từ URL
Có một số lợi thế để kiểm soát phiên bản
- bạn sẽ thử nghiệm ứng dụng của mình trên một phiên bản cụ thể. Nếu bạn triển khai vào sản xuất và cho phép phiên bản thay đổi với mỗi bản phát hành mới, thì ứng dụng của bạn có thể dần dần xuất hiện lỗi hoặc không tương thích theo thời gian do bạn chưa kiểm tra ứng dụng của mình với phiên bản mới của thư viện
- khi sử dụng nhiều phiên bản thư viện, các phiên bản trong tương lai có thể xung đột với nhau, một lần nữa khiến ứng dụng của bạn bị lỗi trong quá trình sản xuất và có thể bạn không nhận thấy
Tôi nhập ba thư viện tôi sử dụng ở các phiên bản cụ thể
________số 8Điều này giúp tôi kiểm soát quá trình thử nghiệm và tôi tự tin hơn rằng bất kỳ lỗi nào trong ứng dụng sẽ là kết quả của quá trình viết mã của tôi, chứ không phải là bản cập nhật cho thư viện được sử dụng trong dự án
Các CDN khác nhau có thể có cú pháp khác nhau để kiểm soát số phiên bản. Nhưng bạn sẽ có thể xem định dạng sẽ sử dụng bằng cách tìm kiếm thư viện trên CDN và làm theo tài liệu do mỗi CDN cung cấp
Dưới đây là danh sách cho AG Grid trên mỗi trang web CDN
- Giải nén. com - Lưới AG
- jsDelivr. com - Lưới AG
- cdnjs. com - Lưới AG
Nếu bạn theo các liên kết cho các gói AG Grid thì bạn sẽ thấy rằng mỗi trang web có giao diện hơi khác nhau. Nhưng tất cả đều cho phép chọn một phiên bản AG Grid cụ thể và cho phép bạn sao chép và dán URL để thêm vào tệp HTML của mình
CDN trong thực tế
Dưới đây là một tệp HTML đơn giản sẽ hiển thị Lưới dữ liệu trên màn hình
Tôi chỉ phải triển khai tệp HTML, vì thư viện Lưới AG được tải vào trình duyệt từ CDN
Trong ví dụ bên dưới, tôi đang tải phiên bản 26. 2. 1 của AG Grid và các tệp CSS từ unpkg. comCDN
CDN Added AG Grid Example
document.addEventListener['DOMContentLoaded', [] => {
const columnDefs = [
{ field: "cdn" },
{ field: "url" },
];
const rowData = [
{ cdn: "jsDelivr", url: "//www.jsdelivr.com"},
{ cdn: "Unpkg", url: "//Unpkg.com" },
{ cdn: "cdnJS", url: "//cdnjs.com" }
];
const gridOptions = {
columnDefs: columnDefs,
rowData: rowData,
/* allow manual copy and paste */
enableCellTextSelection:true,
ensureDomOrder:true
};
const gridDiv = document.querySelector['#myGrid'];
new agGrid.Grid[gridDiv, gridOptions];
}];
Unpkg nhập được thể hiện trong trang html đã triển khai này
Tôi có thể dễ dàng sử dụng các CDN khác bằng cách thay đổi các thành phần
JSDelivr sử dụng phiên bản 26. 2. 1
- https. //cdn. jsdelivr. net/npm/ag-grid-community@26. 2. 1/dist/ag-grid-community. tối thiểu. không có phong cách. js
- https. //cdn. jsdelivr. net/npm/ag-grid-community@26. 2. 1/dist/styles/ag-lưới. css
- https. //cdn. jsdelivr. net/npm/ag-grid-community@26. 2. 1/dist/styles/ag-theme-alpine. css
Việc nhập JSDelivr được thể hiện trong trang html đã triển khai này
CdnJS sử dụng phiên bản 26. 2. 1. CdnJS có một cách tiếp cận hơi khác đối với việc đặt tên phiên bản, vì vậy, đáng để kiểm tra phiên bản thả xuống trong danh sách Lưới cdnJS AG
- https. //cdnjs. đám mây. com/ajax/libs/ag-grid/Docs-26. 2. 0-20211117/ag-grid-community. tối thiểu. không có phong cách. tối thiểu. js
- https. //cdnjs. đám mây. com/ajax/libs/ag-grid/Docs-26. 2. 0-20211117/styles/ag-lưới. tối thiểu. css
- https. //cdnjs. đám mây. com/ajax/libs/ag-grid/Docs-26. 2. 0-20211117/styles/ag-theme-alpine. tối thiểu. css
Quá trình nhập CdnJS được thể hiện trong trang html đã triển khai này
Tóm lược
Không phải lúc nào chúng tôi cũng phải triển khai các thư viện JavaScript cho trang web của mình cùng với các tệp HTML của chúng tôi. Thay vào đó, chúng tôi có thể bao gồm chúng sao cho chúng được phân phối bởi Mạng phân phối nội dung
Nhiều hướng dẫn chúng tôi làm theo sẽ hiển thị các ví dụ về việc này
Nếu chúng tôi nhập JavaScript hoặc CSS từ CDN, chúng tôi nên thêm số phiên bản của thư viện mà chúng tôi đang sử dụng để bảo vệ ví dụ đã triển khai của chúng tôi khỏi các sự cố trong tương lai nếu thư viện cập nhật
Một thói quen tốt để bắt đầu là thêm phiên bản ngay cả khi chúng tôi làm theo hướng dẫn. Nếu chúng tôi nhận thấy rằng các tệp bao gồm CDN không có phiên bản, thì bạn nên truy cập CDN để tìm hiểu phiên bản hiện tại của thư viện là gì. Sau đó, bạn có thể thêm số phiên bản đó vào nguồn của mình
Chính những điều chỉnh nhỏ như thế này sẽ làm cho bất kỳ dự án danh mục đầu tư nào bạn tạo trên Github trở nên chuyên nghiệp hơn một chút
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
Alan Richardson là Nhà phát triển phần mềm, Lập trình viên, Người kiểm thử và Nhà tiếp thị. Tác giả của nhiều cuốn sách và các khóa đào tạo trực tuyến
Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơn
Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu