Lær disse centrale JavaScript-koncepter på få minutter

Nogle gange vil du bare lære noget hurtigt. Og læsning gennem omfattende artikler, der beskriver specifikke JavaScript-koncepter, kan forårsage kognitiv overbelastning. Formålet med denne artikel er at beskrive et par almindelige begreber så enkelt som muligt med:

  • En kort beskrivelse
  • Hvorfor det er relevant
  • Et praktisk kodeeksempel (ES5 / ES6 med pilefunktioner).

Det er altid en god ide at have generel viden, når du arbejder med JS-økosystemet. Du vil være opmærksom på, hvordan ting fungerer og interagerer, og nemt lære og forbedre ting hurtigere.

Disse JS-koncepter vælges ud fra popularitet og relevans, jeg har set blandt samfundet. Hvis du vil lære et koncept, der ikke er en del af denne artikel, skal du efterlade en kommentar, og jeg vil tilføje den i den nærmeste fremtid.

Hvis du vil blive en bedre webudvikler, starte din egen virksomhed, lære andre eller blot forbedre dine udviklingsevner, sender jeg ugentlige tip og tricks til de nyeste sprog til webudvikling.

Forøg dine JavaScript-færdigheder med disse nyttige JS-metoder .

De JS-koncepter, vi vil se på:

  1. Anvendelsesområde
  2. IIFE
  3. MVC
  4. Asynkroniser / afvent
  5. Lukning
  6. Ring tilbage

1. Anvendelsesområde

Omfang er simpelthen en kasse med grænser. Der er to typer af grænser i JS: lokal og global, også kaldet indre og ydre.

Lokalt betyder, at du har adgang til alt inden for grænserne (inden i feltet), mens globalt er alt uden for grænserne (uden for feltet).

Disse udtryk bruges meget, når vi taler om klasser, funktioner og metoder. Det giver mulighed for at bestemme, hvad der er tilgængeligt (synligt) for den aktuelle kontekst.

Hvorfor er dette relevant?

  • Adskiller logik
  • Indskrænker fokus
  • Forbedrer læsbarheden

Eksempel

Lad os antage, at du opretter en funktion og vil have adgang til en variabel, der er defineret i globalt omfang.

ES5

ES6

Som vist i eksemplet ovenfor har funktionen showName()adgang til alt, hvad der er defineret inden for dets grænser (lokalt) og også uden for (globalt). Husk, det globale omfang kan ikke få adgang til variabler, der er defineret i lokalt omfang, fordi de er lukket fra den ydre verden, undtagen hvis du returnerer det.

2. IIFE

IIFE (straks påkaldt funktionsudtryk), som navnet angiver, betyder at funktionen er "straks påkaldt", når den oprettes. Før ES6 ++ præsenterede klasser / metoder til understøttelse af det objektorienterede programmeringsparadigme (OOP), var den almindelige måde at efterligne IIFE som et klassenavn og påberåbe sig funktioner som metoder indpakket i en returntype.

Hvorfor er dette relevant?

  • Udfører straks kode
  • Undgår globalt omfang fra at blive forurenet
  • Understøtter asynkron struktur
  • Forbedrer læsbarheden (nogle kan argumentere for det modsatte)

Eksempel

Teknologi har ændret sig ret meget i løbet af de sidste par år. Nu har du for eksempel evnen til at ændre farven på næsten hvad som helst - som din bil. Lad os se et kodeeksempel.

ES5

ES6

I eksemplet ovenfor har vi pakket to funktioner inden for returntypen ( changeColorToRed()& changeColorToBlack()). Dette giver os adgang til flere funktioner og påberåber os den metode, vi ønsker.

Kort sagt påkalder vi først car(funktionsudtrykket) for at få adgang til hvad der er indeni. Derefter kan vi bruge .notation til at påkalde den funktion, der er defineret inden for returntypen. Denne tilgang svarer til strukturen ved at have klasser / metoder, hvor vi først kalder klassens navn, før vi kan kalde metodens navn. På denne måde kan du skrive ren, vedligeholdelig og genanvendelig kode.

3. MVC

Model-view-controller er en designramme (* ikke et programmeringssprog), der giver os mulighed for at adskille adfærd i en praktisk virkelighedstruktur. Næsten 85% af de webbaserede applikationer i dag har dette underliggende mønster på den ene eller den anden måde. Der er andre typer designrammer derude, men denne er langt det mest grundlæggende og letforståelige mønster.

Hvorfor er dette relevant?

  • Langsigtet skalerbarhed og vedligeholdelse
  • Let at forbedre, opdatere og fejle (baseret på personlig erfaring)
  • Let at opsætte
  • Giver struktur og overblik

Eksempel

Lad os se på et kort eksempel på MVC-designrammen.

ES5

ES6

Som vist i eksemplet ovenfor, ville vi normalt opdele view, modelog controlleri separate mapper / filer i form af bedste praksis, men blot for at illustrere konceptet, vi har lagt det hele i én fil. Formålet med designrammen er at forenkle udviklingsprocessen og understøtte et bæredygtigt samarbejdsmiljø.

4. Asynkroniser / afvent

Stop og vent, indtil noget er løst. Det giver en måde at opretholde asynkron behandling på en mere synkron måde. For eksempel skal du kontrollere, om en brugers adgangskode er korrekt (sammenlign med hvad der findes på serveren), før brugeren får adgang til systemet. Eller måske har du udført en REST API-anmodning, og du vil have, at dataene indlæses fuldt ud, før du skubber dem til visningen.

Hvorfor er dette relevant?

  • Synkron kapacitet
  • Kontrollerer adfærd
  • Reducerer “callback helvede”

Eksempel

Lad os antage, at du vil hente alle brugere fra en rest-API og vise resultaterne i JSON-format.

ES5

ES6

For at kunne bruge det await, skal vi pakke det ind i en asyncfunktion for at underrette JS om, at vi arbejder med løfter. Som vist i eksemplet venter vi (a) på to ting: responseog users. Før vi kan konvertere responsetil JSON-format, skal vi sørge for, at vi har responsehentet, ellers kan vi ende med at konvertere en response, der ikke er der endnu, hvilket sandsynligvis vil medføre en fejl.

5. Lukning

En lukning er simpelthen en funktion inde i en anden funktion. Det bruges, når du vil udvide adfærd, såsom videregive variabler, metoder eller arrays fra en ydre funktion til indre funktion. Vi kan også få adgang til den kontekst, der er defineret i ydre funktion fra indre funktion, men ikke omvendt (husk omfangets principper, vi talte om ovenfor).

Hvorfor er dette relevant?

  • Udvider adfærd
  • Nyttig, når du arbejder med begivenheder

Eksempel

Lad os antage, at du arbejder som udviklingsingeniør for Volvo, og de har brug for en funktion, der blot udskriver navnet på bilen.

ES5

ES6

Funktionen showName()er en lukning, fordi den udvider funktionens opførsel showInfo()og har også adgang til variablen carType.

6. Tilbagekald

Et tilbagekald er en funktion, der udføres, når en anden funktion er udført. Det kaldes også en call-after. I JavaScript-verdenen kaldes en funktion, der venter på, at en anden funktion udfører eller returnerer en værdi (matrix eller objekt) som tilbagekald. Et tilbagekald er en måde at gøre asynkrone operationer mere synkrone (sekventiel rækkefølge).

Hvorfor er dette relevant?

  • Venter på, at en begivenhed udføres
  • Giver synkron kapacitet
  • Praktisk måde at kæde funktionaliteter på (Hvis A er afsluttet, skal du udføre B osv.)
  • Giver kodestruktur og kontrol
  • Vær opmærksom, du har måske hørt om tilbagekald helvede. Det betyder grundlæggende, at du har en rekursiv struktur af tilbagekald (tilbagekald inden for tilbagekald inden for tilbagekald og så videre). Dette er ikke praktisk.

Eksempel

Lad os sige, at Elon Musk hos SpaceX har brug for en funktionalitet, der fyrer Falcon Heavy's 27 Merlin-motorer (den mest kraftfulde raket i verden med en faktor på to), når der trykkes på en knap.

ES5

ES6

Bemærk, at den venter på, at en begivenhed finder sted (et knap-klik), før du udfører en handling (fyr motorerne op). Kort fortalt sender vi fireUpEngines()funktion som et argument (callback) til at pressButton()fungere. Når brugeren trykker på knappen, fyrer den motorerne op.

Så der har du det! Nogle af de mest populære JS-koncepter forklares ganske enkelt med eksempler. Jeg håber, at disse koncepter har hjulpet dig med at forstå JS lidt mere, og hvordan det fungerer.

Du kan finde mig på Medium, hvor jeg udgiver ugentligt. Eller du kan følge mig på Twitter, hvor jeg sender relevante tips og tricks til webudvikling sammen med personlige historier.

PS Hvis du nød denne artikel og vil have mere som disse, bedes du klappe ❤ og dele med vennerne, det er god karma