HomeLập trìnhJavaScriptCách nhập JavaScript...

Cách nhập JavaScript và CSS từ CDN công khai


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à những dịch vụ lưu trữ tệp cho nhiều phiên bản của các 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í nên 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 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ọ.

npmCDN điều khiển

Không phải thư viện nào cũng có CDN của riêng họ. Hầu hết các thư viện triển khai tới 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 lúc xây dựng. npm tải xuống thư viện từ CDN và thêm nó vào dự án cục bộ.

Chúng ta không cần phải sử dụng npm và quy trình xây dựng JavaScript để tận dụng lợi thế của npm hệ sinh thái. Chúng tôi có thể sử dụng ‘CDN do npm điều khiển’ làm máy chủ lưu trữ cho các thư viện mà không cần phải sử dụng npm.

‘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 npm.

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 npm nhưng không có CDN riêng. 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>

npmCDN điều khiển theo dõi các bản phát hành được phân phối qua npmvà lưu trữ các bản phát hành trên trang web của riêng họ.

Đọc thêm  Khám phá Lập trình hàm trong JavaScript với phần giới thiệu kỹ lưỡng này

Trong mã nguồn của bài đăng freeCodeCamp trước đây của tôi, tôi đã sử dụng CDN unpkg.com để nhập AG Grid vào mã của mình bằng cách sử dụng một script thành phần.

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ý bất kỳ vấn đề nào.

Những CDN nào có sẵn?

Tôi mới chỉ sử dụng ba CDN:

Đâ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 một 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 vào bộ nhớ cache trên trình duyệt của người dùng của bạn.

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 link phần tử.

Ví dụ: AG Grid sử dụng hai biểu định kiểu.

Structural Style sheet cung cấp CSS sẽ bố trí dữ liệu dưới dạng Grid.

<link 
 rel="stylesheet"
 href="https://unpkg.com/ag-grid-community/dist/styles/ag-grid.css"
>

Bảng Kiểu chủ đề cung cấp tính thẩm mỹ trực quan cho Lưới.

<link 
 rel="stylesheet" 
 href="https://unpkg.com/ag-grid-community/dist/styles/ag-theme-alpine.css"
>

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 công cụ chỉnh sửa bảng mã nguồn mở của mình, tôi sử dụng ba thư viện: AG Grid, PapaParse và Faker.

Đọc thêm  Hướng dẫn cơ bản về JavaScript Date và Moment.js

Faker gần đây đã gặp sự cố khi một phiên bản gần đây được triển khai cho npm gặp sự cố. 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ẽ không thành công.

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ừ src URL bên dưới tôi đã bao gồm phiên bản 5.5.3:

<script src=
    "https://unpkg.com/[email protected]/dist/faker.min.js">
</script>

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 sang 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 gặp 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ể:

<script src="https://unpkg.com/[email protected]/dist/ag-grid-community.min.js"></script>
<script src="https://unpkg.com/[email protected]/papaparse.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/faker.min.js"></script>

Đ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:

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ả chúng đề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.

Đọc thêm  Các hàm toán học JavaScript được giải thích

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.com CDN.

<!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>

Unpkg nhập được thể hiện trong trang html đã triển khai này.

cdns và các url của chúng

Tôi có thể dễ dàng sử dụng các CDN khác bằng cách thay đổi scriptlink các yếu tố trong head phần của tôi html tập tin.

JSDelivr sử dụng phiên bản 26.2.1

Quá trình 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, do đó, đáng để kiểm tra phiên bản thả xuống trong danh sách Lưới cdnJS AG

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. 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ề cách thực hiện 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 bất cứ khi nào 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. 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.



Zik.vn – Biên dịch & Biên soạn Lại

spot_img

Create a website from scratch

Just drag and drop elements in a page to get started with Newspaper Theme.

Buy Now ⟶

Bài viết liên quang

DMCA.com Protection Status