5 JavaScript-Funktionen, die Sie kennen müssen, um in Gutenberg zu entwickeln

2016 sagte uns Matt Mullenweg:

Ich gebe Ihnen einige Hausaufgaben: Lernen Sie JavaScript umfassend (…), denn es ist die Zukunft des Webs.

Matt Mullenweg (auf YouTube)

Ich weiß nicht, ob Sie vor drei Jahren seinem Rat gefolgt sind, aber wenn Sie es nicht getan haben, können Sie es nicht mehr verschieben. Die offizielle Veröffentlichung des Blockeditors hat viele Entwickler gezwungen, sich mit JavaScript vertraut zu machen. Die Sprache wird innerhalb von WordPress immer relevanter und wenn wir nicht zurückbleiben wollen, müssen wir unsere Fähigkeiten damit verbessern.

In der Vergangenheit habe ich einen Beitrag darüber geschrieben, was Sie mit Vanilla JavaScript erreichen können, ohne Bibliotheken wie jQuery. Heute möchte ich einen Schritt weiter gehen und einige der Neuerungen erklären, die in den neuen Versionen von JavaScript enthalten sind und die beim ersten Anblick schockierend sind. Ich denke, es ist wichtig, dass Sie sie kennen, weil sie in allen neuen JavaScript-Projekten (einschließlich Gutenberg natürlich) vorhanden sind.

Lernen wir JavaScript mit Gutenberg!

#1 – Destrukturieren von Objekten und Arrays

Angenommen, wir möchten sehen, wie die Oberfläche zum Bearbeiten eines Absatzes in Gutenberg funktioniert. Wenn Sie unsere vorherigen Beiträge zu Gutenberg gelesen haben, wissen Sie, dass wir uns die edit des relevanten Blocks ansehen müssen. In unserem Fall ist diese Komponente ParagraphBlock und das erste, was wir in ihrer Render-Methode, Zeile 127, finden werden, ist Folgendes:

Was ist das alles? Nun, fangen wir mit etwas Einfacherem an. Stellen Sie sich vor, Sie haben ein Objekt wie das folgende:

Das Destrukturieren von Objekten und Arrays ermöglicht es, Werte aus Arrays oder Eigenschaften von Objekten in verschiedene Variablen zu entpacken:

Mit einer einzigen Anweisung konnten wir die id , den title und den content unseres post wiederherstellen. Und genau das hat Gutenberg in unserem ersten Snippet getan: Wir haben das attributes -Objekt, die setAttributes Funktion, das isRTL Attribut usw. von this.props .

Etwas verwirrender, aber ebenso interessant, ist die Möglichkeit, Attribute aus verschachtelten Objekten zu extrahieren. Das heißt, ausgehend von einem Objekt, so dass:

Wir können sowohl Werte in post als auch Werte in einem verschachtelten Objekt abrufen, z. B. id oder name in author :

Passen Sie jetzt auf: Jedes Mal, wenn wir ein Objekt destrukturieren, haben die von uns erstellten Variablen dieselben Namen wie die Attribute, die wir abrufen. Dies wirft die Frage auf: Was würde passieren, wenn wir mehrere id Attribute aus verschiedenen verschachtelten Objekten wiederherstellen möchten? In unserem Fall haben beispielsweise sowohl der post als auch sein verschachteltes Objekt author eine id , also …

können wir diese beiden Werte herausziehen? Die Lösung liegt in Aliasen:

Das heißt, wir können das Attribut, das wir abrufen möchten (z. B. author.id ), und den Namen der Variablen, die ihren Wert enthält ( authorId ), gleichzeitig angeben.

Lassen Sie mich abschließend sagen, dass die Destrukturierung auch mit Arrays funktioniert:

sowie Funktionsparameter. Das heißt, wenn einer der Parameter in unserer Funktion ein Objekt ist, können wir es in der Funktionsdefinition selbst destrukturieren:

Ziemlich praktisch, oder?

#2 – Pfeilfunktionen

Ein weiteres ziemlich häufiges Beispiel. Wenn Sie sich die Bildunterschriften der Gutenberg-Bildblöcke ansehen, sehen Sie in Zeile 693 Folgendes:

Was ist der value in Klammern? Warum ist da ein Pfeil? Was hat es mit setAttributes mit geschweiften Klammern auf sich? Arg!!

Nun, lassen Sie uns das Schritt für Schritt entschlüsseln. Wenn Sie einen Pfeil wie => sehen, haben Sie gerade eine Pfeilfunktion getroffen. Eine Pfeilfunktion kann klassischen Funktionen sehr ähnlich sein, sie verwenden jedoch eine etwas andere Syntax:

Der Hauptvorteil von Pfeilfunktionen besteht darin, dass sie weiter vereinfacht werden können, wodurch der Code noch kompakter wird. Wenn Ihre Funktion beispielsweise eine einzelne Anweisung hat, können Sie sich die geschweiften Klammern und das Schlüsselwort return sparen, da die Funktion automatisch das Ergebnis der Auswertung ihrer einzigen Anweisung zurückgibt:

Eine weitere Vereinfachung, die wir vornehmen können, sind die Klammern in der Argumentliste. Wenn wir eine Funktion mit einem einzigen Parameter schreiben, werden die Klammern optional:

#3 – Spread- und Rest-Operatoren

Zurück zum Absatzblock, sehen Sie sich Zeile 64 an:

Was zum Teufel?

Lassen Sie mich Ihnen den Spread-Operator vorstellen: ... .

Die Spread-Syntax ermöglicht die Erweiterung eines Iterables wie eines Array-Ausdrucks oder einer Zeichenfolge an Stellen, an denen null oder mehr Argumente (für Funktionsaufrufe) oder Elemente (für Array-Literale) erwartet werden, oder die Erweiterung eines Objektausdrucks an Stellen, an denen null oder mehr vorhanden sind Schlüssel-Wert-Paare (für Objektliterale) werden erwartet.

Beginnen wir mit dem einfachsten Beispiel. Angenommen, wir haben ein Array mit einer bestimmten Anzahl von Elementen und möchten es in ein anderes Array einfügen. Dies können wir erreichen mit:

Damit „erweitern“ wir (daher der Name des Operators) die Elemente eines Arrays ( list ) innerhalb des anderen ( result ).

Das funktioniert auch mit Objekten:

Sehen Sie sich nun das folgende Beispiel an (das eine Kopie des Gutenberg-Beispiels ist, mit dem wir diesen Abschnitt eröffnet haben):

Wenn ich zwei Objekte erweitere, die gemeinsame Eigenschaften haben, enthält das resultierende Objekt die Vereinigung der Eigenschaften beider Objekte und für jede „wiederholte“ Eigenschaft den Wert des Objekts auf der rechten Seite. So enthält beispielsweise das title , das in beiden Objekten wiederholt wird, den Wert des Objekts newAttributes , während die anderen Attribute ( einerseits author und andererseits words ) im Ergebnis mit den einzigen Werten erscheinen, die sie enthalten könnten .

#4 – Vorlagenliterale

Vorlagenliterale werden in Gutenberg häufig verwendet. Ein Beispiel sehen Sie in der folgenden index.js , Zeile 133:

Oder, noch komplizierter, Inline 136:

Vorlagenliterale sind Zeichenfolgenliterale, die eingebettete Ausdrücke ermöglichen. Sie können mehrzeilige Strings und String-Interpolationsfunktionen mit ihnen verwenden. Sie wurden in früheren Ausgaben der ES2015-Spezifikation als „Vorlagenzeichenfolgen“ bezeichnet. Hier haben Sie ein weiteres Beispiel ähnlich dem ersten, das wir gerade gesehen haben:

Was geschah nun im zweiten Beispiel? Im Grunde erstellen wir ein Objekt mit Eigenschaften, deren „Namen“ dynamisch sind (einige verwenden eine Variable, andere verwenden Vorlagenliterale). Sehen wir uns das an einem kürzeren Beispiel an:

Einfacher als erwartet, nicht wahr?

#5 – Auf Wiedersehen für und während

Abschließend möchte ich diesen Beitrag mit ein paar Funktionen beenden, die für die Arbeit mit Arrays sehr nützlich sind und mit denen Sie bereits vertraut sein sollten. Beides findet sich beispielsweise im Block der Gutenberg-Säulen. Tatsächlich spreche ich von „ map “ (Zeile 136) und „ reduce “ (Zeile 119). Mal sehen, wofür jeder von ihnen ist und wie Sie sie verwenden können.

Die map -Methode erstellt ein neues Array mit den Ergebnissen des Aufrufs einer bereitgestellten Funktion für jedes Element im aufrufenden Array:

Im Grunde ist es eine Methode, die alle Elemente eines Arrays durchläuft (das ist die for -Anweisung) und in jedem Element eine Funktion anwendet (der „Körper“ des Klassikers for ).

Die reduce -Methode ist der map sehr ähnlich, aber statt ein Array zurückzugeben, dessen Elemente das Ergebnis der Anwendung einer Funktion auf die ursprünglichen Elemente sind, gibt sie einen einzelnen Wert zurück. Das heißt, eine Methode, mit der Sie eine Funktion auf einen Akkumulator und auf jeden Wert eines Arrays (von links nach rechts) anwenden können, um ihn auf einen einzigen Wert zu reduzieren. Zum Beispiel:

Einpacken

Wie Sie sehen können, fügen neue Versionen von JavaScript Konstruktionen hinzu, die es ermöglichen, Code effizienter und bequemer zu schreiben, aber seine Syntax kann zunächst verwirrend sein. Ich hoffe, dass Ihnen der heutige Beitrag dabei geholfen hat, die Neuerungen in JavaScript zu verstehen und die neuen Strukturen und Funktionen zu nutzen.

Mir gefällt die Art und Weise, wie sich JavaScript weiterentwickelt, da ich denke, dass es Ihnen ermöglicht, besseren und besser lesbaren Code zu schreiben (natürlich sobald Sie wissen, wie man ihn liest). Was denken Sie? Sind Sie nach dem Lesen dieses Beitrags schon scharf darauf, ein für alle Mal „JavaScript gründlich zu lernen“?

Ausgewähltes Bild von Ross Findon auf Unsplash .