5 funzionalità JavaScript che devi conoscere per sviluppare in Gutenberg

Nel 2016 Matt Mullenweg ci ha detto:

Vi darò dei compiti: imparate JavaScript a fondo (…) perché è il futuro del web.

Matt Mullenweg (su YouTube)

Non so se hai seguito il suo consiglio tre anni fa, ma se non l'hai fatto, non puoi più rimandarlo. Il rilascio ufficiale dell'editor di blocchi ha costretto molti sviluppatori a mettersi al passo con JavaScript. Il linguaggio sta diventando sempre più rilevante all'interno di WordPress e, se non vogliamo restare indietro, dobbiamo migliorare le nostre competenze con esso.

In passato ho scritto un post su cosa puoi ottenere usando JavaScript vanilla, senza librerie come jQuery. Oggi voglio fare un ulteriore passo avanti e spiegare alcune delle novità che ci sono nelle nuove versioni di JavaScript e che sono scioccanti la prima volta che le vedi. Penso che sia importante che tu li conosca, perché sono presenti in tutti i nuovi progetti JavaScript (incluso Gutenberg, ovviamente).

Impariamo JavaScript con Gutenberg!

#1 – Destrutturazione di oggetti e array

Supponiamo di voler vedere come funziona l'interfaccia di modifica di un paragrafo in Gutenberg. Se hai letto i nostri post precedenti su Gutenberg, sai che dobbiamo guardare il componente di edit del blocco pertinente. Nel nostro caso, questo componente è ParagraphBlock e la prima cosa che troveremo nel suo metodo di rendering, riga 127, è questa:

Cos'è tutto questo? Bene, iniziamo con qualcosa di più semplice. Immagina di avere un oggetto come il seguente:

La destrutturazione di oggetti e array consente di decomprimere valori da array o proprietà da oggetti in variabili distinte:

Con una singola affermazione, siamo stati in grado di recuperare l' id , il title e il content del nostro post . E questo è esattamente ciò che Gutenberg stava facendo nel nostro primo snippet: abbiamo estratto l'oggetto attributes , la funzione setAttributes , l'attributo isRTL , ecc. di this.props .

Un po' più confusa, ma ugualmente interessante, è la possibilità di estrarre attributi da oggetti nidificati. Ovvero partendo da un oggetto tale che:

possiamo recuperare i valori in post così come i valori in un oggetto nidificato, come id o name in author :

Ora fai attenzione: ogni volta che destrutturiamo un oggetto, le variabili che creiamo hanno gli stessi nomi degli attributi che stiamo estraendo. Questo pone la domanda: cosa accadrebbe se volessimo recuperare più attributi id da diversi oggetti nidificati? Ad esempio, nel nostro caso, sia il post che il suo author dell'oggetto nidificato hanno un id , quindi...

possiamo estrarre questi due valori? La soluzione sta negli alias:

Cioè, possiamo specificare l'attributo che vogliamo estrarre (ad esempio, author.id ) e il nome della variabile che manterrà il suo valore ( authorId ) tutto in una volta.

Infine, lascia che ti dica che la destrutturazione funziona anche con gli array:

così come i parametri di funzione. Cioè, se uno dei parametri nella nostra funzione è un oggetto, possiamo destrutturarlo nella definizione della funzione stessa:

Abbastanza utile, eh?

#2 – Funzioni delle frecce

Un altro esempio abbastanza comune. Se dai un'occhiata alle didascalie dei blocchi dell'immagine di Gutenberg, vedrai quanto segue alla riga 693:

Qual è il value tra parentesi? Perché c'è una freccia? Di cosa si tratta setAttributes con parentesi graffe all'interno? Argh!!

Bene, decrittografiamo questo passo dopo passo. Quando vedi una freccia come => , hai appena incontrato una funzione freccia. Una funzione freccia può essere estremamente simile alle funzioni classiche, ma utilizzano una sintassi leggermente diversa:

Il principale vantaggio delle funzioni freccia è che possono essere ulteriormente semplificate, rendendo il codice ancora più compatto. Ad esempio, se la tua funzione ha una singola istruzione, puoi salvare le parentesi graffe e la parola chiave return , poiché la funzione restituirà automaticamente il risultato della valutazione della sua unica istruzione:

Un'altra semplificazione che possiamo fare sono le parentesi nella sua lista di argomenti. Se stiamo scrivendo una funzione che ha un solo parametro, le parentesi diventano opzionali:

#3 – Operatori di diffusione e riposo

Tornando al blocco di paragrafo, dai un'occhiata alla riga 64:

Che diamine?

Bene, lascia che ti presenti l'operatore di diffusione: ... .

La sintassi Spread consente di espandere un iterabile come un'espressione di matrice o una stringa in punti in cui sono previsti zero o più argomenti (per chiamate di funzione) o elementi (per valori letterali di matrice) o un'espressione oggetto di essere espansa in punti in cui zero o più Sono previste coppie chiave-valore (per valori letterali oggetto).

Cominciamo con l'esempio più semplice. Supponiamo di avere un array con un certo numero di elementi e di volerlo inserire all'interno di un altro array. Possiamo raggiungere questo obiettivo con:

Con esso, stiamo "espandendo" (da cui il nome dell'operatore) gli elementi di un array ( list ) all'interno dell'altro ( result ).

Funziona anche con gli oggetti:

Ora guarda il seguente esempio (che è una copia dell'esempio di Gutenberg con cui abbiamo aperto questa sezione):

Se sto espandendo due oggetti che hanno proprietà in comune, l'oggetto risultante conterrà l'unione delle proprietà di entrambi gli oggetti e, per ogni proprietà “ripetuta”, conterrà il valore dell'oggetto a destra. Così, ad esempio, l'attributo title che si ripete in entrambi gli oggetti, contiene il valore dell'oggetto newAttributes , mentre gli altri attributi ( author da un lato e words dall'altro) compaiono nel risultato con gli unici valori che potrebbero contenere .

#4 – Letterali modello

I letterali modello sono ampiamente utilizzati in Gutenberg. Puoi vedere un esempio nel seguente index.js , riga 133:

O, ancora più complicato, inline 136:

I valori letterali modello sono valori letterali stringa che consentono espressioni incorporate. È possibile utilizzare stringhe multilinea e funzioni di interpolazione di stringhe con esse. Erano chiamate "stringhe di modelli" nelle precedenti edizioni della specifica ES2015. Ecco un altro esempio simile al primo che abbiamo appena visto:

Ora, cosa stava succedendo nel secondo esempio? Fondamentalmente, stiamo creando un oggetto con proprietà i cui "nomi" sono dinamici (alcuni usano una variabile, altri usano i valori letterali del modello). Vediamolo con un esempio più breve:

Più facile di quanto ti aspettassi, vero?

#5 – Arrivederci per un po'

Infine, vorrei concludere questo post con un paio di funzioni che sono molto utili per lavorare con gli array e con le quali dovresti già avere familiarità. Entrambi si trovano, ad esempio, nel blocco delle colonne di Gutenberg. In effetti, sto parlando di map (riga 136) e reduce (riga 119). Vediamo a cosa serve ciascuno di essi e come puoi usarli.

Il metodo map crea un nuovo array con i risultati della chiamata di una funzione fornita su ogni elemento nell'array chiamante:

Fondamentalmente, è un metodo che attraversa tutti gli elementi di un array (che è l'istruzione for ) e applica una funzione in ogni elemento (il "corpo" del classico for ).

Il metodo reduce è molto simile a map , ma invece di restituire un array i cui elementi sono il risultato dell'applicazione di una funzione agli elementi originali, restituisce un singolo valore. Ovvero un metodo che permette di applicare una funzione ad un accumulatore e ad ogni valore di un array (da sinistra a destra) per ridurlo ad un unico valore. Per esempio:

Avvolgendo

Come puoi vedere, le nuove versioni di JavaScript aggiungono costruzioni che consentono di scrivere codice in modo più efficiente e comodo, ma la sua sintassi all'inizio può creare confusione. Spero che il post di oggi ti abbia aiutato a capire cosa c'è di nuovo in JavaScript e come utilizzare le sue nuove strutture e funzioni.

Mi piace molto il modo in cui JavaScript si sta evolvendo, poiché penso che ti permetta di scrivere codice migliore e più leggibile (una volta che sai come leggerlo, ovviamente). Cosa ne pensi? Dopo aver letto questo post, sei già desideroso di "imparare a fondo JavaScript" una volta per tutte?

Immagine in primo piano di Ross Findon su Unsplash .