Uneori, vrei doar să înveți ceva rapid. Și citirea articolelor cuprinzătoare care descriu concepte specifice JavaScript poate provoca suprasolicitare cognitivă. Scopul acestui articol este de a descrie câteva concepte comune cât mai simplu posibil cu:
- O scurtă descriere
- De ce este relevant
- Un exemplu practic de cod (ES5 / ES6 cu funcții săgeată).
Este întotdeauna o idee bună să ai cunoștințe generale atunci când lucrezi cu ecosistemul JS. Veți fi conștienți de modul în care lucrurile funcționează și interacționează și veți învăța și îmbunătăți cu ușurință lucrurile mai repede.
Aceste concepte JS sunt alese în funcție de popularitate și relevanță pe care le-am văzut în rândul comunității. Dacă doriți să aflați un concept care nu face parte din acest articol, lăsați un comentariu și îl voi adăuga în viitorul apropiat.
Dacă doriți să deveniți un dezvoltator web mai bun, să vă începeți propria afacere, să-i învățați pe alții sau pur și simplu să vă îmbunătățiți abilitățile de dezvoltare, voi posta săptămânal sfaturi și trucuri despre cele mai recente limbi de dezvoltare web.
Stimulați-vă Abilități JavaScript cu aceste metode JS utile.
Conceptele JS pe care le vom analiza:
- Domeniul de aplicare
- IIFE
- MVC
- Asincronizare / așteptare
- Închidere
- Sună din nou
1 Domeniul de aplicare
Domeniul de aplicare este pur și simplu o cutie cu limite. Există două tipuri de granițe în JS: local și global, denumit și interior și exterior.
Local înseamnă că aveți acces la tot ceea ce se află în interiorul limitelor (în interiorul casetei), în timp ce global este tot în afara limitelor (în afara casetei).
Acești termeni sunt folosiți foarte mult atunci când vorbim despre clase, funcții și metode. Oferă capacitatea de a determina ce este accesibil (vizibil) contextului actual.
De ce este relevant acest lucru?
- Logica separă
- Reduce focalizarea
- Îmbunătățește lizibilitatea
Exemplu
Să presupunem că creați o funcție și doriți să accesați o variabilă definită în domeniul global.
ES5
ES6
După cum se arată în exemplul de mai sus, funcția showName() are acces la tot ceea ce este definit în limitele sale (local) și, de asemenea, în afara (global). Amintiți-vă, sfera globală nu poate accesa variabilele definite în sfera locală, deoarece este închisă din lumea exterioară, cu excepția cazului în care o returnați.
2. IIFE
IIFE (Expresia funcției invocate imediat), așa cum se arată în nume, înseamnă că funcția este „Invocată imediat” atunci când este creată. Înainte ca ES6 ++ să prezinte clase / metode pentru a sprijini paradigma de programare orientată pe obiecte (OOP), modul obișnuit a fost să imite IIFE ca nume de clasă și să invoce funcții ca metode înfășurate într return tip.
De ce este relevant acest lucru?
- Execută imediat codul
- Evită poluarea domeniului global
- Suportă structura asincronă
- Îmbunătățește lizibilitatea (unii ar putea susține contrariul)
Exemplu
Tehnologia s-a schimbat destul de mult în ultimii ani. Acum, de exemplu, aveți capacitatea de a schimba culoarea a aproape orice – cum ar fi mașina dvs. Să vedem un exemplu de cod.
ES5
ES6
În exemplul de mai sus, am înfășurat două funcții în returntip (changeColorToRed() & changeColorToBlack()). Acest lucru ne permite să accesăm mai multe funcții și să invocăm metoda dorită.
Pe scurt, invocăm mai întâi car (expresia funcției) pentru a accesa ceea ce este în interior. Atunci putem folosi . notație pentru a invoca funcția definită în cadrul return tip. Această abordare este similară cu structura de a avea clase / metode în care apelăm mai întâi numele clasei înainte de a putea apela numele metodei. În acest fel puteți scrie cod curat, care poate fi întreținut și reutilizat.
3. MVC
Model-view-controller este un cadru de proiectare (* nu un limbaj de programare) care ne permite să separăm comportamentul într-o structură practică din lumea reală. Aproape 85% din aplicațiile web au astăzi acest tipar de bază într-un fel sau altul. Există și alte tipuri de cadre de proiectare, dar acesta este de departe cel mai fundamental și mai ușor de înțeles model.
De ce este relevant acest lucru?
- Scalabilitate și mentenabilitate pe termen lung
- Ușor de îmbunătățit, actualizat și depanat (pe baza experienței personale)
- Ușor de configurat
- Oferă structură și prezentare generală
Exemplu
Să vedem un scurt exemplu de cadru de proiectare MVC.
ES5
ES6
După cum se arată în exemplul de mai sus, am împărți de obicei view, model, și controller în foldere / fișiere separate în ceea ce privește cele mai bune practici, dar doar pentru a ilustra conceptul, am pus totul într-un singur fișier. Obiectivele cadrului de proiectare sunt simplificarea procesului de dezvoltare și susținerea unui mediu colaborativ durabil.
4. Asincronizează / așteaptă
Opriți-vă și așteptați până când se rezolvă ceva. Oferă o modalitate de a menține procesarea asincronă într-un mod mai sincron. De exemplu, trebuie să verificați dacă parola unui utilizator este corectă (comparați cu ceea ce există pe server) înainte de a permite utilizatorului să intre în sistem. Sau poate ați efectuat o solicitare API REST și doriți ca datele să se încarce complet înainte de a le împinge în vizualizare.
De ce este relevant acest lucru?
- Capabilități sincrone
- Controlează comportamentul
- Reduce „iadul de apel invers”
Exemplu
Să presupunem că doriți să obțineți toți utilizatorii de la un API rest și afișează rezultatele în format JSON.
ES5
ES6
Pentru a folosi await, trebuie să o înfășurăm într-un async funcția de a anunța JS că lucrăm cu promisiuni. După cum se arată în exemplu, a) așteptăm două lucruri: response și users. Înainte de a putea converti response în format JSON, trebuie să ne asigurăm că avem response preluat, altfel putem ajunge să convertim un response nu există încă, ceea ce va provoca cel mai probabil o eroare.
5. Închidere
O închidere este pur și simplu o funcție din interiorul altei funcții. Se folosește atunci când doriți să extindeți comportamentul, cum ar fi variabile de trecere, metode sau tablouri de la o funcție exterioară la funcția interioară. De asemenea, putem accesa contextul definit în funcția exterioară din funcția interioară, dar nu și invers (amintiți-vă principiile domeniului de aplicare despre care am vorbit mai sus).
De ce este relevant acest lucru?
- Extinde comportamentul
- Util când lucrați cu evenimente
Exemplu
Să presupunem că lucrați ca inginer de dezvoltare pentru Volvo și au nevoie de o funcție care să imprime pur și simplu numele mașinii.
ES5
ES6
Functia showName() este o închidere, deoarece extinde comportamentul funcției showInfo(), și are, de asemenea, acces la variabilă carType.
6. Rambursare
Un apel invers este o funcție care se execută după ce o altă funcție a fost executată. Este, de asemenea, denumit „apel de apel”. În lumea JavaScript, o funcție care așteaptă ca o altă funcție să execute sau să returneze o valoare (matrice sau obiect) este denumită callback. Un apel invers este o modalitate de a face operațiile asincrone mai sincrone (ordine secvențială).
De ce este relevant acest lucru?
- Așteaptă executarea unui eveniment
- Oferă capabilități sincrone
- Mod practic de înlănțuire a funcționalităților (Dacă A este finalizat, atunci executați B și așa mai departe)
- Oferă structura și controlul codului
- Fiți conștienți, este posibil să fi auzit despre callback hell. În esență, înseamnă că aveți o structură recursivă a apelurilor de apel (apeluri de apel în cadrul apelurilor de apel în cadrul apelurilor de apel și așa mai departe). Acest lucru nu este practic.
Exemplu
Să presupunem că Elon Musk la SpaceX are nevoie de o funcționalitate care să declanșeze cele 27 de motoare Merlin ale Falcon Heavy (cea mai puternică rachetă din lume cu un factor de doi) atunci când este apăsat un buton.
ES5
ES6
Observați că așteaptă să apară un eveniment (un clic pe buton) înainte de a efectua o acțiune (aprindeți motoarele). Pe scurt, trecem fireUpEngines() funcționează ca argument (callback) către pressButton() funcţie. Când utilizatorul apasă butonul, acesta pornește motoarele.
Deci, iată-l! Unele dintre cele mai populare concepte JS explicate simplu cu exemple. Sper că aceste concepte v-au ajutat să înțelegeți mai mult JS și cum funcționează.
Mă puteți găsi pe Medium unde public săptămânal. Sau poți să mă urmărești mai departe Stare de nervozitate, unde postez sfaturi și trucuri relevante pentru dezvoltarea web împreună cu povești personale.
PS Dacă ți-a plăcut acest articol și dorești mai multe ca acestea, te rog să dai palme ❤ și să le împărtășești prietenilor, este o karma bună
