Leren Gutenberg: Moderne Syntaxis Van JavaScript

0
22

Een van de belangrijkste veranderingen die Gutenberg brengt de WordPress ecosysteem is een sterke afhankelijkheid van JavaScript. Behulpzaam, het WordPress team hebben echt geduwd hun JavaScript-framework in het heden en de toekomst door gebruik te maken van de moderne JavaScript stapel, die gewoonlijk wordt aangeduid als ES6 in de gemeenschap. Het is hoe verwijzen wij u naar het in deze serie ook, om verwarring te voorkomen.

Laten we graven in deze ES6 wereld een beetje, omdat het uiteindelijk gaat om ons te helpen begrijpen hoe de structuur en het bouwen van een aangepaste Gutenberg blok.

Serie Artikelen:

  1. Serie Inleiding
  2. Wat is Gutenberg, Toch?
  3. Een Primer met create-guten-blok
  4. Moderne JavaScript Syntaxis (Deze Post)
  5. Reageren 101
  6. Het opzetten van een Aangepaste webpack (Coming Soon!)
  7. Een Aangepaste “Kaart” Blok (Coming Soon!)

Wat is ES6?

ES6 is de afkorting voor “EcmaScript 6” dat is de 6e editie van EcmaScript. Het is de officiële naam is ES2015, die wellicht hebt u ook gezien in de buurt. EcmaScript is inmiddels verdwenen door de vele iteraties, maar de moderne JavaScript wordt nog vaak aangeduid als ES6. Zoals u waarschijnlijk al geraden, de iteraties zijn blijven ES2016, ES2017 en dus-op. Ik heb eigenlijk een vraag op ShopTalk show over wat we konden naam modern, JavaScript, dat ik de conclusie was… ES6.

Ik ben gaan lopen door een aantal belangrijke kenmerken van de ES6 die nuttig zijn in het kader van Gutenberg.

Functies

Functies krijgen een deurklink van een update met de ES6. Twee veranderingen wil ik de aandacht richten op zijn Pijl Functies en Methoden van de Klasse.

In een klas heb je eigenlijk niet nodig om het woord functie meer in ES6. Dit kan verwarrend zijn, dus check dit voorbeeld:

class Foo {
// Dit is uw ‘bar’ – functie
bar() {
return ‘hallo’;
}
}

Je zou roepen bar (), zoals deze:

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

Dit is gemeengoed in het land van de moderne JavaScript, dus het is goed om het te wissen.

Leuk weetje! ES6 Klassen in JavaScript niet echt “klassen” in een object-georiënteerd programmeren zin—onder de motorkap, het is het zelfde oude prototypische erfenis JavaScript altijd heeft gehad. Voorafgaand aan de ES6, de bar() methode zou worden gedefinieerd als volgt: Foo.prototype.bar = function() { … }. Reageren maakt veel gebruik van de ES6 klassen, maar het is de moeite waard op te merken dat ES6 klassen zijn in wezen syntactische suiker en fel bestreden door sommigen. Als u geïnteresseerd bent in meer details, bekijk de MDN-documenten en dit artikel op 2ality.

Ok, laten we verder gaan naar de pijl functies. 🚀

Een pijl functie geeft ons een compacte syntax die vaak gebruikt wordt als een one-liner voor expressies. Het is ook gebruikt om de waarde van deze, als een pijl functie niet opnieuw binden, dit setInterval of een gebeurtenis-handler gewoonlijk zou doen.

Een voorbeeld van een pijl functie als een expressie is als volgt:

// Definieer een array van objecten fruit
const fruit = [
{
naam: ‘Apple’,
kleur: ‘rood’
},
{
naam: ‘Banaan’,
kleur: ‘geel’
},
{
naam: ‘Peer’,
kleur: ‘groen’
}
];

// Selecteer alleen rood fruit uit die verzameling
const redFruit = fruit.filter(fruitItem => fruitItem.color === ‘red’);

// Output moet iets als Object { naam: “Apple”, color: “red” }
console.log(redFruit[0]);

Zoals je hierboven kunt zien, want er was een enkele parameter, en de functie wordt gebruikt als een uitdrukking is, kunnen we herschrijven de beugels en haken. Dit stelt ons in staat om echt compact onze code en het verbeteren van de leesbaarheid.

Laten we eens kijken hoe we gebruik kunnen maken van een pijl functie als een gebeurtenis-handler in onze klasse Foo uit voor:

class Foo {

// Dit is uw ‘bar’ – functie
bar() {
laat buttonInstance = document.querySelector(‘button’);

buttonInstance.addEventListener(‘klik’, evt => {
console.log in(deze);
});
}
}

// Voer de handler
const fooInstance = new Foo();
fooInstance.bar();

Wanneer de knop wordt aangeklikt, moet de output Foo ‘ { }, want dit is het exemplaar van Foo. Als we vervangen die bijvoorbeeld met het volgende:

class Foo {

// Dit is uw ‘bar’ – functie
bar() {
laat buttonInstance = document.querySelector(‘button’);

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

// Voer de handler
const fooInstance = new Foo();
fooInstance.bar();

Wanneer op de knop wordt geklikt, wordt de uitvoer van de knop <> omdat de functie is gebonden dat dit de toets <> dat is geklikt.

U kunt meer lezen over pijl functies met Wes Bos, die schreef een uitstekend artikel over hen.

const, laat, en var

Je hebt misschien gemerkt dat ik gebruik const en laat in de bovenstaande voorbeelden. Deze zijn ook een deel van de ES6 en ik zal kort uitleggen wat ze doet.

Als er een waarde is absoluut constante en zal niet veranderen door middel van re-opdracht, of opnieuw worden gedeclareerd, gebruik een const. Dit zou vaak worden gebruikt bij het importeren van iets of het declareren van niet-veranderen van eigenschappen, zoals een verzameling van DOM-elementen.

Als u een variabele die u wilt alleen toegankelijk in het blok het werd gedefinieerd in, gebruik dan een let. Dit kan verwarrend zijn om te begrijpen, dus bekijk onderstaand voorbeeld:

function foo() {
if (1 < 2) {
laat bar = ‘altijd waar’;

// Uitgangen: ‘altijd waar’
console.log(bar);
}

// Uitgangen ‘ReferenceError: bar is niet gedefinieerd’
console.log(bar);
}

// Voer de functie zo zien we onze logs
foo();

Dit is een geweldige manier om controle te houden van de variabelen en maak ze beschikbaar zijn, in een zin.

Ten slotte, de var is hetzelfde oude vriend die we kennen en liefhebben. Helaas, tussen const en laten, onze vriend, is steeds meer en meer overbodig worden naarmate de tijd vordert. Met behulp van var is het volledig aanvaardbaar, dus wees niet ontmoedigd dat je niet heel vaak in de rest van deze tutorial!

Destructuring opdracht

Destructuring kunt u uitpakken object toetsen op het punt waar u deze toewijzen aan uw lokale variabele. Dus, zeg je hebt dit object:

const foo = {
mensen: [
{
naam: ‘Bar’,
leeftijd: 30
},
{
naam: ‘Baz’,
leeftijd: 28
}
],
anotherKey: ‘sommige dingen’,
heyAFunction() {
return ‘Watermeloenen zijn echt verfrissend in de zomer’
}
};

Traditioneel, je zou uitpakken mensen met foo.de mensen. Met destructuring, kunt u dit doen:

laat { mensen } = foo;

Dat trekt de mensen array uit de foo object, dus we kunnen het dumpen van de foo. prefix en gebruik het zoals het is: de mensen. Het betekent ook dat anotherKey en heyAFunction worden genegeerd, omdat we ze niet nodig nu. Dit is ideaal wanneer u werkt met grote complexe objecten waar te kunnen selectief uitzoeken van dingen is erg handig.

U kunt ook gebruik maken van destructuring te breken van een object in de lokale variabelen te verhogen code leesbaarheid. Laten we updaten de bovenstaande fragment:

laat { mensen } = foo;
laat { heyAFunction } = foo;

Nu hebben we deze twee verschillende elementen van hetzelfde object, terwijl nog steeds het negeren van anotherKey. Als je liep console.log(mensen), het zou zelf een array en als je liep console.log(heyAFunction), u raadt het al, het zou zich laten zien als een functie.

JSX

Meestal gevonden in het Reageren JS contexten: JSX is een XML-als uitbreiding op JavaScript die is ontworpen om te worden samengesteld door preprocessors in normale JavaScript-code. In wezen, het stelt ons in staat om HTML te schrijven(ish) – code in JavaScript, zolang we preprocessing. Het is meestal geassocieerd met een framework zoals Reageren JS, maar het is ook gebruikt voor Gutenberg blok ontwikkeling.

Laten we beginnen met een voorbeeld:

const hallo = <h1 className=”kop”>Hallo, Pal</h1>;

Pretty cool, hè? Geen template systeem of ontsnappen of samenvoegen vereist. Zolang je het retourneren van één element, dat hebben veel kinderen, je bent al goed. Dus laten we iets een beetje meer complex, met een Reageren render functie:

klasse MyComponent breidt Reageren.Onderdeel {
/* Andere delen geredigeerd voor de beknoptheid */

render() {
return (
<artikel>
<h2 className=”kop”>{ dit.props.omschrijving }</h2>
<p className=”lead”>{ dit.props.samenvatting }</p>
</article>
);
}
};

U hierboven kunt zien dat we kunnen vallen en uitdrukkingen in waar we willen. Dit is ook het geval met element attributen, dus we kunnen iets als dit:

<h2 className={ dit.props.headingClass }>
{ dit.props.omschrijving }
</h2>

Je zou kunnen denken “Wat zijn deze random beugels aan het doen?”

Het antwoord is dat dit een uitdrukking is, die zie je een ton van de in JSX. In wezen, het is een beetje inline uitvoering van JavaScript-dat zich gedraagt als een PHP echo doet.

Ook u zult waarschijnlijk merken dat het zegt className in plaats van de klasse. Hoewel het lijkt op HTML/XML, het is nog steeds van JavaScript, zodat gereserveerde woorden natuurlijk worden vermeden. Kenmerken zijn kameel-gevat te houden en oog voor dat. Hier is een nuttig antwoord op de vraag waarom het zo.

JSX is echt krachtig als je ziet tijdens deze serie vordert. Het is een geweldige tool in onze stack en echt nuttig om te begrijpen in het algemeen.

Ik denk graag van JSX gemaakt-tag namen zijn eigenlijk alleen de functie oproepen. Kies uit een van de made-up-tags die u ziet in de Gutenberg, laten we gebruik maken van <InspectorControls /> bijvoorbeeld, en doe een “Vinden in de Map” voor de klas InspectorControls en u zult iets zien eruit als Andy ‘ s voorbeeld hier! Als u niet kunt vinden, dan is de JSX dient geregistreerd te worden als functionele component, en mag zetten door te zoeken naar de functie InspectorControls.

Inpakken

We hebben een snelle run door middel van een aantal van de handige functies van de ES6. Er is een ton meer te leren, maar ik wilde de aandacht richten op de dingen die we gaan gebruiken in deze tutorial serie. Ik zou sterk aanbevelen het verdere leren met Wes Bos’ cursussen, JavaScript 30 en ES6.io.

Volgende, we gaan tot het bouwen van een mini Reageren onderdeel van te zijn!

Serie Artikelen:

  1. Serie Inleiding
  2. Wat is Gutenberg, Toch?
  3. Een Primer met create-guten-blok
  4. Moderne JavaScript Syntaxis (Deze Post)
  5. Reageren 101
  6. Het opzetten van een Aangepaste webpack (Coming Soon!)
  7. Een Aangepaste “Kaart” Blok (Coming Soon!)