NỘI DUNG BÀI VIẾT
Trong bài viết này, mình sẽ hướng dẫn các bạn cách import JavaScript và CSS từ CDN.
Khi bạn đang viết một ứng dụng Vanilla JavaScript, bạn không cần phải lưu trữ tất cả cá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 (Content Delivery Network – viết tắt là CDN).
Điều này có thể đơn giản hóa việc triển khai ứng dụng và 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 rồi đấy nhưng có thể bạn không để ý thôi.
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 của các thư viện chung. Chúng thường có hiệu suất cao và cung cấp các tệp được lưu vào bộ nhớ cache theo vị trí, vì vậy bất kể người dùng của bạn ở đâu, họ đều nhận được các tệp từ các vị trí địa lý gần với 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ể đã có tệp được lưu trong 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ó một CDN JQuery. 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ó JQuery trong bộ nhớ cache của họ.
npm-driven CDNs
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 đến 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 npm.
Chúng ta có thể sử dụng npm-driven CDNs làm máy chủ cho các thư viện mà không cần phải sử dụng npm.
npm-driven CDNs là một CDN lưu trữ mã phân phối cho các thư viện triển khai tới npm.
Ví dụ: AG Grid triển khai thành npm nhưng không có CDN của riêng nó. Thay vào đó, các lập trình viên có thể thêm một tham chiếu trực tiếp đến AG Grid từ một CDN như unpkg.com.
<script src=
"https://unpkg.com/ag-grid-community/dist/ag-grid-community.min.nostyle.js">
</script>Code language: HTML, XML (xml)npm-driven CDNs được điều khiển bằng npm, giám sát các bản phát hành được phân phối qua npm và lưu trữ các bản phát hành trên trang web của riêng chúng.
Có những CDN nào?
Tôi chỉ sử dụng 3 CDN:
Đây là tất cả các trang web chuyên nghiệp và hoạt động tốt. Và lý do chính tôi chọn những cái này là phần tài liệu của chúng viết rất đầy đủ và dễ hiểu.
npm 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ử link.
Ví dụ, AG Grid sử dụng hai bảng định kiểu.
<link
rel="stylesheet"
href="https://unpkg.com/ag-grid-community/dist/styles/ag-grid.css"
>Code language: HTML, XML (xml)và
<link
rel="stylesheet"
href="https://unpkg.com/ag-grid-community/dist/styles/ag-theme-alpine.css"
>Code language: HTML, XML (xml)Cả hai tệp CSS này cũng được triển khai tới npmjs.com và có thể được đưa vào dự án của chúng ta từ CDN.
Cách import JavaScript và CSS từ CDN
Dưới đây là một tệp HTML đơn giản sẽ hiển thị Data Grid trên màn hình.
Tôi chỉ phải triển khai tệp HTML, vì thư viện AG Grid được tải vào trình duyệt từ CDN.
Trong ví dụ dưới đây, tôi đang tải phiên bản 26.2.1 của AG Grid và các tệp CSS từ CDN unkg.com.
<!DOCTYPE html>
<html lang="en">
<head>
<title>CDN Added AG Grid Example</title>
<script src="https://unpkg.com/[email protected]/dist/ag-grid-community.min.nostyle.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/styles/ag-grid.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/styles/ag-theme-alpine.css">
</head>
<body>
<div id="myGrid" style="height: 200px; width:500px;" class="ag-theme-alpine"></div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const columnDefs = [
{ field: "cdn" },
{ field: "url" },
];
const rowData = [
{ cdn: "jsDelivr", url: "https://www.jsdelivr.com"},
{ cdn: "Unpkg", url: "https://Unpkg.com" },
{ cdn: "cdnJS", url: "https://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);
});
</script>
</body>
</html>Code language: HTML, XML (xml)Tôi có thể dễ dàng sử dụng các CDN khác bằng cách thay đổi các phần tử script và link trong phần head của tệp html.
Kết luận
Không phải lúc nào chúng ta 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 ta có thể sử dụng CDN.
Nếu chúng ta import JavaScript và CSS từ CDN, chúng ta nên thêm số phiên bản của thư viện mà chúng ta đang sử dụng để tránh bị conflict trong tương lai khi chúng được cập nhật.
Tất nhiên, trước khi thêm vào dự án, bạn cũng cần kiểm tra và xem xét chúng kỹ lưỡng.
Chính những điều chỉnh nhỏ như thế này sẽ làm cho bất kỳ dự án bạn tạo trên Github trở nên chuyên nghiệp hơn một chút.
Cảm ơn bạn đã theo dõi bài viết!
Các bạn có thể tham khảo các bài viết hay về JavaScript tại đây.
Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.
TỔNG HỢP TÀI LIỆU HỌC LẬP TRÌNH CƠ BẢN CHO NGƯỜI MỚI BẮT ĐẦU
KHOÁ HỌC BOOTCAMP JAVA/PHP/.NET TRỞ THÀNH LẬP TRÌNH VIÊN TRONG 5-6 THÁNG
