В своей предыдущей статье я давал информацию об ASCII и Unicode. Если вы не читали, вы можете щелкнуть здесь, чтобы перейти.
Когда наши компьютеры обрабатывают введенные нами значения, каждое значение представлено кодовыми точками. Затем с помощью определенного алгоритма, такого как UTF-8 (8-битный формат преобразования Unicode), значения преобразуются в двоичные данные. Давайте попробуем понять на примере
- Если мы введем «m» › «m» будет обрабатываться как 77. Вы можете проверить с помощью
"m”.charCodeAt() - 77 преобразуется в двоичные данные с помощью UTF-8. 77 преобразуется в «1001101»
Диск: постоянное хранилище компьютеров.
ОЗУ (оперативное запоминающее устройство): временное хранилище компьютеров. Данные, хранящиеся в ОЗУ, удаляются при перезагрузке или выключении компьютера.
Буфер
Чтобы получить доступ к данным, которые хранятся в ОЗУ, быстрее, чем Disk.RAM необходимо использовать, если мы не хотим хранить данные как постоянно. Node.js предоставляет класс буфера для передачи данных или манипулирования данными. По сути, объект буфера представляет собой двоичный массив объект, а размер каждого индекса равен 1 байту.
const buffer = Buffer.alloc(3) // Create a buffer which size is 3 bytes
console.log(buffer.length) // get buffer size
for (const item of buffer) {
console.log(item) // 0 0 0
}
const buffer2 = Buffer.alloc(3, 77) // fill all indexes as 'M'.M represented as 77 in unicode
console.log(buffer2.toString()) // MMM
const username = 'mehmet'.split('').map(cell => cell.charCodeAt())
const buffer3 = Buffer.from(username) // create buffer from array,string or number.
console.log(buffer3.toString()) // mehmet
console.assert(buffer3.toString('base64')==btoa('mehmet'),'we can choose chracter encoding .Default is utf-8.Options: utf-8,base64,base64url,ascii')
Буферизация
Это процесс обработки или передачи больших данных путем их разделения на части. Вместо того, чтобы обрабатывать или отправлять большой набор данных за один раз, вы можете более эффективно управлять им, разделив его на фрагменты. Это оптимизирует использование памяти, и вам не нужно ждать загрузки или обработки всех данных. Попробуем разобраться на примере.
Представьте, что мы смотрим видео на YouTube. Если наше интернет-соединение достаточно быстрое, мы видим линию, выходящую за линию, в которой мы находимся на видео. Эти данные хранятся в оперативной памяти и называются буфером. Если наше интернет-соединение медленное достаточно, мы увидим, что видео переходит в состояние загрузки. В этом случае мы ждем получения необходимых данных для продолжения видео. Если для продолжения видео требуется 100 единиц данных, и мы получили 60 единиц данных, мы будем ждать для оставшихся 40 единиц данных. В этом случае наш компьютер будет хранить 60 единиц данных в оперативной памяти, пока не поступят остальные данные. Все эти операции называются Буферизация.
URL-адрес данных против URL-адреса
URL (унифицированный указатель ресурсов): он просто представляет источник данных. URL не включает сами данные, поэтому мы не можем загрузить их напрямую.
URL-адрес данных: URL-адрес данных кодирует данные с помощью base64. URL-адрес содержит данные, поэтому мы можем загрузить их напрямую.
формат: data:[mediatype];base64,data
BLOB (Большой двоичный объект)
Это неизменяемый объект, который представляет видео, изображения, аудио или другие данные. Буфер используется для операций над данными, а большой двоичный объект используется для представления данных и обеспечения их чтения.
формат: new Blob([data],{type:mimeType})`
свойства:
- size: Размер данных в байтах.
- тип: MIME-тип данных.
Давайте приведем пример того, что мы уже узнали. Приведенный ниже код открывает новое окно, содержащее буквы алфавита (A-Z).
const buffer = new Uint8Array(26); // create a buffer which size is 26
for (let x = 0; x < 26; x++)buffer[x] = 65 + x;
const blob = new Blob([buffer], { type: 'text/plain' }); // creates a blob to read data.
const url = URL.createObjectURL(blob); // creates a URL to represent blob
const elem = document.createElement('a'); // creates a link element
elem.href = url;
elem.target = '_blank';
document.body.appendChild(elem);
elem.click();
setTimeout(() => document.body.removeChild(elem), 100)
Итак, что мне делать, если я хочу загрузить данные, а не открывать их на новой странице?
const buffer = new Uint8Array(26);
for (let x = 0; x < 26; x++)buffer[x] = 65 + x;
const blob = new Blob([buffer], { type: 'text/plain' });
const reader = new FileReader(); // reads buffer or file
reader.onload = e => { // when completed to read "onload" event will execute
const result = e.target?.result; // gets result
const elem = document.createElement('a');
elem.download = 'Example.txt'; // declares filename and actives download feature
elem.href = result;
document.body.appendChild(elem);
elem.click();
setTimeout(() => document.body.removeChild(elem), 100)
}
reader.readAsDataURL(blob) // Creates an Data Url
В результате URL.createObjectURL(blob) пользователь должен перейти в соответствующее место и выполнить загрузку вручную, в то время как reader.readAsDataURL(blob) считывает данные в код и загружает его.
В приведенном ниже коде openImg1 и openImg2 делают одно и то же. Разница в том, что если мы хотим загрузить выбранное изображение или отправить его в другое место, нам нужно использовать FileReader. Если мы хотим показывать изображение только в интерфейсе, логичнее использовать URL.
<template>
<input type="file" @change="openImg">
<div class="grid grid-cols-3 mt-4">
<img class="rounded-lg shadow-lg" v-for="img in imgs" :key="img" :src="img" alt="">
</div>
</template>
<script setup>
import { onMounted, ref } from "vue"
const imgs = ref([])
const openImg1 = e => {
const file = e.target.files[0];
if (!file) return;
console.log(file)
const url = URL.createObjectURL(file);
imgs.value.push(url);
e.target.value = '';
}
const openImg2 = (e) => {
const file = (e.target)?.files[0];
if (!file) return;
const reader=new FileReader();
reader.onload=e=>{
const result=e.target.result;
imgs.value.push(result);
}
reader.readAsDataURL(file)
e.target.value = '';
}
</script>
Ресурсы: Mozilla, ChatGPT, FreeCodeCamp
