Lernen Gutenberg: Moderne JavaScript-Syntax

0
21

Eine der wichtigsten änderungen, die Gutenberg-bringt Sie zu dem WordPress-ökosystem ist eine starke Abhängigkeit von JavaScript. Hilfsbereit, das WordPress-team haben wirklich schob Ihre JavaScript-framework, das in der Gegenwart und Zukunft durch die Nutzung der modernen JavaScript-stack, die gemeinhin als ES6 in der Gemeinschaft. Es ist, wie wir nennen es in dieser Serie auch, um Verwirrung zu vermeiden.

Wir untersuchen in diesem ES6 Welt ein bisschen aus, als es letztlich gehen, um uns helfen zu verstehen, wie die Struktur und erstellen eines benutzerdefinierten Gutenberg-block.

Artikel-Serie:

  1. Serie Einführung
  2. Was ist Gutenberg, Eh?
  3. Eine Grundierung mit erstellen-guten-block
  4. Moderne JavaScript-Syntax (Dieser Beitrag)
  5. Reagieren 101
  6. Einrichten einer Benutzerdefinierten webpack (Kommt Bald!)
  7. Eine Eigene “Karte” Block (Kommt Bald!)

Was ist ES6?

ES6 ist die Abkürzung für “EcmaScript 6”, das ist die 6. edition von EcmaScript. Es der offizielle name ist ES2015, das haben Sie vielleicht auch gesehen. EcmaScript hat seitdem durch viele Iterationen, aber die moderne JavaScript wird auch heute noch oft bezeichnet als ES6. Wie Sie wahrscheinlich erraten, die Iterationen fortgesetzt haben ES2016, ES2017 und so weiter. Ich fragte eine Frage nach der ShopTalk zeigen über das, was wir nennen könnten, moderne JavaScript, das ich die Schlussfolgerung war… ES6.

Ich werde führen Sie durch einige der wichtigsten features von ES6, die nützlich sind, im Rahmen von Gutenberg.

Funktionen

Funktionen erhalten ein heck von einem update mit ES6. Zwei änderungen, die ich möchte zu konzentrieren, sind die Pfeil-Funktionen und Klassenmethoden.

Innerhalb einer Klasse braucht man eigentlich nicht zu schreiben, die word-Funktion mehr in ES6. Dies kann verwirrend sein, also check out diese Beispiel:

class Foo {
// Das ist dein ‘bar’ – Funktion
bar() {
return ‘Hallo’;
}
}

Sie würde invoke bar() wie folgt:

const fooInstance = new Foo();
const Hallo = fooInstance.bar();

Dies ist an der Tagesordnung, in das land der modernen JavaScript haben, so ist es gut, um es zu deaktivieren up.

Fun fact! ES6-Klassen, die in JavaScript nicht wirklich “Klassen” in einer Objekt-orientierten Sinne—unter der Haube, es ist die gleiche alte prototypische Vererbung in JavaScript immer hatte. Vor ES6, die bar() Methode definiert werden, etwa so: Foo.der Prototyp.bar = function() { … }. Reagieren macht große Verwendung von ES6-Klassen, aber es ist erwähnenswert, dass ES6-Klassen sind im wesentlichen syntaktischen Zucker und heiß umkämpft. Wenn Sie interessiert sind, mehr details, schauen Sie sich die MDN docs und dieser Artikel auf 2ality.

Richtig, let ‘ s verschieben auf Pfeil-Funktionen. 🚀

Ein Pfeil Funktion gibt uns eine kompakte syntax, die oft als one-liner für die Ausdrücke. Es ist auch verwendet, um den Wert dieser, wie ein Pfeil Funktion nicht erneut binden, das wie die setInterval-Funktion oder einen event-handler würde in der Regel tun.

Ein Beispiel für einen Pfeil Funktion als Ausdruck lautet wie folgt:

// Definieren Sie ein array von Obst-Objekte
const Obst = [
{
name: ‘Apple’,
Farbe: ‘rot’
},
{
name: ‘Banane’,
Farbe: ‘gelb’
},
{
name: ‘Pear’,
Farbe: ‘green’
}
];

// Wählen Sie nur die rote Frucht aus dieser Sammlung
const redFruit = Frucht.filter(fruitItem => fruitItem.Farbe === ‘rot’);

// Ausgabe sollte so etwas wie Object { name: “Apple”, Farbe: “red” }
console.log(redFruit[0]);

Wie Sie oben sehen können, denn es gab einen einzigen parameter, und die Funktion, die verwendet wurde, als ein Ausdruck, können wir schwärzen die Klammern und Klammern. Dies ermöglicht uns eine wirklich kompakte unseres Codes und die Lesbarkeit zu verbessern.

Lassen Sie uns nehmen einen Blick an, wie können wir verwenden ein Pfeil-Funktion als event-handler in unserer Klasse ” Foo ” aus, bevor Sie:

class Foo {

// Das ist dein ‘bar’ – Funktion
bar() {
lassen Sie buttonInstance = document.querySelector(‘button’);

buttonInstance.addEventListener(‘click’, evt => {
console.log(this);
});
}
}

// Ausführen der handler
const fooInstance = new Foo();
fooInstance.bar();

Wenn die Schaltfläche geklickt wird, sollte die Ausgabe Foo { }, da dies die Instanz von Foo. Wenn wir waren zu ersetzen, das Beispiel mit den folgenden:

class Foo {

// Das ist dein ‘bar’ – Funktion
bar() {
lassen Sie buttonInstance = document.querySelector(‘button’);

buttonInstance.addEventListener(‘click’, function(evt) {
console.log(this);
});
}
}

// Ausführen der handler
const fooInstance = new Foo();
fooInstance.bar();

Wenn die Schaltfläche geklickt wird, wird der Ausgang sein würde <button>, da die Funktion gebunden hat, das der <button>, auf die geklickt wurde.

Sie können mehr über die Pfeil-Funktionen mit Wes Bos, schrieb einen exzellenten Artikel über Sie.

const, let und var

Sie haben vielleicht bemerkt, dass ich habe mit const und lassen Sie in den obigen Beispielen. Diese sind auch ein Teil des ES6 und ich werde kurz erklären, was jeder tut.

Wenn ein Wert ist absolut konstant und wird sich nicht ändern durch erneute Belegung oder neu-deklariert sind, verwenden Sie ein const. Dies würde Häufig verwendet werden, wenn beim importieren etwas deklarieren oder nicht-ändern von Eigenschaften wie eine Sammlung von DOM-Elementen.

Wenn Sie eine variable, die Sie wollen, um nur zugegriffen werden, die in dem block definiert wurde, verwenden Sie dann einen lassen. Dies kann verwirrend sein, zu verstehen, so überprüfen Sie heraus dieses kleine Beispiel:

function foo() {
if (1 < 2) {
let bar = ‘true’;

// Ausgabe: ‘immer wahr’
console.log(bar);
}

// Outputs “ReferenceError: bar ist nicht definiert’
console.log(bar);
}

// Ausführen der Funktion, damit wir sehen unsere Protokolle
foo();

Dies ist eine großartige Möglichkeit, um Kontrolle über Ihre Variablen und machen Sie Einweg, in einem gewissen Sinne.

Schließlich, var die gleiche alte Freund, den wir kennen und lieben, so gut. Leider, zwischen const und lassen, unser Freund wird immer mehr und mehr überflüssig wie die Zeit vergeht. Mit var ist völlig akzeptabel, obwohl, also nicht entmutigen lassen—Sie sieht es nicht viel in der rest dieses tutorial!

Destructuring assignment

Destructuring ermöglicht das extrahieren von objektschlüsseln an der Stelle, wo Sie ordnen Sie Ihre lokalen Variablen. Also, sagen wir mal, du hast dieses Objekt:

const foo = {
Personen: [
{
name: ‘Bar’,
Alter: 30
},
{
name: ‘Baz’,
Alter: 28
}
],
anotherKey: ‘einige Sachen’,
heyAFunction() {
return ‘Wassermelonen sind wirklich erfrischend im Sommer”
}
};

Traditionell, würde Sie extrahieren Menschen, die mit foo.Menschen. Mit destructuring, können Sie dies tun:

lassen Sie { Menschen } = foo;

Das zieht die Leute array aus dem das foo-Objekt, so können wir einen dump der foo. Präfix und verwenden Sie es wie es ist: Menschen. Es bedeutet auch, dass anotherKey und heyAFunction werden ignoriert, weil wir nicht brauchen Sie jetzt. Dies ist ideal, wenn Sie arbeiten mit großen, komplexen Objekten, wo in der Lage, selektiv pick Zeug wirklich nützlich ist.

Sie können auch Gebrauch machen von destructuring zu brechen, bis ein Objekt in der lokalen Variablen erhöhen die Lesbarkeit des Codes. Wir aktualisieren das obige snippet:

lassen Sie { Menschen } = foo;
lassen Sie { heyAFunction } = foo;

Jetzt haben wir die zwei separaten Elemente aus dem gleichen Objekt, während Sie noch ignorieren anotherKey. Wenn Sie lief Konsole.melden Sie(die Menschen), es würde sich zeigen ein array und wenn Sie lief Konsole.log(heyAFunction), Sie Ahnen es, es würde sich zeigen, wie eine Funktion.

JSX

Am häufigsten gefunden in Reagieren JS-Kontexte: JSX ist eine XML-extension für JavaScript, das ist so konzipiert, zusammengestellt von Präprozessoren in den normalen JavaScript-code. Im wesentlichen ermöglicht es uns die HTML zu schreiben(ish) – code in JavaScript, solange wir die Vorverarbeitung. Es ist in der Regel mit einem framework wie Reagieren JS, aber es ist auch für die Gutenberg-block-Entwicklung.

Let ‘ s kick off mit einem Beispiel:

const Hallo = <h1 className=”überschrift”>Hallo, Kumpel</h1>;

Ziemlich cool, nicht wahr? Kein Template-system oder die Flucht oder die Verkettung erforderlich. So lange, wie Sie ein einzelnes element zurückgeben, die haben viele Kinder, Sie sind alle gut. Also lasst uns etwas zeigen, einen Hauch komplexer, mit einem Reagieren render-Funktion:

class MyComponent extends Reagieren.Komponente {
/* Andere Teile unkenntlich gemacht, für die Kürze */

render() {
return (
<Artikel>
<h2 className=”heading”>{ dies.Requisiten.überschrift }</h2>
<p className=”lead”>{ dies.Requisiten.Zusammenfassung }</p>
</article>
);
}
};

Sie können oben sehen, dass wir ablegen können, Ausdrücke, wo immer wir wollen. Dies ist auch der Fall mit element-Attribute, so dass wir so etwas haben kann:

<h2 className={ das.Requisiten.headingClass }>
{ dies.Requisiten.überschrift }
</h2>

Sie werden vielleicht denken, “Was sind das für random Klammern zu tun?”

Die Antwort ist, dass dies ist ein Ausdruck, die Sie sehen werden, eine Tonne in JSX. Im wesentlichen ist es ein wenig inline-Ausführung von JavaScript, das verhält sich sehr ähnlich wie ein PHP-echo tut.

Sie werden auch wahrscheinlich feststellen, dass es sagt className anstelle von Klasse. Obwohl es sieht aus wie HTML/XML, es ist immer noch JavaScript, also reservierte Wörter natürlich vermieden werden. Attribute sind camel-cased auch so halten und Auge heraus für, die. Hier ist eine nützliche Antwort, warum es so ist.

JSX ist wirklich mächtig, wie Sie sehen werden, während dieser Serie fortschreitet. Es ist ein großartiges Werkzeug in unserem stack und wirklich nützlich zu verstehen, im Allgemeinen.

Ich denke gern an JSX als aus-tag-Namen, sind eigentlich nur die Funktion Aufrufe. Holen Sie sich jede der made-up-tags, die Sie sehen in Gutenberg, verwenden wir <InspectorControls /> zum Beispiel, und tun, ein “Suchen in Mappe” für Klasse InspectorControls und du wirst sehen, etwas strukturiert wie Andy ‘ s z.B. hier! Wenn Sie es nicht finden, dann ist das JSX muss registriert werden als funktionale Komponente, und soll sich durch die Suche-Funktion InspectorControls.

Zusammenfassung

Wir hatten ein kurzer überblick über einige der nützlichen features von ES6. Es gibt eine Tonne mehr zu lernen, aber ich wollte Ihre Aufmerksamkeit auf die Sachen, die wir in dieser tutorial-Reihe. Würde ich dringend empfehlen, Ihre weitere lernen mit Wes Bos’ Kurse, JavaScript 30 und ES6.io.

Weiter oben, wir bauen eine mini-Reagieren Komponente!

Artikel-Serie:

  1. Serie Einführung
  2. Was ist Gutenberg, Eh?
  3. Eine Grundierung mit erstellen-guten-block
  4. Moderne JavaScript-Syntax (Dieser Beitrag)
  5. Reagieren 101
  6. Einrichten einer Benutzerdefinierten webpack (Kommt Bald!)
  7. Eine Eigene “Karte” Block (Kommt Bald!)