Nhập css vào html javascript
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 Show 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 4Khô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 4 khi xây dựng. 4 tải xuống thư viện từ CDN và thêm nó vào dự án cục bộChúng tôi không cần phải sử dụng quy trình xây dựng 4 và JavaScript để tận dụng lợi thế của hệ sinh thái 4. 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 4'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 4Ví 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 4 nhưng không có CDN riêng. Thay vào đó, các lập trình viên có thể thêm tham chiếu trực tiếp vào AG Grid từ CDN như unpkg. com
CDN dựa trên 4 giám sát các bản phát hành được phân phối qua 4 và lưu trữ các bản phát hành trên trang web của chính họ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ử 6Như 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
Đâ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ì
4 CDN phân phối nhiều hơn JavaScriptCDN 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ử 8Ví 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ệnTrong 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 9 bên dưới, tôi đã bao gồm phiên bản 0
Có một số lợi thế để kiểm soát phiên bản
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
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
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 6 và 8 trong phần 3 của tệp 4 của mìnhJSDelivr sử dụng phiên bản 26. 2. 1
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
Quá trình nhập CdnJS được thể hiện trong trang html đã triển khai này Tóm lượcKhô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 |