Eine kurze Diskussion über die binäre Familie von JS

Überblick

Blob: Ein binäres Objekt auf dem Frontend, das speziell zur Unterstützung von Dateioperationen verwendet wird

ArrayBuffer: Ein generischer Binärpuffer auf dem Frontend, ähnlich einem Array, aber mit vielen Unterschieden in API und Funktionen

Puffer: Ein von Node.js bereitgestellter Binärpuffer, der häufig zur Verarbeitung von E/A-Vorgängen verwendet wird

Klecks

Lassen Sie uns zunächst Blob vorstellen, das zur Unterstützung von Dateivorgängen verwendet wird. Einfach ausgedrückt: In JS gibt es zwei Konstruktoren, File und Blob, und File erbt alle Eigenschaften von Blob.

Aus unserer Sicht kann das Dateiobjekt also als spezielles Blob-Objekt betrachtet werden.

Mit welchen Vorgängen können wir im Front-End-Engineering Dateiobjekte erhalten? Bitte beachten Sie:

(Hinweis: Der aktuelle Status der File-API-Spezifikation ist „Arbeitsentwurf“)

Wie oben erwähnt, ist das File-Objekt ein spezielles Blob-Objekt und kann daher natürlich die Methoden des Blob-Objekts direkt aufrufen. Schauen wir uns die spezifischen Methoden von Blob an und welche Funktionen damit erreicht werden können

Blob in Aktion

Ein Blob kann mit der Methode window.URL.createObjectURL in eine Blob-URL umgewandelt und als Link zum Herunterladen von Dateien oder zur Bildanzeige verwendet werden.

Die durch die Blob-URL implementierten Download- bzw. Anzeigefunktionen können nur innerhalb eines einzigen Browsers ausgeführt werden. Es kann nicht auf dem Server gespeichert werden, oder es hat keinen Sinn, es auf dem Server zu speichern.

Hier ist ein Beispiel für einen Blob. Sie sehen, dass er sehr kurz ist.

blob:d3958f5c-0777-0845-9dcf-2cb28783acaf

Im Vergleich zur langen Daten-URL im Base64-Format reicht die Länge der Blob-URL offensichtlich nicht aus, um genügend Informationen zu speichern, was bedeutet, dass sie im Browser lediglich wie eine „Referenz“ funktioniert. Aus dieser Perspektive ist Blob URL ein vom Browser selbst entwickeltes Pseudoprotokoll.

Blob-Download-Datei

Wir können ein Blob-Objekt (Dateiobjekt) über window.URL.createObjectURL empfangen, es in eine Blob-URL konvertieren, es dann der Eigenschaft a.download zuweisen und dann auf der Seite auf diesen Link klicken, um es herunterzuladen.

<!-- html-Teil -->
<a id="h">Klicken Sie hier, um es herunterzuladen</a>
<!-- js-Teil -->
<Skript>
  var blob = new Blob(["Hallo Welt"]);
  var url = window.URL.createObjectURL(blob);
  var a = document.getElementById("h");
  a.download = "hallowelt.txt";
  a.href = URL;
</Skript>

Hinweis: Das Download-Attribut ist nicht mit IE kompatibel. Sie können IE über die Methode window.navigator.msSaveBlob oder andere Methoden optimieren (IE10/11).

Ergebnisse der Operation

Lokale Anzeige des Blob-Bilds

Die von window.URL.createObjectURL generierte Blob-URL kann auch img.src zugewiesen werden, um das Bild anzuzeigen.

<!-- html-Teil -->
<input type="file" id='f' />
<img id='img' style="Breite: 200px;Höhe: 200px;" />
<!-- js-Teil -->
<Skript>
  document.getElementById('f').addEventListener('ändern', Funktion (e) {
    var Datei = diese.Dateien[0];
    const img = document.getElementById('img');
    const url = window.URL.createObjectURL(Datei);
    img.src = URL;
    img.onload = Funktion () {
        // Geben Sie ein zuvor erstelltes URL-Objekt frei, indem Sie URL.createObjectURL aufrufen. window.URL.revokeObjectURL(url);
    }
  }, FALSCH);
</Skript>

Ergebnisse der Operation

Hochladen von Blobdateien

• Blob.slice(start,end) kann verwendet werden, um einen großen Blob in mehrere kleine Blobs aufzuteilen
• xhr.send kann Blob-Objekte direkt senden

Frontend

<!-- html-Teil -->
<input type="file" id='f' />
<!-- js-Teil -->
<Skript>
  Funktion Hochladen(Blob) {
    var xhr = neue XMLHttpRequest();
    xhr.open('POST', '/ajax', true);
    xhr.setRequestHeader('Inhaltstyp', 'Text/Plain')
    xhr.send(blob);
  }
  document.getElementById('f').addEventListener('ändern', Funktion (e) {
    var blob = diese.dateien[0];
    const CHUNK_SIZE = 20; .
    const SIZE = Blobgröße;
    var start = 0;
    var Ende = CHUNK_SIZE;
    während (Start < GRÖSSE) {
        hochladen(blob.slice(Start, Ende));
        Anfang = Ende;
        Ende = Start + CHUNK_SIZE;
    }
  }, FALSCH);
</Skript>

Knoten

app.use(async (ctx, next) => {
    warte auf das nächste();
    wenn (ctx.Pfad === '/ajax') {
        Konstanten req = ctx.req;
        const body = warte auf Parsen (erwünscht);
        ctx.status = 200;
        Konsole.log(Text);
        console.log('---------------');
    }
});

Dateiinhalt

Nach Angaben des Handelsamts von Zhanjiang betrug die tatsächliche Höhe des in Zhanjiang von Januar bis Oktober dieses Jahres eingesetzten ausländischen Kapitals

Ergebnisse der Operation

Dateiinhalte lokal lesen

Wenn Sie ein Blob- oder Dateiobjekt lesen und in Daten anderer Formate konvertieren möchten, können Sie die API des FileReader-Objekts verwenden, um

• FileReader.readAsText(Blob): Wandelt einen Blob in eine Textzeichenfolge um
• FileReader.readAsArrayBuffer(Blob): Konvertiert Blob-Daten in ArrayBuffer-Format
• FileReader.readAsDataURL(): Konvertiert einen Blob in eine Daten-URL im Base64-Format

Als nächstes versuchen wir, den Inhalt einer Datei als Zeichenfolge zu lesen.

<input type="file" id='f' />


document.getElementById('f').addEventListener('ändern', Funktion (e) {
    var Datei = diese.Dateien[0];
    Konstante Leser = neuer FileReader();
    Leser.onload = Funktion () {
        const Inhalt = Leser.Ergebnis;
        konsole.log(Inhalt);
    }
    reader.readAsText(Datei);
}, FALSCH);

Ergebnisse der Operation

Oben wird die Verwendung von Blob vorgestellt. Es ist nicht schwer zu erkennen, dass Blob für Dateien gedacht ist, oder man kann sagen, dass es sich um ein Dateiobjekt handelt. Gleichzeitig stellen wir fest, dass Blob nicht in der Lage ist, mit den Details von Binärdaten zu arbeiten. Wenn Sie beispielsweise einen Teil der Binärdaten ändern möchten, reicht Blob offensichtlich nicht aus. Diese feinkörnige Funktion kann durch den unten vorgestellten ArrayBuffer vervollständigt werden.

ArrayBuffer

Sehen wir uns die allgemeine Funktionalität von ArrayBuffer in einem Diagramm an.

Gleichzeitig ist zu beachten, dass sich ArrayBuffer stark vom nativen JS-Array unterscheidet, wie in der Abbildung dargestellt

Nachfolgend finden Sie eine detaillierte Einführung nacheinander

Lesen Sie lokale Daten im ArrayBuffer-Format

document.getElementById('f').addEventListener('ändern', Funktion (e) {
  const Datei = diese.Dateien[0];
  const fileReader = neuer FileReader();
  fileReader.onload = Funktion () {
    const Ergebnis = fileReader.Ergebnis;
    console.log(Ergebnis)
  }
  fileReader.readAsArrayBuffer(Datei);
}, FALSCH);

Ergebnisse der Operation

Lesen Sie Ajax-Anforderungsdaten im ArrayBuffer-Format

Geben Sie den Datentyp der Antwort über xhr.responseType = "arraybuffer" an.

Drucken Sie xhr.response im Onload-Rückruf

Frontend

const xhr = neue XMLHttpRequest();
xhr.open("GET", "ajax", wahr);
xhr.responseType = "Array-Puffer";
xhr.onload = Funktion () {
    Konsole.log(xhr.Antwort)
}
xhr.senden();

Knoten

const app = new Koa();
app.use(async (ctx) => {
  wenn (Pfadname = '/ajax') {
        ctx.body = "Hallo Welt";
        ctx.status = 200;
   }
}).listen(3000)

Ergebnisse der Operation

Schreiben in ArrayBuffer über TypeArray

const typedArray1 = neues Int8Array(8);
Typ-Array1[0] = 32;

const typedArray2 = neues Int8Array(typedArray1);
typedArray2[1] = 42;
 
console.log(typedArray1);
// Ausgabe: Int8Array [32, 0, 0, 0, 0, 0, 0, 0]
 
console.log(typedArray2);
// Ausgabe: Int8Array [32, 42, 0, 0, 0, 0, 0, 0]

Schreiben in ArrayBuffer über DataView

const Puffer = neuer ArrayBuffer(16);
const view = neue DataView(Puffer);
Ansicht.setInt8(2, 42);
console.log(ansicht.getInt8(2));
// Ausgabe: 42

Puffer

Buffer ist ein von Node.js bereitgestelltes Objekt, das auf der Front-End-Seite nicht verfügbar ist. Es wird im Allgemeinen für IO-Operationen verwendet. Wenn beispielsweise Front-End-Anforderungsdaten empfangen werden, können die empfangenen Front-End-Daten über die folgende Puffer-API integriert werden.

Puffer in Aktion

Hier sind einige Beispiele:

Knotenseite (Koa)

const app = new Koa();
app.use(async (ctx, next) => {
    wenn (ctx.Pfad === '/ajax') {
        const chunks = [];
        Konstanten req = ctx.req;
        req.on('Daten', buf => {
            chunks.push(puffer);
        })
        req.on('Ende', () => {
            Lassen Sie den Puffer = Buffer.concat(chunks);
            Konsole.log(Puffer.toString())
        })
    }
});
app.listen(3000)

Frontend

const xhr = neue XMLHttpRequest();
xhr.open("POST", "ajax", wahr);
xhr.setRequestHeader('Inhaltstyp', 'Text/Plain')
xhr.send("asdasdsadfsdfsadasdas");

Ergebnisse der Operation

Knotenausgabe

asdasdsadfsdfsadasdas

Oben finden Sie eine kurze Erläuterung der Details der Binärfamilie von JS. Weitere Informationen zur Binärfamilie von JS finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!