de Kevin Kononenko

Răspunsuri JavaScript explicate folosind Minions

Rambursări. Asincron. Non-blocare.

Aceste concepte JavaScript vă fac să vă rupeți părul.

Am fost și eu la un moment dat. Aveam nevoie de o analogie pentru ca aceste concepte abstracte să devină suficient de ușoare încât să le pot învăța altcuiva (și să dovedesc că eu le-am înțeles cu adevărat).

Sigur, au existat câteva tutoriale bune acolo (cum ar fi Aceasta și Aceasta). Dar fiecare tutorial a început instantaneu cu termeni complexi.

Aveam nevoie de ceva la care să mă pot conecta.

Aveam nevoie de Minioni.

Așadar, voi folosi acești minuni minunați pentru a explica apelurile. În această mică analogie, tu ești stăpânul lor. Puteți comanda armatei dvs. de minioni să facă orice doriți în codul dvs. Dar:

1. Există un singur maestru.
2. Minionii trebuie să-ți primească ordine. Nu pot lua propriile decizii.

Minion. Substantiv. Cineva care nu este puternic sau important și care respectă ordinele unui lider sau șef puternic.

Conceptul principal

De fiecare dată când vedeți „function ()” în jQuery sau JavaScript în interiorul altei funcții sau metode, imaginează-ți că în schimb scrie „minion ()”. Nu puteți tasta acest lucru, deoarece limbajul JavaScript nu recunoaște „minion ()” (decât dacă creați o funcție reală numită „minion”). Dar asta faceți acum când creați o funcție de apel invers – dând ordine minionilor.

Un exemplu cu un minion pregătit pentru comenzi

function myFunction(input, function(err, data){

});

Practic, asta spune …

function myFunction(input, minion(err, data){

});

Un exemplu cu doar o funcție simplă veche, fără minion disponibil:

function addOne(data){:

  return data++;

};

jQuery Exemple

Super de bază

Așadar, amintiți-vă, este ca și cum ați spune:

Ce face un apel invers aici?

Tu, stăpânul / șeful, trebuie să urmăriți evenimentele din întregul fișier și, eventual, mai multe fișiere. Nu aveți timp pentru un mic manipulator de clicuri jQuery! Deci, îl delegați unui minion, așa cum se arată în exemplul 2.

Acum, aceasta este o funcție simplă și probabil că o puteți face singură, dar dacă ar avea o lungime de 20 de linii? Nu puteți fi distras cu o funcție lungă de 20 de linii atunci când trebuie să primiți și alte instrucțiuni de la utilizator!

Deci, spuneți unui minion să o facă pe linia 1 după ce utilizatorul dă clic pe „.myButton”. Acest lucru te eliberează pentru a da alte comenzi mai multor servitori – mult mai eficient decât să-l faci singur și să aștepți alte funcții importante.

Exemplu de animație

Să ne uităm la o secvență de spectacol / ascundere pentru a evidenția cu adevărat importanța acestor minioni.

În acest exemplu, dacă ați citit codul în ordine și nu ați avut minioni lângă dvs., consola va înregistra „One”, „Two”, „Three”. DAR, ai minioni, iar consola va avea de fapt jurnalul „One”, „Three”, „Two” în acest caz. Iată de ce:

Linia 1: ați comandat primul dvs. servitor și ați continuat să urmăriți alte evenimente declanșate de utilizator.

Linia 2: primul dvs. servitor a citit declarația consolei, apoi a trecut la linia 3.

Linia 3: Minion 1 a mai adus un minion în ajutor: Minion 2. Mai exact, Minion 2 trebuie să stea acolo și să aștepte finalizarea metodei show () înainte de a continua instrucțiunile sale. Deci, acum aveți doi slujitori care lucrează pentru dvs., încercând simultan să-și termine lucrările în cadrul funcției cât mai repede posibil!

Minion 1 sare acum până la linia 7, deoarece Minion 2 trebuie să realizeze liniile 4-5. Citește declarația console.log și este gata – nu mai sunt apeluri, nu mai sunt de lucru. Minion 2, fracții de milisecundă în spate, citește console.log („Două”) și apoi se asigură că divul copil este afișat în linia 5. Acum, și minionul este terminat.

Iată o lecție incredibil de importantă: Funcțiile dvs. de apel invers definiți ordinea în care apar diferite acțiuni. Gândiți-vă cât de puternic este acest lucru: vă puteți asigura că o acțiune se întâmplă după alta, spre deosebire de a fi forțați să creați un șir lung de comenzi consecutive. Acest lucru permite mult mai multă flexibilitate. Dacă nu ai putea forța minionii să-ți îndeplinească comenzile, ar trebui să faci totul singur.

Logica jQuery de mai sus de fapt, funcționează numai cu apeluri de apel. În linia 5, care arată copilul div trebuie sa se întâmplă după arătarea divului părinte. Nu puteți arăta un copil div dacă divul părinte este ascuns. Singura modalitate de a garanta că divul copilului va fi afișat după divul părinte este un apel invers.

Dacă nu au existat apeluri de apel în exemplul de mai sus, linia 5 ar putea provoca o eroare deoarece metoda show () din linia 3 nu s-a finalizat încă. Minion 1, care a început de la linia 1, trece sarcina de-a lungul completării liniilor 4-5 la Minion 2 deci Minion 2 poate aștepta finalizarea metodei show () din linia 3 înainte de a începe lucrul pe 4–5. Acest lucru garantează că Minion 2 va începe și va termina a doua declarație show () după finalizarea primei declarații show (). Minion 1 trece apoi la restul funcției exterioare, fără a fi nevoie să aștepte.

Exemple de JavaScript simplu și Node.js

Utilizarea parametrilor și a apelurilor de apel

Bine, un exemplu puțin mai complicat! Liniile 2 și 14 declară doar funcții, așa că să trecem la linia 20 de unde începe efectiv acțiunea. Am apelat la funcția speakOrders cu doi parametri. Primul este un obiect cu declarațiile pe care în cele din urmă vreau să le raporteze minionul meu. Al doilea este un callback – o funcție numită reportOrders în acest caz.

Minionul tău nu poate raporta comenzile până nu ai rostit ordinele! Deci, astfel se execută aceste funcții. Pe linia 20, am sunat speakOrders cu instrucțiuni. Așa că salt până la linia 14 pentru a vedea ce ar trebui să facă funcția speakOrders. Aparent, doar introduce aceste instrucțiuni în funcția de apel invers.

Pe linia 20, am declarat că funcția de apel invers este reportOrders, dar ar putea fi orice! memorizeOrders, tellMySpouse, orice altă funcție pe care o numiți. Este standard să folosiți „callback” în declarația de funcție de pe linia 14 pentru a vă asigura că alte persoane care vă uită la cod știu că va trebui să aibă loc un callback. Ar putea fi orice alt cuvânt! Iată exemplul retratat, minion-ified.

Există un singur minion în întregul fragment de pe liniile 14-15, înlocuind „callback”.

Linia 20: Numesc speakOrders. Trec de-a lungul comenzilor – obiectul cu nume și specialitate. Al doilea parametru ar putea fi orice – un șir, o funcție sau altceva.

Linia 14-15: Eu definesc că al doilea parametru de fapt trebuie sa să fie o funcție de apel invers, deoarece pe linia 15, minionul este urmat de (). Deci, de fiecare dată când apelăm funcția speakOrders, știm acum că al doilea parametru va fi o funcție. Acesta este raportOrders, în acest caz.

Linia 15: Știu din rândul 20 că minionul meu va trebui să îndeplinească funcția de raportare a comenzilor. Primește parametrul de comenzi, un obiect. Are nevoie de aceste instrucțiuni pentru a raporta cu succes.

Randul 2: Variabila comenzi din linia 15 este acum menționată ca minionOrders în cadrul funcției. Funcția reportOrder se încheie, iar numele și specialitatea sunt raportate înapoi.

Rambursările sunt importante aici pentru urmăriți clar o cale că obiectul trebuie să urmeze. Fără callback-uri, acesta ar fi o grămadă de coduri într-o singură ordine, cu puțină flexibilitate pentru a refolosi funcțiile și a schimba ordinea.

Node.js

Aruncați o privire la următorul exemplu care folosește Expres si modul de solicitare. Acesta este cel mai dur încă!

Să ne imaginăm că utilizatorul tocmai a efectuat o solicitare GET de-a lungul rutei / storeData. Deci, începem de la linia 9. Acest exemplu include cazuri de utilizare a apelării din toate cele 3 exemple anterioare.

1. Există o apelare în cadrul unei metode la linia 9, similar cu exemplul jQuery click handler.
2. Există o execuție asincronă la linia 14, centrată în jurul unei cereri API false, similar cu exemplul de animație jQuery.
3. Există un parametru de apel invers declarat în linia 13, similar cu exemplul de vanilie JS.

Pentru a face acest lucru cât mai clar posibil, iată codul minion-ified, cu numere de minion care indică ordinea în care vor fi executate.

Linia 9: Utilizatorul atinge ruta. Tu, șeful, comandă Minion 1 pentru a începe să lucrezi la comenzile tale. Salt în jos la linia 10 și vede funcția readResult. Acum puteți aștepta mai multe indicii de la utilizator în timp ce minionii dvs. lucrează.

Linia 14: Minion 1 vede apelul de solicitare, îl efectuează pe API-ul fals și comandă Minion 2 să aștepte rezultatul. Minion 1 poate trece la alte lucrări. Din moment ce nu mai există, Minion 1 este scutit de datorie.

Linia 14: Minion 2 intră în acțiune la finalizarea apelului de solicitare. Acum transportă trei bucăți de informații potențial importante din rută, răspuns și corp.

Linia 15-16: Variabila globală „rezultate” este setată la valoarea corpului. Această variabilă globală poate fi utilizată acum și în alte funcții. Minion 2 îi spune Minion 3 că este timpul să începeți să lucrați la instrucțiunile sale. Minion 3 a primit inițial instrucțiuni de la linia 10, și așteptase să le completeze până când a fost chemat. Acum este momentul să finalizăm logRes ()!

Linia 5: Și instrucțiunile sunt … o consolă log. A fost dezamăgitor. Oricum, Minion 3 este gata acum.

Deci, cum naiba a fost chemat Minion 3 după Minion 2?

Un fel de Minion-ception?

Dacă reveniți la codul Exemplul 1 al nodului, veți vedea că linia 13 inițializează un apel invers. Asta înseamnă că de fiecare dată când este apelată funcția readResult (), trebuie să existe un parametru de apel invers. Aceasta setează apelul înapoi pentru utilizare ulterior la linia 16. La linia 16, apelul are capacitatea de a utiliza produsele cererii API pe linia 14 deoarece cererea de apel are un apel invers!

Imaginați-vă dacă callback / minion3 a fost o linie mai mică decât linia 17, în afara scopului apelului de solicitare. În primul rând, acest lucru ar face ca Minion 2, deoarece ar fi executat înainte ca apelul de solicitare să se termine. Și, rezultatele apelului de solicitare nu ar fi încă disponibile, ceea ce ar face această întreagă funcție destul de inutilă. Întregul scop este să efectuați apelul de solicitare, apoi să transmiteți rezultatele.

Din nou, utilizarea a două apeluri de apel separate în funcția readResult () asigură faptul că Minion 3 intră în funcțiune după finalizarea cererii. Rambursările oferă un nivel de control, astfel încât să puteți determina această comandă personalizată.

Concluzie

Ești stăpânul minion, cu hoarde de mici servitori care gâlgâie, gata să-ți facă porunca. Dacă le puteți oferi instrucțiunile corecte, acestea vă pot ușura viața. Ei fac toată munca grea și vă permit să ascultați instrucțiunile utilizatorului.

Te-a ajutat asta? Anunță-mă în comentarii.