Læring Gutenberg: Moderne JavaScript Syntaks

0
24

En av de viktigste endringene som Gutenberg bringer til WordPress økosystem er en tung stoler på JavaScript. Hjelpsomt, WordPress team har presset sine JavaScript-rammeverk i dag og i fremtiden, ved å utnytte moderne JavaScript stabel, som er vanligvis referert til som ES6 i samfunnet. Det er hvordan vi vil referere til det som i denne serien også, for å unngå forvirring.

La oss grave i dette ES6 verden litt, så er det til syvende og sist kommer til å hjelpe oss med å forstå hvordan man skal strukturere og bygge opp en tilpasset Gutenberg-blokk.

Artikkel-Serien:

  1. – Serien Introduksjon
  2. Hva er Gutenberg, Likevel?
  3. En Primer med create-guten-blokk
  4. Moderne JavaScript Syntaks (Dette Innlegget)
  5. Reagerer 101
  6. Sette opp en Tilpasset webpack (Kommer Snart!)
  7. En Tilpasset “Kort” Blokk (Kommer Snart!)

Hva er ES6?

ES6 er en forkortelse for “EcmaScript 6” som er den 6. utgaven av EcmaScript. Det offisielle navnet er ES2015, som du har kanskje også sett rundt. EcmaScript har siden gått gjennom mange iterasjoner, men moderne JavaScript er fortsatt ofte referert til som ES6. Som du sikkert gjettet, iterasjoner har fortsatt ES2016, ES2017 og så på. Jeg har faktisk spurt et spørsmål på ShopTalk vis om hva vi kunne navnet moderne JavaScript, som jeg konklusjonen var… ES6.

Jeg kommer til å kjøre gjennom noen viktige funksjoner i ES6 som er nyttige i forbindelse med Gutenberg.

Funksjoner

Funksjoner få en pokker for en oppdatering med ES6. To endringer jeg ønsker å fokusere på Pil Funksjoner og Klasse Metoder.

Inne i en klasse du egentlig ikke trenger å skrive ordet funksjon lenger i ES6. Dette kan være forvirrende, så sjekk ut dette eksempelet:

class Foo {
// Dette er din ‘bar’ – funksjonen
bar() {
return “hei”;
}
}

Du vil påberope bar() som dette:

const fooInstance = nye Foo();
const hi = fooInstance.bar();

Dette er vanlig i landet moderne JavaScript, så det er godt å klare det opp.

Moro faktum! ES6 Klasser i JavaScript ikke er virkelig “klasser” i et objekt-orientert programmering forstand—under panseret, det er den samme gamle prototypical arv JavaScript har alltid hatt. Før ES6, bar () – metoden ville være definert som så: Foo.prototypen.bar = function() { … }. Reagerer gjør stor bruk av ES6 klasser, men det er verdt å merke seg at ES6 klasser er i hovedsak syntaktisk sukker og omstridd av noen. Hvis du er interessert i mer detaljer, kassa MDN-dokumenter og denne artikkelen på 2ality.

Høyre, la oss gå videre til pil-funksjoner. 🚀

En pil funksjon gir oss en kompakt syntaks som er ofte brukt som en one-liner for uttrykk. Det er også brukt til å opprettholde verdien av denne, som et pil-funksjonen vil ikke rebind dette som setInterval eller en event handler vanligvis ville gjøre.

Et eksempel på en pil funksjon som et uttrykk er som følger:

// Definerer en rekke frukt objekter
const frukt = [
{
name: ‘Eple’,
farge: ‘rød’
},
{
name: ‘Banan’,
farge: ‘gul’
},
{
name: ‘Pære’,
farge: ‘grønn’
}
];

// Velger kun rød frukt fra denne samlingen
const redFruit = frukt.filteret(fruitItem => fruitItem.color === ‘red’);

// Utgang bør være noe som Objekt { name: “Apple”, farge: rød” }
– konsollen.logg(redFruit[0]);

Som du kan se ovenfor, fordi det var et enkelt parameter, og funksjonen ble brukt som et uttrykk, kan vi skjule braketter og parentes. Dette gir oss muligheten til å virkelig kompakt våre etiske og forbedre lesbarheten.

La oss ta en titt på hvordan vi kan bruke en pil fungere som en event handler i vår Foo klasse fra før:

class Foo {

// Dette er din ‘bar’ – funksjonen
bar() {
la buttonInstance = – dokument.querySelector(‘knappen’);

buttonInstance.addEventListener(‘click’, evt => {
– konsollen.logg(this);
});
}
}

// Kjør behandleren
const fooInstance = nye Foo();
fooInstance.bar();

Når knappen klikkes, output skal være Foo { }, fordi dette er forekomsten av Foo. Hvis vi skulle sett at eksempel med følgende:

class Foo {

// Dette er din ‘bar’ – funksjonen
bar() {
la buttonInstance = – dokument.querySelector(‘knappen’);

buttonInstance.addEventListener(‘click’, function(evt) {
– konsollen.logg(this);
});
}
}

// Kjør behandleren
const fooInstance = nye Foo();
fooInstance.bar();

Når knappen klikkes, utgang ville være < – knappen> fordi funksjonen har bundet dette for å være på < – knappen> som ble klikket på.

Du kan lese mer om pil-funksjoner med Wes Bim, som skrev en utmerket artikkel om dem.

const, la, og var

Du har kanskje lagt merke til at jeg har brukt const og la i eksemplene ovenfor. Disse er også en del av ES6 og jeg vil raskt forklare hva hver og en gjør det.

Hvis en verdi er helt konstant og vil ikke endres gjennom re-oppgaven, eller, som kan være re-deklarert, kan du bruke en const. Dette vil vanligvis brukes når du importerer noe eller erklære ikke-endre egenskaper som en samling av DOM-elementer.

Hvis du har en variabel som du ønsker å bare være tilgjengelig i blokk det ble definert i, og deretter bruke en la. Dette kan være forvirrende å forstå, så sjekk ut denne lille eksempel:

funksjonen foo() {
hvis (1 < 2) {
la bar = ‘alltid sant’;

// Utganger: ‘alltid sant’
– konsollen.logg(bar);
}

// Utganger “ReferenceError: linjen er ikke definert’
– konsollen.logg(bar);
}

// Kjør-funksjon, slik at vi kan se loggene våre
foo();

Dette er en flott måte å holde kontroll over variabler og gjøre dem disponibel, i en viss forstand.

Til slutt var det samme gamle venn vi kjenner og elsker så godt. Dessverre, mellom const og la vår venn blir mer og mer overflødig ettersom tiden går. Ved hjelp av variablen er helt akseptabelt skjønt, så ikke bli motløs—du bare ikke se det mye i resten av denne veiledningen!

Destructuring oppdrag

Destructuring tillater deg å pakke objekt tastene på det punktet der du tilordne dem til din lokale variable. Så sier du har fått dette objektet:

const foo = {
folk: [
{
name: ‘Bar’,
alder: 30
},
{
name: ‘…’,
alder: 28
}
],
anotherKey: ‘noen ting’,
heyAFunction() {
tilbake ‘Vannmeloner er virkelig forfriskende i sommer”
}
};

Tradisjonelt, du vil trekke folk med foo.personer. Med destructuring, kan du gjøre dette:

la { folk } = foo;

Som trekker folk array ut av foo objekt, så vi kan dumpe den foo. prefiks og bruker det som det er: mennesker. Det betyr også at anotherKey og heyAFunction er ignorert, fordi vi ikke trenger dem akkurat nå. Dette er flott når du arbeider med store komplekse objekter der å være i stand til å plukke ting ut er virkelig nyttig.

Du kan også gjøre bruk av destructuring å bryte opp et objekt i lokale variabler for å øke koden lettere å lese. La oss oppdatere ovenfor utdrag:

la { folk } = foo;
la { heyAFunction } = foo;

Nå har vi to separate elementer fra samme objekt, samtidig som de ignorerer anotherKey. Hvis du kjørte konsollen.logg(mennesker), det vil vise seg en matrise og hvis du kjørte konsollen.logg(heyAFunction), du gjettet det, det vil vise seg som en funksjon.

JSX

Vanligvis funnet i Reagerer JS sammenhenger: JSX er en XML-som forlengelse til at JavaScript er designet for å være utarbeidet av preprocessors i normal JavaScript-kode. I hovedsak, det gjør oss i stand til å skrive HTML(ish) kode i JavaScript, så lenge vi forbehandling det. Det er vanligvis forbundet med en ramme som Reagerer JS, men det er også brukt til Gutenberg-blokk utvikling.

La oss kick off med et eksempel:

const hei = <h1 className=”overskrift”>Hei, Pal</h1>;

Ganske kult, ikke sant? Ingen templating-systemet eller rømmer eller slå sammen som kreves. Så lenge du går tilbake ett element, som kan ha mange barn, du er alt bra. Så la oss vise noe en touch mer komplekse, med et Reagere gjengi funksjon:

klasse MyComponent strekker seg til å Reagere.Komponent {
/* Andre deler bearbeidet for kortfattethet */

render() {
retur (
<artikkel>
<h2 className=”overskrift”>{ dette.rekvisitter.overskriften }</h2>
<p className=”bly”>{ dette.rekvisitter.oppsummering }</p>
</article>
);
}
};

Du kan se ovenfor at vi kan slippe uttrykk i hvor vi vil. Dette er også tilfelle med element attributter, slik at vi kan ha noe sånt som dette:

<h2 className={ dette.rekvisitter.headingClass }>
{ dette.rekvisitter.overskriften }
</h2>

Du tenker kanskje, “Hva er disse tilfeldige bukseseler å gjøre?”

Svaret er at dette er et uttrykk som du vil se massevis av i JSX. I hovedsak, det er en liten inline kjøring av JavaScript som oppfører seg svært mye som en PHP echo gjør.

Du vil også sannsynligvis legge merke til at det står className i stedet for klassen. Selv om det ser ut som HTML/XML, er det fortsatt JavaScript, så reserverte ordene naturlig unngås. Attributter er kamel-cased også, så holde og øye for det. Her er en nyttig svar på hvorfor det er sånn.

JSX er veldig kraftig som du vil se mens denne serien utvikler seg. Det er et flott verktøy i vår stabel og veldig nyttig for å forstå generelt.

Jeg liker å tenke på JSX som gjorde opp-tag-navn som er faktisk bare funksjonskall. Plukke ut noen av de gjort opp kodene du se i Gutenberg, la oss bruke <InspectorControls /> for eksempel, og ikke en “Finne i Mappen” for klasse InspectorControls og du vil se noe som er strukturert som Andy eksempel her! Hvis du ikke finner det, så JSX må være registrert som funksjonell komponent, og bør slå opp ved å søke etter funksjonen InspectorControls.

Innpakning opp

Vi har hatt en rask kjøre gjennom noen av de nyttige funksjoner av ES6. Det er massevis mer å lære, men jeg ønsket å fokusere oppmerksomheten din på ting som vi vil bruke i denne opplæringen serien. Jeg vil sterkt anbefale videre læring med Wes Bim’ kurs, JavaScript 30 og ES6.io.

Neste opp, vi kommer til å bygge en mini Reagere komponent!

Artikkel-Serien:

  1. – Serien Introduksjon
  2. Hva er Gutenberg, Likevel?
  3. En Primer med create-guten-blokk
  4. Moderne JavaScript Syntaks (Dette Innlegget)
  5. Reagerer 101
  6. Sette opp en Tilpasset webpack (Kommer Snart!)
  7. En Tilpasset “Kort” Blokk (Kommer Snart!)