5 caracteristici JavaScript pe care trebuie să le cunoașteți pentru a le dezvolta în Gutenberg

În 2016, Matt Mullenweg ne-a spus:

Îți voi da niște teme: învață JavaScript profund (...) pentru că este viitorul web-ului.

Matt Mullenweg (pe YouTube)

Nu știu dacă i-ai urmat sfatul în urmă cu trei ani, dar dacă nu ai făcut-o, nu mai poți amâna. Lansarea oficială a editorului de bloc a forțat mulți dezvoltatori să treacă la curent cu JavaScript. Limbajul devine din ce în ce mai relevant în cadrul WordPress și, dacă nu vrem să rămânem în urmă, trebuie să ne îmbunătățim abilitățile cu el.

În trecut, am scris o postare despre ce poți realiza folosind vanilla JavaScript, fără biblioteci precum jQuery. Astăzi vreau să fac un pas mai departe și să explic câteva dintre noutățile care sunt în noile versiuni de JavaScript și care sunt șocante de prima dată când le vezi. Cred că este important să le cunoașteți, pentru că sunt prezente în toate proiectele JavaScript noi (inclusiv Gutenberg, desigur).

Să învățăm JavaScript cu Gutenberg!

#1 – Destructurarea obiectelor și a tablourilor

Să presupunem că vrem să vedem cum funcționează interfața de editare a unui paragraf în Gutenberg. Dacă ați citit postările noastre anterioare despre Gutenberg, știți că trebuie să ne uităm la componenta de edit a blocului relevant. În cazul nostru, această componentă este ParagraphBlock și primul lucru pe care îl vom găsi în metoda sa de randare, linia 127, este acesta:

Ce sunt toate acestea? Ei bine, să începem cu ceva mai ușor. Imaginați-vă că aveți un obiect ca următorul:

Destructurarea obiectelor și matricelor face posibilă despachetarea valorilor din matrice sau proprietăți din obiecte în variabile distincte:

Cu o singură declarație, am putut recupera id -ul , title și content post noastre . Și asta este exact ceea ce făcea Gutenberg în primul nostru fragment: am extras obiectul attributes , funcția setAttributes , atributul isRTL etc. din this.props .

Un pic mai confuză, dar la fel de interesantă, este posibilitatea de a extrage atribute din obiecte imbricate. Adică pornind de la un obiect astfel încât:

putem prelua valorile din post , precum și valorile dintr-un obiect imbricat, cum ar fi id sau name în author :

Acum fiți atenți: de fiecare dată când destructuram un obiect, variabilele pe care le creăm au ​​aceleași nume ca și atributele pe care le extragem. Acest lucru ridică întrebarea: ce s-ar întâmpla dacă dorim să recuperăm mai multe atribute id din diferite obiecte imbricate? De exemplu, în cazul nostru, atât post , cât și author obiectului imbricat au un id , deci...

putem scoate aceste două valori? Soluția constă în aliasuri:

Adică, putem specifica atributul pe care vrem să-l extragem (de exemplu, author.id ) și numele variabilei care își va păstra valoarea ( authorId ) dintr-o dată.

În sfârșit, permiteți-mi să vă spun că destructurarea funcționează și cu matrice:

precum și parametrii funcției. Adică, dacă unul dintre parametrii din funcția noastră este un obiect, îl putem destructura în definiția funcției în sine:

Destul de la îndemână, nu?

#2 – Funcții săgeți

Un alt exemplu destul de comun. Dacă aruncați o privire la subtitrările blocurilor de imagine Gutenberg, veți vedea următoarele pe linia 693:

Care este value dintre paranteze? De ce există o săgeată? Ce este despre setAttributes cu acolade înăuntru? Argh!!

Ei bine, haideți să decriptăm acest lucru pas cu pas. Când vedeți o săgeată ca => , tocmai ați întâlnit o funcție de săgeată. O funcție săgeată poate fi extrem de asemănătoare cu funcțiile clasice, dar folosesc o sintaxă ușor diferită:

Principalul avantaj al funcțiilor săgeată este că pot fi simplificate și mai mult, făcând codul și mai compact. De exemplu, dacă funcția dvs. are o singură instrucțiune, puteți salva acoladele și cuvântul cheie return , deoarece funcția va returna automat rezultatul evaluării singurei sale instrucțiuni:

O altă simplificare pe care o putem face sunt parantezele din lista de argumente. Dacă scriem o funcție care are un singur parametru, parantezele devin opționale:

#3 – Operatori de răspândire și odihnă

Înapoi la blocul de paragrafe, aruncați o privire la rândul 64:

Ce naiba?

Ei bine, permiteți-mi să vă prezint operatorul de împrăștiere: ... .

Sintaxa de răspândire permite extinderea unui iterabil, cum ar fi o expresie de matrice sau șir, în locurile în care sunt așteptate zero sau mai multe argumente (pentru apeluri de funcții) sau elemente (pentru literali de matrice) sau o expresie de obiect să fie extinsă în locurile în care zero sau mai multe sunt așteptate perechi cheie-valoare (pentru literali obiect).

Să începem cu cel mai simplu exemplu. Să presupunem că avem o matrice cu un anumit număr de elemente și dorim să o punem în alt tablou. Putem realiza acest lucru cu:

Cu ea, „extindem” (de unde și numele operatorului) elementele unui tablou ( list ) în celălalt ( result ).

Acest lucru funcționează și cu obiecte:

Acum uitați-vă la următorul exemplu (care este o copie a exemplului Gutenberg cu care am deschis această secțiune):

Dacă extind două obiecte care au proprietăți comune, obiectul rezultat va conține uniunea proprietăților ambelor obiecte și, pentru fiecare proprietate „repetă”, va conține valoarea obiectului din dreapta. Astfel, de exemplu, atributul title care se repetă în ambele obiecte, conține valoarea obiectului newAttributes , în timp ce celelalte atribute ( author pe de o parte și words pe de altă parte) apar în rezultat cu singurele valori pe care le-ar putea conține. .

#4 – Literale șablon

Literele șablonului sunt utilizate pe scară largă în Gutenberg. Puteți vedea un exemplu în următorul index.js , linia 133:

Sau, chiar mai complicat, inline 136:

Literale șablon sunt literale șir care permit expresii încorporate. Puteți utiliza șiruri cu mai multe linii și funcții de interpolare a șirurilor cu acestea. Au fost numite „șiruri de șablon” în edițiile anterioare ale specificației ES2015. Aici aveți un alt exemplu similar cu primul pe care tocmai l-am văzut:

Acum, ce sa întâmplat în al doilea exemplu? Practic, creăm un obiect cu proprietăți ale căror „nume” sunt dinamice (unii folosesc o variabilă, alții folosesc literale șablon). Să vedem asta cu un exemplu mai scurt:

Mai ușor decât te așteptai, nu-i așa?

# 5 – La revedere pentru și cât timp

În cele din urmă, aș dori să închei această postare cu câteva funcții care sunt foarte utile pentru a lucra cu matrice și cu care ar trebui să fii deja familiarizat. Ambele pot fi găsite, de exemplu, în blocul coloanelor Gutenberg. Într-adevăr, vorbesc despre map (linia 136) și reduce (linia 119). Să vedem pentru ce este fiecare dintre ele și cum le poți folosi.

Metoda map creează o nouă matrice cu rezultatele apelării unei funcții furnizate pe fiecare element din matricea de apelare:

Practic, este o metodă care rulează prin toate elementele unui tablou (aceasta este instrucțiunea for ) și aplică o funcție în fiecare element („corpul” clasicului for ).

Metoda reduce este foarte similară cu map , dar în loc să returneze o matrice ale cărei elemente sunt rezultatul aplicării unei funcții elementelor originale, returnează o singură valoare. Adică, o metodă care vă permite să aplicați o funcție unui acumulator și fiecărei valori a unui tablou (de la stânga la dreapta) pentru a o reduce la o singură valoare. De exemplu:

Încheierea

După cum puteți vedea, noile versiuni de JavaScript adaugă construcții care permit scrierea codului mai eficient și mai confortabil, dar sintaxa acestuia poate fi confuză la început. Sper că postarea de astăzi v-a ajutat să înțelegeți ce este nou în JavaScript și cum să utilizați noile sale structuri și funcții.

Îmi place foarte mult modul în care evoluează JavaScript, deoarece cred că vă permite să scrieți cod mai bun și mai ușor de citit (odată ce știți să-l citiți, desigur). Ce crezi? După ce ai citit această postare, ești deja dornic să „înveți JavaScript profund” odată pentru totdeauna?

Imagine prezentată de Ross Findon pe Unsplash .