Ponekad jednostavno želite nešto brzo naučiti. A čitanje opsežnih članaka koji opisuju određene JavaScript koncepte može prouzročiti kognitivno preopterećenje. Svrha ovog članka je opisati nekoliko uobičajenih pojmova na što jednostavniji način pomoću:
- Kratki opis
- Zašto je to relevantno
- Primjer praktičnog koda (ES5 / ES6 s funkcijama strelice).
Uvijek je dobra ideja imati opće znanje kada radite s JS ekosustavom. Bit ćete svjesni kako stvari funkcioniraju i komuniciraju, te ćete brže naučiti i poboljšati stvari.
Ovi JS koncepti odabiru se na temelju popularnosti i relevantnosti koje sam vidio u zajednici. Ako želite naučiti koncept koji nije dio ovog članka, ostavite komentar i ja ću ga dodati u bliskoj budućnosti.
Ako želite postati bolji web programer, pokrenuti vlastiti posao, podučavati druge ili jednostavno poboljšati svoje razvojne vještine, objavljivat ću tjedne savjete i trikove na najnovijim jezicima web razvoja.Poboljšajte svoje JavaScript znanje ovim korisnim JS metodama .
JS koncepti koje ćemo pogledati:
- Opseg
- IIFE
- MVC
- Async / await
- Zatvaranje
- Uzvratiti poziv
1. Opseg
Opseg je jednostavno okvir s granicama. Postoje dvije vrste granica u JS: lokalne i globalne, koje se nazivaju i unutarnje i vanjske.
Lokalno znači da imate pristup svemu unutar granica (unutar okvira), dok je globalno sve izvan granica (izvan okvira).
Ti se pojmovi često koriste kada govorimo o klasama, funkcijama i metodama. Pruža mogućnost utvrđivanja onoga što je dostupno (vidljivo) trenutnom kontekstu.
Zašto je ovo relevantno?
- Odvaja logiku
- Sužava fokus
- Poboljšava čitljivost
Primjer
Pretpostavimo da ste stvorili funkciju i želite pristupiti varijabli definiranoj u globalnom opsegu.
ES5
ES6
Kao što je prikazano u gornjem primjeru, funkcija showName()ima pristup svemu što je definirano unutar njezinih granica (lokalno), a također i izvan (globalno). Zapamtite, globalni opseg ne može pristupiti varijablama definiranim u lokalnom opsegu, jer je zatvoren iz vanjskog svijeta, osim ako ga vratite.
2. IIFE
IIFE (Izraz funkcije s neposrednim pozivom), kako naziv kaže, znači da je funkcija „Odmah pozvana“ kada je stvorena. Prije nego što je ES6 ++ predstavio klase / metode za podršku paradigmi objektno-orijentiranog programiranja (OOP), uobičajeni način bio je oponašati IIFE kao naziv klase i pozivati funkcije kao metode umotane u returntip.
Zašto je ovo relevantno?
- Odmah izvršava kod
- Izbjegava da se globalni opseg zagadi
- Podržava asinkronu strukturu
- Poboljšava čitljivost (neki mogu tvrditi suprotno)
Primjer
Tehnologija se prilično promijenila tijekom posljednjih nekoliko godina. Sada, na primjer, imate mogućnost promijeniti boju gotovo svega - poput svog automobila. Pogledajmo primjer koda.
ES5
ES6
U gornjem primjeru smo uvrstili dvije funkcije unutar returntipa ( changeColorToRed()& changeColorToBlack()). To nam omogućuje pristup više funkcija i pozivanje metode koju želimo.
Ukratko, prvo pozivamo car(izraz funkcije) kako bismo pristupili onome što je unutra. Tada možemo koristiti .notaciju za pozivanje funkcije koja je definirana unutar returntipa. Ovaj je pristup sličan strukturi posjedovanja klasa / metoda gdje prvo pozivamo ime klase prije nego što možemo nazvati ime metode. Na ovaj način možete napisati čist, održiv i ponovni kod.
3. MVC
Model-view-controller je okvir za dizajn (* ne programski jezik) koji nam omogućuje razdvajanje ponašanja u praktičnu strukturu iz stvarnog svijeta. Gotovo 85% web-aplikacija danas ima ovaj osnovni obrazac na ovaj ili onaj način. Postoje i druge vrste okvira za dizajn, ali ovaj je daleko najosnovniji i najrazumljiviji obrazac.
Zašto je ovo relevantno?
- Dugoročna skalabilnost i održivost
- Jednostavno poboljšanje, ažuriranje i uklanjanje pogrešaka (na temelju osobnog iskustva)
- Jednostavno postavljanje
- Pruža strukturu i pregled
Primjer
Pogledajmo kratki primjer MVC dizajnerskog okvira.
ES5
ES6
Kao što je prikazano u gornjem primjeru, mi bi obično luče view, modelte controlleru zasebne mape / datoteke u pogledu najboljih praksi, ali samo za ilustraciju koncepta, mi smo sve to staviti u jednu datoteku. Ciljevi dizajnerskog okvira su pojednostaviti razvojni proces i podržati održivo suradničko okruženje.
4. Async / await
Stanite i pričekajte dok se nešto ne riješi. Pruža način održavanja asinkrone obrade na više sinkron način. Na primjer, morate provjeriti je li korisnička lozinka ispravna (usporedite s onim što postoji na poslužitelju) prije nego što dopustite korisniku da uđe u sustav. Ili ste možda izvršili REST API zahtjev i želite da se podaci u potpunosti učitaju prije nego što ih gurnete u prikaz.
Zašto je ovo relevantno?
- Sinkrone mogućnosti
- Kontrolira ponašanje
- Smanjuje "pakao povratnog poziva"
Primjer
Pretpostavimo da želite dobiti sve korisnike iz API-ja za odmor i prikazati rezultate u JSON formatu.
ES5
ES6
Da bismo ga mogli koristiti await, moramo ga umotati u asyncfunkciju koja obavještava JS da radimo s obećanjima. Kao što je prikazano u primjeru, (a) čekamo dvije stvari: responsei users. Prije nego što možemo pretvoriti responseformat u JSON, moramo se pobrinuti da imamo responsedohvaćeni, inače možemo na kraju pretvoriti datoteku responsekoja još nije tu, što će najvjerojatnije zatražiti pogrešku.
5. Zatvaranje
Zatvaranje je jednostavno funkcija unutar druge funkcije. Koristi se kada želite proširiti ponašanje poput prenošenja varijabli, metoda ili nizova s vanjske na unutarnju funkciju. Kontekstu definiranom u vanjskoj funkciji također možemo pristupiti iz unutarnje funkcije, ali ne obratno (sjetite se načela opsega o kojima smo gore govorili).
Zašto je ovo relevantno?
- Proširuje ponašanje
- Korisno u radu s događajima
Primjer
Pretpostavimo da radite kao razvojni inženjer za Volvo i treba im funkcija koja jednostavno ispisuje naziv automobila.
ES5
ES6
Funkcija showName()je Zatvaranje, jer proširuje ponašanje funkcije showInfo(), a također ima pristup varijabli carType.
6. Povratni poziv
Povratni poziv je funkcija koja se izvršava nakon izvršavanja druge funkcije. Također se naziva pozivom na poziv. U svijetu JavaScript-a, funkcija koja čeka da druga funkcija izvrši ili vrati vrijednost (niz ili objekt) naziva se povratnim pozivom. Povratni poziv je način da se sinkrone operacije učine sinkroniziranijima (sekvencijalni redoslijed).
Zašto je ovo relevantno?
- Čeka izvršenje događaja
- Pruža sinkrone mogućnosti
- Praktični način povezivanja funkcionalnosti (ako je A dovršen, izvrši B i tako dalje)
- Pruža strukturu koda i kontrolu
- Imajte na umu, možda ste čuli za pakao povratnog poziva. To u osnovi znači da imate rekurzivnu strukturu povratnih poziva (povratni pozivi unutar povratnih poziva unutar povratnih poziva i tako dalje). To nije praktično.
Primjer
Recimo da je Elonu Musku u SpaceX-u potrebna funkcionalnost koja će aktivirati Falcon Heavy-ovih 27 Merlinovih motora (najmoćnija raketa na svijetu faktor dva) kad se pritisne tipka.
ES5
ES6
Primijetite da čeka da se dogodi događaj (klik gumba) prije izvođenja radnje (upalite motore). Ukratko, fireUpEngines()funkciji prenosimo funkciju kao argument (povratni poziv) pressButton(). Kad korisnik pritisne gumb, on pali motore.
Pa eto vam! Neki od najpopularnijih JS koncepata objašnjeni su samo primjerima. Nadam se da su vam ovi koncepti pomogli da malo bolje razumijete JS i kako on funkcionira.
Možete me pronaći u Medijumu gdje objavljujem tjedno. Ili me možete pratiti na Twitteru, gdje objavljujem relevantne savjete i trikove za web razvoj, zajedno s osobnim pričama.
PS Ako vam se svidio ovaj članak i želite još ovakvih, pljeskajte ❤ i podijelite s prijateljima, dobra je karma