Url dữ liệu javascript là gì?

Gần đây Deno đã phát hành v1. 7. 0 có hỗ trợ URL dữ liệu. Tôi nghĩ rằng đây là một cách khá hay để tự động tạo các mô-đun một cách nhanh chóng khi được ghép nối với

const { add } = await import["data:application/typescript;base64,"];

0. Điều này có thể được sử dụng để tải động tất cả các phụ thuộc mà chúng tôi muốn sử dụng trong tệp của mình cùng một lúc

URL dữ liệu

URL dữ liệu về cơ bản là URL nhưng với dữ liệu được mã hóa ở một số dạng để thay vì liên kết đến dữ liệu, nó giữ dữ liệu bên trong chính nó. URL dữ liệu trước tiên cần bắt đầu bằng

const { add } = await import["data:application/typescript;base64,"];

1. Sau đó, chúng tôi cần nối thêm loại MIME của tệp mà chúng tôi đang tải, trong trường hợp này là

const { add } = await import["data:application/typescript;base64,"];

2nhưng chúng tôi cũng có thể sử dụng

const { add } = await import["data:application/typescript;base64,"];

3. Sau khi chúng tôi thêm định dạng để mã hóa tệp, trong hướng dẫn này, chúng tôi sẽ chỉ sử dụng

const { add } = await import["data:application/typescript;base64,"];

4 và sau đó bạn cũng thêm một

const { add } = await import["data:application/typescript;base64,"];

5 theo sau là mã hóa thực tế của tệp

Một ví dụ

Hãy tưởng tượng chúng ta có tập tin này

export const add = [a: number, b: number] => a + b;

và chúng tôi muốn nhập nó từ một URL dữ liệu. Sau đó, trước tiên chúng tôi sẽ nhận được bản soạn sẵn

const { add } = await import["data:application/typescript;base64,"];

Sau đó, chúng ta cần nối thêm mã hóa base64. Đối với điều này

________số 8

Vì vậy, mã cuối cùng là

const { add } = await import["data:application/typescript;base64,ZXhwb3J0IGNvbnN0IGFkZCA9IChhOiBudW1iZXIsIGI6IG51bWJlcikgPT4gYSArIGI7"];

và nó sẽ xuất chính xác hàm

const { add } = await import["data:application/typescript;base64,"];

6

Đang tải phụ thuộc

Bây giờ chúng ta đã biết cách sử dụng chúng, hãy tạo một hàm trợ giúp để tải các phụ thuộc. Trước tiên hãy tạo định nghĩa kiểu

const { add } = await import["data:application/typescript;base64,"];

1

Chúng tôi muốn tạo một biến cho URL dữ liệu để nhập và một biến cho mã nguồn của quá trình nhập. Chúng tôi cũng muốn lặp qua mảng

const { add } = await import["data:application/typescript;base64,"];

7

Trong trường hợp bạn chưa biết, URL dữ liệu chỉ đơn giản là một chuỗi ký tự dài đại diện cho mã nhị phân của hình ảnh của bạn. Sau đó, bạn có thể sử dụng URL này trong thẻ HTML

const { add } = await import["data:application/typescript;base64,"];

9 của mình

Rât thuận tiện

Video hướng dẫn

Nếu bạn thích video hướng dẫn hơn, bạn có thể xem video dài 4 phút này trên kênh YouTube của tôi

Bước 1. Nhập tệp

Bạn sẽ cần một trường nhập tệp trong HTML của mình. Chỉ như thế này

const { add } = await import["data:application/typescript;base64,"];

3

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Bạn có thể đặt tên cho ID bất cứ điều gì bạn thích

Bước 2. Thay đổi sự kiện

Trong JavaScript, bạn sẽ cần đính kèm trình nghe

const { add } = await import["data:application/typescript;base64,"];

0 để phản ứng khi người dùng chọn tệp

const { add } = await import["data:application/typescript;base64,"];

4

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Nếu bạn chọn một tệp và kiểm tra bảng điều khiển, bạn sẽ thấy đối tượng sự kiện. Lưu ý về tài sản

const { add } = await import["data:application/typescript;base64,"];

1

Bước 3. Thiết lập trình đọc tệp

Tiếp theo, bạn sẽ cần tham chiếu đến tệp đã chọn và tạo một phiên bản mới của

const { add } = await import["data:application/typescript;base64,"];

2. Đối tượng đọc tệp này có thể đọc tệp ở các dạng khác nhau

const { add } = await import["data:application/typescript;base64,"];

5

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Thay thế dòng

const { add } = await import["data:application/typescript;base64,"];

3 bằng đoạn mã trên

Bước 4. Đọc dưới dạng URL dữ liệu

Bây giờ chúng ta đã tạo

const { add } = await import["data:application/typescript;base64,"];

2, chúng ta có thể yêu cầu nó đọc tệp dưới dạng URL dữ liệu Base64

const { add } = await import["data:application/typescript;base64,"];

6

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Như bạn có thể thấy, chúng tôi đính kèm sự kiện

const { add } = await import["data:application/typescript;base64,"];

41 với sự kiện

const { add } = await import["data:application/typescript;base64,"];

2. Khi tệp đã được đọc xong, chúng ta có thể lấy URL Dữ liệu bằng cách truy cập vào

const { add } = await import["data:application/typescript;base64,"];

43

URL dữ liệu base64 là gì?

Thuộc tính URL dữ liệu là gì?

Hình ảnh dữ liệu PNG là gì?

Base64 có an toàn không?