Lärande Gutenberg: Modern JavaScript-Syntax

0
11

En av de viktigaste förändringar som Gutenberg ger till WordPress ekosystem är ett tungt beroende av JavaScript. Hjälpsamt, WordPress-teamet har verkligen drivit sin JavaScript-ramverk i nuet och framtiden genom att utnyttja modern JavaScript stack, som vanligtvis hänvisas till som ES6 i gemenskapen. Det är hur vi kommer att hänvisa till det som i den här serien också, för att undvika förvirring.

Låt oss gräva i detta ES6 världen en bit, eftersom det i slutändan kommer att hjälpa oss att förstå hur man kan strukturera och bygga upp en egen Gutenberg block.

Artikel-Serien:

  1. Serien Introduktion
  2. Vad är Gutenberg, Ändå?
  3. En Primer med skapa-guten-block
  4. Modern JavaScript-Syntax (Detta Inlägg)
  5. Reagera 101
  6. Att sätta upp en Egen webpack (Kommer Snart!)
  7. En Anpassad “Card” – Block (Kommer Snart!)

Vad är ES6?

ES6 är en förkortning för “EcmaScript 6” som är den 6: e upplagan av EcmaScript. Det officiella namnet är ES2015, som du kanske har även sett runt. EcmaScript har sedan dess gått igenom många iterationer, men modern JavaScript är fortfarande ofta kallas ES6. Som ni förmodligen gissat, det iterationer har fortsatt ES2016, ES2017 och så vidare. Jag faktiskt ställde en fråga på ShopTalk visa om vad vi skulle kunna nämna moderna JavaScript, som jag slutsatsen var… ES6.

Jag kommer att gå igenom några viktiga funktioner i ES6 som är användbara i samband med Gutenberg.

Funktioner

Funktioner få en heck av en uppdatering med ES6. Två förändringar som jag vill fokusera på är Pilen Funktioner och Metoder i Klassen.

Inuti en klass som du egentligen inte behöver för att skriva ordet funktion längre i ES6. Detta kan vara förvirrande, så kolla in detta exempel:

class Foo {
// Detta är din ‘bar’ – funktion
bar() {
return ‘hej’;
}
}

Du skulle åberopa bar (), så här:

const fooInstance = new X();
const hej = fooInstance.bar();

Detta är vanligt i landet moderna JavaScript, så det är bra att klara upp det.

Kul faktiskt! ES6 Klasser i JavaScript är inte riktigt “klasser” i en objektorienterad programmering bemärkelse—under huven, det är samma gamla prototypiska arv JavaScript har alltid haft. Innan ES6, bar () – metoden skulle kunna definieras så här: Foo.prototyp.bar = function() { … }. Reagera gör stor nytta för ES6 klasser, men det är värt att notera att ES6 klasser är i huvudsak syntaktiskt socker och hett omtvistade av vissa. Om du är intresserad av mer information, kassan MDN docs och denna artikel på 2ality.

Rätt, låt oss gå vidare till pil funktioner. 🚀

En pil funktion ger oss en kompakt syntax som används ofta som en one-liner för uttryck. Det är också används för att upprätthålla värdet av detta, som en pil funktion kommer inte att binda om detta som setInterval eller en händelsehanterare som vanligtvis skulle göra.

Ett exempel på en pil funktion som ett uttryck är följande:

// Definiera en rad av frukt objekt
const frukt = [
{
namn: “Apple”,
färg: “röd”
},
{
namn: ‘Banan’,
färg: gult
},
{
namn: ‘Päron’,
färg: “grön”
}
];

// Bara välja röd frukt från denna samling
const redFruit = frukt.filter(fruitItem => fruitItem.färg === ‘red’);

// Utgång bör vara något som Objektet { name: “Apple”, färg: “röd” }
konsolen.log(redFruit[0]);

Som du kan se ovan, eftersom det inte fanns en enda parameter och den funktion som används som ett uttryck, vi kan redigera parentes och parenteser. Detta tillåter oss att verkligen kompakt vår kod och förbättra läsbarheten.

Låt oss ta en titt på hur vi kan använda en pil fungera som en händelsehanterare i vår Foo klass från innan:

class Foo {

// Detta är din ‘bar’ – funktion
bar() {
låt buttonInstance = dokument.querySelector (“knapp”);

buttonInstance.addEventListener (“klick”, evt => {
konsolen.logga in(detta);
});
}
}

// Kör föraren
const fooInstance = new X();
fooInstance.bar();

När du klickat på knappen, och produktionen ska vara Foo { }, eftersom detta är den instans av Foo. Om vi skulle ersätta exempel med följande:

class Foo {

// Detta är din ‘bar’ – funktion
bar() {
låt buttonInstance = dokument.querySelector (“knapp”);

buttonInstance.addEventListener(‘klicka’, function(evt) {
konsolen.logga in(detta);
});
}
}

// Kör föraren
const fooInstance = new X();
fooInstance.bar();

När du klickat på knappen, produktionen skulle vara knappen <> för den funktion som har bundit det här för att vara den knappen <> som du klickade på.

Du kan läsa mer om pil funktioner med Wes Bim, som skrev en utmärkt artikel om dem.

const, låt, och var

Du kanske har märkt att jag har varit med const och låt i exemplen ovan. Detta är också en del av ES6 och jag ska snabbt förklara vad var och en gör.

Om ett värde är absolut konstant och ändras inte genom omfördelning, eller vara åter förklarade, att använda en konst. Detta skulle ofta användas vid import av något eller att förklara för icke-ändra egenskaper såsom en samling av DOM-element.

Om du har en variabel som du vill ska vara tillgängligt endast i de block den har definierats i, sedan använda en låt. Detta kan vara förvirrande att förstå, så kolla in här lite exempel:

function foo() {
om (1 < 2) {
låt bar = ‘alltid’;

/ – /Utgångar: ‘alltid’
konsolen.log(bar).
}

/ – /Utgångar ‘ReferenceError: bar är inte definierade”
konsolen.log(bar).
}

// Kör funktionen så att vi kan se våra loggar
foo();

Detta är ett bra sätt att hålla kontroll på era variabler och göra dem disponibel i en mening.

Slutligen, var är samma gamla vän, vi känner till och älskar så väl. Tyvärr, mellan konst och låt vår vän blir mer och mer överflödig eftersom tiden går. Med var är helt acceptabelt även om, så bli inte nedslagen—du kan bara inte se det mycket i resten av den här guiden!

Omstrukturering av valutan uppdrag

Omstrukturering av valutan gör att du kan extrahera objekt knapparna vid den punkt där du tilldela dem till en lokal variabel. Så, säg att du har fått det här objektet:

const foo = {
människor: [
{
namn: ‘Bar’,
ålder: 30
},
{
namn: ‘Baz’,
ålder: 28
}
],
anotherKey: “vissa saker”,
heyAFunction() {
return ‘Vattenmeloner är verkligen uppfriskande sommaren’
}
};

Traditionellt, du skulle hämta folk med foo.människor. Med omstrukturering av valutan, kan du göra detta:

låt { människor } = foo;

Som drar människor utbud av foo objekt, så vi kan dumpa foo. prefix och använda det som det är: människor. Det innebär också att anotherKey och heyAFunction ignoreras, eftersom vi inte behöver dem just nu. Detta är bra när man arbetar med stora komplicerade objekt där att kunna selektivt plocka ut saker är verkligen användbart.

Du kan också göra användning av omstrukturering av valutan för att bryta upp ett objekt i lokala variabler för att öka kodens läsbarhet. Låt oss uppdatera ovanstående utdrag:

låt { människor } = foo;
låt { heyAFunction } = foo;

Nu har vi fått de två separata delar från samma objekt, medan det fortfarande ignorerar anotherKey. Om du sprang konsolen.log(människor), skulle det visa sig en rad och om du sprang konsolen.log(heyAFunction), du gissade rätt, det skulle visa sig själv som en funktion.

JSX

Vanligast i att Reagera JS sammanhang: JSX är ett XML-som förlängning till JavaScript som är utformad för att vara sammanställts av förbehandling i vanliga JavaScript-kod. I huvudsak, det gör det möjligt för oss att skriva HTML – (ish) kod i JavaScript, så länge vi är förbehandlingen det. Det är vanligtvis förknippas med ett ramverk som Reagerar JS, men det är också används för Gutenberg blockera utvecklingen.

Låt oss börja med ett exempel:

const hej = <h1 className=”rubrik”>Hej, Pal</h1>;

Ganska coolt, va? Ingen mallhantering eller att fly eller att sammanfoga krävs. Så länge du tillbaka ett enda element, som kan ha många barn, du är allt bra. Så låt oss visa något på en touch mer komplex, med en Reagera göra funktionen:

klass MyComponent sträcker sig Reagera.Komponent {
/* Andra delar som redigerats för enkelhetens skull */

render() {
avkastning (
<artikel>
<h2 className=”rubrik”>{ detta.rekvisita.rubrik }</h2>
<p className=”leda”>{ detta.rekvisita.sammanfattning }</p>
</article>
);
}
};

Du kan se ovan är att vi kan släppa uttryck i var vi vill. Detta är också fallet med element attribut, så att vi kan ha något liknande detta:

<h2 className={ detta.rekvisita.headingClass }>
{ detta.rekvisita.rubrik }
</h2>

Du kanske tänker, “Vilka är dessa slumpmässiga tandställning gör?”

Svaret är att detta är ett uttryck, som du kommer att se massor av i JSX. I huvudsak är det en liten inline exekvering av JavaScript som beter sig väldigt mycket som en PHP echo gör.

Du kommer också förmodligen att märka att det säger className i stället för klass. Även om det ser ut som HTML – /XML, det är fortfarande JavaScript, så reserverade ord är naturligtvis undvikas. Attribut är camel-hölje också, så håll och öga för det. Här är ett användbart svar på varför det är så här.

JSX är verkligen stark som du kommer att se när den här serien fortskrider. Det är ett bra verktyg i vår stack och verkligen är användbara för att förstå i allmänhet.

Jag gillar att tänka på JSX som gjorts upp-tag-namn som finns faktiskt bara ett funktionsanrop. Plocka ut någon av de färdiga etiketterna du se i Gutenberg, låt oss använda <InspectorControls /> till exempel, och göra en “Sök i Mapp” för klass InspectorControls och du kommer att se något som är uppbyggd som Andy exempel här! Om du inte hittar det, då JSX måste vara registrerad som funktionell del, och ska vända upp genom att söka efter funktion InspectorControls.

Att linda upp

Vi har haft ett snabbt gå igenom några av de användbara funktionerna i ES6. Det finns massor mer att lära sig, men jag ville fokusera din uppmärksamhet på de saker som vi kommer att använda i denna tutorial serien. Jag skulle starkt rekommendera er vidare i din utbildning med Wes Bim kurser, JavaScript 30 och ES6.io.

Nästa upp, vi kommer att bygga ett mini Reagera komponent!

Artikel-Serien:

  1. Serien Introduktion
  2. Vad är Gutenberg, Ändå?
  3. En Primer med skapa-guten-block
  4. Modern JavaScript-Syntax (Detta Inlägg)
  5. Reagera 101
  6. Att sätta upp en Egen webpack (Kommer Snart!)
  7. En Anpassad “Card” – Block (Kommer Snart!)