Dieser Artikel wurde von Craig Bilner und Adrian Sandu geprüft. Vielen Dank an alle Peer -Rezensenten von SitePoint, die SitePoint -Inhalte so gut wie möglich gemacht haben!
funktionale Programmierung und unveränderliche Daten sind für viele JavaScript -Entwickler ein aktueller Schwerpunkt, da sie versuchen, Wege zu finden, um ihren Code einfacher und einfacher zu argumentieren.Obwohl JavaScript immer einige funktionale Programmierungstechniken unterstützt hat, werden sie in den letzten Jahren nur wirklich populär und traditionell haben auch keine native Unterstützung für unveränderliche Daten gegeben. JavaScript lernt immer noch viel über beide und die besten Ideen stammen aus Sprachen, die diese Techniken bereits ausprobiert haben.
In einer anderen Ecke der Programmierwelt ist Clojure eine funktionale Programmiersprache, die sich der echten Einfachheit widmet, insbesondere wenn Datenstrukturen betroffen sind. Mori ist eine Bibliothek, mit der wir die anhaltenden Datenstrukturen von Clojure direkt aus JavaScript verwenden können.
In diesem Artikel wird die Gründe für die Gestaltung dieser Datenstrukturen untersucht und einige Muster für die Verwendung dieser Anwendungen untersucht. Wir könnten uns dies auch als den ersten Sprungbrett für JavaScript -Entwickler vorstellen, der sich für das Programmieren mit Clojure oder ClojureScript interessiert.
Was sind persistente Daten?
persistenten -Werten, die nicht geändert werden können, und transienten -Werte, die zeitliche Lebensdauer zwischen Mutationen haben. Versuche, persistente Datenstrukturen zu ändern, vermeiden Sie die Mutation der zugrunde liegenden Daten, indem eine neue Struktur mit den angewendeten Änderungen zurückgegeben wird.
Es kann helfen zu sehen, was diese Unterscheidung in einer theoretischen Programmiersprache aussehen würde.<span>// transient list </span>a <span>= [1, 2, 3]; </span>b <span>= a.push(4); </span><span>// a = [1, 2, 3, 4] </span><span>// b = [1, 2, 3, 4] </span> <span>// persistent list </span>c <span>= #[1, 2, 3] </span>d <span>= c.push(4); </span><span>// c = #[1, 2, 3] </span><span>// d = #[1, 2, 3, 4] </span>
Wir können sehen, dass die Transientenliste mutiert war, als wir einen Wert darauf drückten. Sowohl A als auch B weisen auf denselben veränderlichen Wert hin. Im Gegensatz dazu gab der Aufruf auf die persistente Liste einen neuen Wert zurück, und wir können sehen, dass C und D auf unterschiedliche diskrete Listen hinweisen.
Diese anhaltenden Datenstrukturen können nicht mutiert werden, was bedeutet, dass wir, sobald wir einen Bezug auf einen Wert haben, auch die Garantie haben, dass sie nie geändert werden. Diese Garantien helfen uns im Allgemeinen, sichereren und einfacheren Code zu schreiben. Beispielsweise kann eine Funktion, die anhaltende Datenstrukturen als Argumente einnimmt, nicht mutieren. Wenn die Funktion daher eine sinnvolle Änderung mitteilen will, muss sie aus dem Rückgabewert stammen. Dies führt zum Schreiben von referentiell transparenten, reinen Funktionen, die leichter zu testen und optimieren zu können.
einfacher, unveränderliche Daten zwingen uns, mehr funktionale Code zu schreiben.
Mori verwendet den ClojureScript -Compiler, um die Implementierungen für die Datenstrukturen in der Standardbibliothek von Clojure zu JavaScript zu kompilieren. Der Compiler gibt einen optimierten Code aus, was bedeutet, dass es ohne zusätzliche Überlegung nicht einfach mit kompiliertem Clojure aus JavaScript kommunizieren kann. Mori ist die Schicht zusätzlicher Überlegungen.
Genau wie bei Clojure sind die Funktionen von Mori von den von ihnen betriebenen Datenstrukturen getrennt, was sich mit den objektorientierten Tendenzen von JavaScript gegenüberstellt. Wir werden feststellen, dass dieser Unterschied die Richtung ändert, die wir Code schreiben.
<span>// standard library </span><span>Array(1, 2, 3).map(x => x * 2); </span><span>// => [2, 4, 6] </span> <span>// mori </span><span>map(x => x * 2, vector(1, 2, 3)) </span><span>// => [2, 4, 6] </span>
MORI verwendet auch die strukturelle Freigabe, um effiziente Änderungen der Daten vorzunehmen, indem die ursprüngliche Struktur so viel wie möglich geteilt wird. Dies ermöglicht es anhaltende Datenstrukturen, nahezu effizient zu sein wie regelmäßige transiente. Die Implementierungen für diese Konzepte werden in diesem Video viel detaillierter behandelt.
Stellen wir uns vor, wir versuchen, einen Fehler in einer von uns geerbten JavaScript -Codebasis aufzuspüren. Wir lesen den Code vor, um herauszufinden, warum wir den falschen Wert für die Gemeinschaft haben.
<span>const fellowship = [
</span> <span>{
</span> <span>title: 'Mori',
</span> <span>race: 'Hobbit'
</span> <span>},
</span> <span>{
</span> <span>title: 'Poppin',
</span> <span>race: 'Hobbit'
</span> <span>}
</span><span>];
</span>
<span>deletePerson(fellowship, 1);
</span><span>console.log(fellowship);
</span>Was ist der Wert des Gemeinschafts, wenn es an der Konsole angemeldet ist?
Ohne den Code auszuführen oder die Definition für DeletePerson () zu lesen, gibt es keine Möglichkeit zu wissen. Es könnte ein leeres Array sein. Es könnte drei neue Eigenschaften haben. Wir würden hoffen, dass es sich um ein Array mit dem zweiten Element entfernt handelt, aber weil wir in einer veränderlichen Datenstruktur bestanden haben, gibt es keine Garantien.
noch schlimmer, die Funktion könnte in Zukunft eine Referenz halten und sie asynchron mutieren. Alle Verweise auf Stipendien von hier aus werden mit einem unvorhersehbaren Wert arbeiten.
Vergleichen Sie dies mit einer Alternative mit Mori.
<span>// transient list </span>a <span>= [1, 2, 3]; </span>b <span>= a.push(4); </span><span>// a = [1, 2, 3, 4] </span><span>// b = [1, 2, 3, 4] </span> <span>// persistent list </span>c <span>= #[1, 2, 3] </span>d <span>= c.push(4); </span><span>// c = #[1, 2, 3] </span><span>// d = #[1, 2, 3, 4] </span>
Unabhängig von der Implementierung von DeletePerson () wissen wir, dass der ursprüngliche Vektor protokolliert wird, einfach weil es eine Garantie gibt, dass er nicht mutiert werden kann. Wenn wir möchten, dass die Funktion nützlich ist, sollte sie einen neuen Vektor mit dem angegebenen Element zurückgeben.
Fluss durch Funktionen verstehen, die an unveränderlichen Daten arbeiten, ist einfach, da wir wissen, dass ihr einziger Effekt darin besteht
Einfacher, unveränderliche Daten erzwingen eine Kultur der Vorhersehbarkeit.
in der Praxis
Setup & Utilities
Lassen Sie uns die Funktionen zerstören, die wir vom Mori -Namespace benötigen.<span>// standard library </span><span>Array(1, 2, 3).map(x => x * 2); </span><span>// => [2, 4, 6] </span> <span>// mori </span><span>map(x => x * 2, vector(1, 2, 3)) </span><span>// => [2, 4, 6] </span>
Das erste, was wir tun werden, ist, eine Helferfunktion für die Anzeige unserer anhaltenden Datenstrukturen einzurichten. Die interne Darstellung von Mori macht in einer Konsole keinen großen Sinn, daher werden wir die Funktion tojs () verwenden, um sie in ein verständliches Format umzuwandeln.
<span>const fellowship = [
</span> <span>{
</span> <span>title: 'Mori',
</span> <span>race: 'Hobbit'
</span> <span>},
</span> <span>{
</span> <span>title: 'Poppin',
</span> <span>race: 'Hobbit'
</span> <span>}
</span><span>];
</span>
<span>deletePerson(fellowship, 1);
</span><span>console.log(fellowship);
</span>Wir können diese Funktion als Alternative zu Console.log () verwenden, wenn wir die Datenstrukturen von Mori inspizieren müssen.
Als nächstes setzen wir einige Konfigurationswerte und eine Nutzfunktion ein.
<span>import <span>{ vector, hashMap }</span> from 'mori';
</span>
<span>const fellowship = vector(
</span> <span>hashMap(
</span> <span>"name", "Mori",
</span> <span>"race", "Hobbit"
</span> <span>),
</span> <span>hashMap(
</span> <span>"name", "Poppin",
</span> <span>"race", "Hobbit"
</span> <span>)
</span><span>)
</span>
<span>const newFellowship = deletePerson(fellowship, 1);
</span><span>console.log(fellowship);
</span>Hoffentlich haben Sie festgestellt, dass unsere Funktion unserer to2d () einen Vektor zurückgibt. Die Vektoren sind ein bisschen wie JavaScript -Arrays und unterstützen einen effizienten Zufallszugriff.
Daten strukturieren
<span><span><span><div</span>></span> </span> <span><span><span><h3</span>></span>Mori Painter<span><span></h3</span>></span> </span><span><span><span></div</span>></span> </span><span><span><span><div</span> id<span>="container"</span>></span> </span> <span><span><span><canvas</span> id<span>='canvas'</span>></span><span><span></canvas</span>></span> </span><span><span><span></div</span>></span> </span><span><span><span><div</span>></span> </span> <span><span><span><button</span> id<span>='undo'</span>></span>↶<span><span></button</span>></span> </span><span><span><span></div</span>></span> </span>
Wir werden unsere TO2D () -Funktion verwenden, um eine Abfolge von Koordinaten zu erstellen, die alle Pixel auf der Leinwand darstellt.
Es könnte helfen, die Struktur von Koordeln zu visualisieren.
<span>const {
</span> list<span>, vector, peek, pop, conj, map, assoc, zipmap,
</span> range<span>, repeat, each, count, intoArray, toJs
</span><span>} = mori;
</span>Es ist eine eindimensionale Sequenz von Koordinatenvektoren.
Neben jeder Koordinate möchten wir auch einen Farbwert speichern.
<span>const log = (<span>...args</span>) => {
</span> <span>console.log(...args.map(toJs))
</span><span>};
</span><span>// transient list </span>a <span>= [1, 2, 3]; </span>b <span>= a.push(4); </span><span>// a = [1, 2, 3, 4] </span><span>// b = [1, 2, 3, 4] </span> <span>// persistent list </span>c <span>= #[1, 2, 3] </span>d <span>= c.push(4); </span><span>// c = #[1, 2, 3] </span><span>// d = #[1, 2, 3, 4] </span>
Wir verwenden die Funktion prepe (), um eine unendliche Sequenz von '#FFF' Zeichenfolgen zu erstellen. Wir müssen uns keine Sorgen darüber machen, dass dieses Ausfüllen von Speicher und unser Browser abstürzt, da die Mori -Sequenzen Lazy Evaluation unterstützen. Wir werden nur die Werte der Elemente in der Sequenz berechnen, wenn wir später nach ihnen fragen.
Schließlich möchten wir unsere Koordinaten mit unseren Farben in Form einer Hash -Karte kombinieren.
<span>// standard library </span><span>Array(1, 2, 3).map(x => x * 2); </span><span>// => [2, 4, 6] </span> <span>// mori </span><span>map(x => x * 2, vector(1, 2, 3)) </span><span>// => [2, 4, 6] </span>
Wir verwenden die Funktion ZIPMAP (), um eine Hash -Karte mit den Koordeln als Schlüssel und den Farben als Werte zu erstellen. Auch hier könnte es helfen, die Struktur unserer Daten zu visualisieren.
<span>const fellowship = [
</span> <span>{
</span> <span>title: 'Mori',
</span> <span>race: 'Hobbit'
</span> <span>},
</span> <span>{
</span> <span>title: 'Poppin',
</span> <span>race: 'Hobbit'
</span> <span>}
</span><span>];
</span>
<span>deletePerson(fellowship, 1);
</span><span>console.log(fellowship);
</span>Im Gegensatz zu den Objekten von JavaScript können die Hash -Karten von Mori alle Arten von Daten als Schlüssel annehmen.
Um die Farbe von Pixel zu ändern, werden wir eine der Koordinaten in unserer Hash -Karte mit einer neuen Zeichenfolge verknüpfen. Schreiben wir eine reine Funktion, die ein einzelnes Pixel färbt.
<span>import <span>{ vector, hashMap }</span> from 'mori';
</span>
<span>const fellowship = vector(
</span> <span>hashMap(
</span> <span>"name", "Mori",
</span> <span>"race", "Hobbit"
</span> <span>),
</span> <span>hashMap(
</span> <span>"name", "Poppin",
</span> <span>"race", "Hobbit"
</span> <span>)
</span><span>)
</span>
<span>const newFellowship = deletePerson(fellowship, 1);
</span><span>console.log(fellowship);
</span>Wir verwenden die X- und Y -Koordinaten, um einen Koordinatenvektor zu erstellen, den wir als Schlüssel verwenden können, und dann verwenden wir Assoc (), um diesen Schlüssel mit einer neuen Farbe zu assoziieren. Denken Sie daran, dass die Funktion assoc (), weil die Datenstruktur anhaltend ist, eine neue Hash -Karte zurückgibt, anstatt die alte zu mutieren.
Jetzt haben wir alles, was wir brauchen, um ein einfaches Bild auf eine Leinwand zu zeichnen. Erstellen wir eine Funktion, die eine Hash -Karte mit Koordinaten gegen Pixel übernimmt und sie auf eine RenderingContext2D.
zieht<span><span><span><div</span>></span> </span> <span><span><span><h3</span>></span>Mori Painter<span><span></h3</span>></span> </span><span><span><span></div</span>></span> </span><span><span><span><div</span> id<span>="container"</span>></span> </span> <span><span><span><canvas</span> id<span>='canvas'</span>></span><span><span></canvas</span>></span> </span><span><span><span></div</span>></span> </span><span><span><span><div</span>></span> </span> <span><span><span><button</span> id<span>='undo'</span>></span>↶<span><span></button</span>></span> </span><span><span><span></div</span>></span> </span>
Nehmen wir uns eine Minute Zeit, um zu verstehen, was hier vor sich geht.
Wir verwenden jeweils (), um über unsere Pixel -Hash -Karte zu iterieren. Es gibt jeden Schlüssel und jeden Wert (zusammen als Sequenz) in die Rückruffunktion als p übergeben. Dann verwenden wir die In -arrray () -Funktion, um sie in Arrays umzuwandeln, die zerstört werden können, damit wir die gewünschten Werte auswählen können.
<span>const {
</span> list<span>, vector, peek, pop, conj, map, assoc, zipmap,
</span> range<span>, repeat, each, count, intoArray, toJs
</span><span>} = mori;
</span>Schließlich verwenden wir Canvas -Methoden, um ein farbiges Rechteck auf den Kontext selbst zu zeichnen.
<span>const log = (<span>...args</span>) => {
</span> <span>console.log(...args.map(toJs))
</span><span>};
</span>Jetzt müssen wir ein bisschen Sanitär machen, um all diese Teile zusammenzubringen und zu arbeiten.
<span>// the dimensions of the canvas </span><span>const [height, width] = [20, 20]; </span> <span>// the size of each canvas pixel </span><span>const pixelSize = 10; </span> <span>// converts an integer to a 2d coordinate vector </span><span>const to2D = (i) => vector( </span> i <span>% width, </span> <span>Math.floor(i / width) </span><span>); </span>
Wir werden die Leinwand ergreifen und sie verwenden, um einen Kontext für das Rendern unseres Bildes zu erstellen. Wir werden auch das IT angemessen ändern, um unsere Dimensionen widerzuspiegeln.
Schließlich werden wir unseren Kontext mit unseren Pixeln übergeben, die von der Lackmethode gezogen werden sollen. Mit etwas Glück sollten Ihre Leinwand als weiße Pixel rendern. Nicht die aufregendste Enthüllung, aber wir kommen näher.
wir möchten auf Klickereignisse anhören und sie verwenden, um die Farbe eines bestimmten Pixels mit unserer Draw () -Funktion von früher zu ändern.
<span>const coords = map(to2D, range(height * width)); </span>
Wir fügen einen Klick -Listener an unsere Leinwand hinzu und verwenden die Ereigniskoordinaten, um zu bestimmen, welches Pixel zu zeichnen ist. Wir verwenden diese Informationen, um eine neue Pixel -Hash -Karte mit unserer Draw () -Funktion zu erstellen. Dann malen wir das in unseren Kontext und überschreiben den letzten Rahmen, den wir gezeichnet haben.
Zu diesem Zeitpunkt können wir schwarze Pixel in die Leinwand zeichnen und jeder Rahmen basiert auf dem vorherigen, wodurch ein zusammengesetztes Bild erstellt wird.
Um rückgängig zu machen, möchten wir jede historische Überarbeitung auf die Pixel -Hash -Karte speichern, damit wir sie in Zukunft erneut abrufen können.
<span>// transient list </span>a <span>= [1, 2, 3]; </span>b <span>= a.push(4); </span><span>// a = [1, 2, 3, 4] </span><span>// b = [1, 2, 3, 4] </span> <span>// persistent list </span>c <span>= #[1, 2, 3] </span>d <span>= c.push(4); </span><span>// c = #[1, 2, 3] </span><span>// d = #[1, 2, 3, 4] </span>
Wir verwenden eine Liste, um die verschiedenen "Frames" zu speichern, die wir gezeichnet haben. Listet die Unterstützung der effizienten Ergänzung am Kopf und O (1) auf, um das erste Element zu suchen, was sie ideal für die Darstellung von Stapeln macht.
Wir müssen unseren Klick -Listener so ändern, dass er mit unserem Frame -Stapel funktioniert.
<span>// standard library </span><span>Array(1, 2, 3).map(x => x * 2); </span><span>// => [2, 4, 6] </span> <span>// mori </span><span>map(x => x * 2, vector(1, 2, 3)) </span><span>// => [2, 4, 6] </span>
Wir verwenden die Funktion peek (), um den Rahmen oben am Stapel zu erhalten. Anschließend erstellen wir es, um einen neuen Frame mit der Draw () -Funktion zu erstellen. Schließlich verwenden wir conj (), um den neuen Rahmen auf dem Rahmenstapel zu konsumieren.
Obwohl wir den lokalen Zustand ändern (Frame = cong (Frames, Newframe)), mutieren wir keine Daten.Änderungen
<span>const fellowship = [
</span> <span>{
</span> <span>title: 'Mori',
</span> <span>race: 'Hobbit'
</span> <span>},
</span> <span>{
</span> <span>title: 'Poppin',
</span> <span>race: 'Hobbit'
</span> <span>}
</span><span>];
</span>
<span>deletePerson(fellowship, 1);
</span><span>console.log(fellowship);
</span>Schließlich übergeben wir den oberen Rahmen auf dem neuen Stapel an unsere Faint () -Funktion, um die Änderungen widerzuspiegeln. Zu diesem Zeitpunkt sollten Sie in der Lage sein, Änderungen an der Leinwand zu zeichnen und rückgängig zu machen.
Demo
Siehe die Pen Mori -Pixel von sitepoint (@sitepoint) auf CodePen.
Erweiterungen
Wir haben kaum die Oberfläche dessen kratzt, was möglich ist, aber hoffentlich werden Sie genug gesehen haben, um die Bedeutung von anhaltenden Daten mit einer leistungsstarken Reihe einfacher Funktionen zu bewerten.
Was ist der Unterschied zwischen veränderlichen und unveränderlichen Datenstrukturen? nach dem Erstellen geändert werden. Andererseits können unveränderliche Datenstrukturen nach dem Erstellen nicht geändert werden. Jeder Betrieb einer unveränderlichen Datenstruktur führt zu einer neuen Datenstruktur. Mit diesen Dienstprogrammen können Sie verschiedene Vorgänge wie MAP, Reduzierung, Filter usw. auf Datenstrukturen ausführen, ohne die Originaldaten zu ändern.
Wie kann ich Mori in meinen JavaScript -Projekten verwenden? müssen die Mori -Bibliothek in Ihr Projekt einbeziehen. Sie können dies tun, indem Sie es über NPM installieren oder direkt in Ihre HTML -Datei einbeziehen. Sobald die Bibliothek enthalten ist, können Sie die Funktionen und Datenstrukturen von MORI in Ihrem Code verwenden.
Das obige ist der detaillierte Inhalt vonUnveränderliche Daten und funktionales JavaScript mit Mori. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Kann ich ein gelöschtes Douyin-Kurzvideo wiederherstellen?
Was soll ich tun, wenn Chaturbate hängen bleibt?
Einführung in die Verwendung von Rowid in Oracle
Server-Evaluierungssoftware
mstsc-Remoteverbindung fehlgeschlagen
Welche Methoden gibt es zum Erstellen einer mobilen Website?
So erhalten Sie die aktuelle Uhrzeit in JAVA
Was tun, wenn die Speichernutzung zu hoch ist?
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
