Ismerje meg ezeket a JavaScript alapkoncepciókat néhány perc alatt

Néha csak gyorsan meg akar tanulni valamit. Átfogó cikkek elolvasása, amelyek specifikus JavaScript fogalmakat írnak le, kognitív túlterhelést okozhatnak. A cikk célja néhány általános fogalom lehető legegyszerűbb leírása a következőkkel:

  • Rövid leírás
  • Miért releváns
  • Gyakorlati kódpélda (ES5 / ES6 nyílfüggvényekkel).

A JS ökoszisztémával való együttműködés során mindig jó ötlet általános ismeretekkel rendelkezni. Tisztában lesz azzal, hogy a dolgok hogyan működnek és kölcsönhatásban vannak, és könnyebben megtanulhatja és gyorsabban javíthatja a dolgokat.

Ezeket a JS fogalmakat a közösség körében tapasztalt népszerűség és relevancia alapján választjuk ki. Ha olyan fogalmat szeretne megtanulni, amely nem része ennek a cikknek, írjon megjegyzést, és a közeljövőben hozzáadom.

Ha jobb webfejlesztőként szeretnél lenni, saját vállalkozást alapítani, másokat tanítani vagy egyszerűen fejleszteni fejlesztési készségeidet, heti tippeket és trükköket teszek közzé a legújabb webfejlesztési nyelveken.

Növelje JavaScript-ismereteit ezekkel a hasznos JS módszerekkel .

A JS fogalmak, amelyeket megvizsgálunk:

  1. Hatály
  2. IIFE
  3. MVC
  4. Async / vár
  5. Bezárás
  6. Visszahív

1. Hatály

A hatókör egyszerűen egy doboz, amelynek határai vannak. Kétféle határ létezik a JS-ben: lokális és globális, más néven belső és külső.

A lokális azt jelenti, hogy mindenhez hozzáférhet a határokon belül (a dobozon belül), míg a globális minden a határokon kívül (a dobozon kívül).

Ezeket a kifejezéseket nagyon gyakran használják, amikor osztályokról, funkciókról és módszerekről beszélünk. Lehetővé teszi annak meghatározását, hogy mi érhető el (látható) az aktuális kontextus számára.

Miért fontos ez?

  • Elválasztja a logikát
  • Szűkíti a fókuszt
  • Javítja az olvashatóságot

Példa

Tegyük fel, hogy létrehoztál egy függvényt, és hozzá akarsz férni egy globális hatókörben definiált változóhoz.

ES5

ES6

Amint a fenti példában látható, a függvény showName()mindenhez hozzáférhet, ami a határain belül van meghatározva (lokálisan), és kívül is (globálisan). Ne feledje, hogy a globális hatókör nem férhet hozzá a helyi hatókörben definiált változókhoz, mivel a külvilágtól el van zárva, kivéve, ha visszaadja.

2. IIFE

IIFE (azonnal meghívott függvény-kifejezés), mivel a név azt jelenti, hogy a függvény létrehozásakor „Azonnal meghívva” van. Mielőtt az ES6 ++ osztályokat / módszereket mutatott volna be az objektum-orientált programozási paradigma (OOP) támogatására, az általános módszer az volt, hogy az IIFE-t osztálynévként utánozták, és a függvényeket mint returntípusba burkolt módszereket hívták meg .

Miért fontos ez?

  • Azonnal végrehajtja a kódot
  • Kerüli a globális terjedelem szennyeződését
  • Támogatja az aszinkron struktúrát
  • Javítja az olvashatóságot (egyesek az ellenkezőjét állíthatják)

Példa

A technológia elég sokat változott az elmúlt években. Most például képes megváltoztatni szinte bármi színét - például az autója. Lássunk egy kód példát.

ES5

ES6

A fenti példában két függvényt csomagoltunk a return( changeColorToRed()& changeColorToBlack()) típusba . Ez lehetővé teszi számunkra, hogy több funkcióhoz hozzáférjünk, és meghívjuk a kívánt módszert.

Röviden: először a car(function kifejezést) hívjuk meg, hogy hozzáférjünk ahhoz, ami benne van. Ezután a .jelöléssel használhatjuk a returntípuson belül definiált függvényt . Ez a megközelítés hasonló az osztályok / módszerek struktúrájához, ahol először hívjuk az osztály nevét, mielőtt a módszer nevét meghívhatnánk. Így tiszta, karbantartható és újrafelhasználható kódot írhat.

3. MVC

A Model-view-controller egy olyan tervezési keretrendszer (* nem programozási nyelv), amely lehetővé teszi számunkra, hogy a viselkedést egy valós gyakorlati struktúrába különítsük el. A webalapú alkalmazások csaknem 85% -ának ma vagy ilyen módon ez az alapmintája van. Vannak más típusú tervezési keretek is, de ez messze a legalapvetőbb és legkönnyebben érthető minta.

Miért fontos ez?

  • Hosszú távú méretezhetőség és karbantarthatóság
  • Könnyen javítható, frissíthető és hibakereshető (személyes tapasztalatok alapján)
  • Könnyen beállítható
  • Felépítést és áttekintést nyújt

Példa

Nézzünk meg egy rövid példát az MVC tervezési keretrendszerére.

ES5

ES6

Amint az a fenti példában látható, általában a view, modelés controllera különálló mappákba / fájlokba osztanánk a bevált gyakorlatok szempontjából, de csak azért, hogy szemléltessük a koncepciót, mindet egy fájlba tettük. A tervezési keret célja a fejlesztési folyamat egyszerűsítése és a fenntartható együttműködési környezet támogatása.

4. Async / vár

Álljon meg és várja meg, amíg valami megoldódik. Lehetőséget nyújt az aszinkron feldolgozás szinkronabb módon történő fenntartására. Például ellenőriznie kell, hogy a felhasználó jelszava helyes-e (hasonlítsa össze a szerveren lévőkkel), mielőtt engedélyezné a felhasználó belépését a rendszerbe. Vagy esetleg végrehajtott egy REST API kérést, és azt szeretné, hogy az adatok teljesen betöltődjenek, mielőtt a nézetbe tolnák.

Miért fontos ez?

  • Szinkron képességek
  • Irányítja a viselkedést
  • Csökkenti a „visszahívási poklot”

Példa

Tegyük fel, hogy az összes felhasználót meg akarja szerezni egy többi API-ból, és az eredményeket JSON formátumban jeleníti meg.

ES5

ES6

A használat érdekében be awaitkell csomagolnunk egy asyncfunkcióba, hogy értesítsük a JS-t, hogy ígéretekkel dolgozunk. A példában látható módon (a) két dologra várunk: responseés users. Mielőtt konvertálhatnánk a responseJSON formátumot, meg kell győződnünk arról, hogy megvan-e a responsebeolvasás, különben végül átalakíthatunk egy responsemég nem létezőt, ami valószínűleg hibát fog okozni.

5. Zárás

A bezárás egyszerűen egy másik függvényen belüli funkció. Akkor használják, ha a viselkedést, például a változók, módszerek vagy tömbök átadását szeretné kiterjeszteni egy külső függvényről a belső funkcióra. A külső funkcióban definiált kontextust a belső funkcióból is elérhetjük, de fordítva nem (emlékezzünk azokra a hatókör-alapelvekre, amelyekről fentebb beszéltünk).

Miért fontos ez?

  • Kiterjeszti a viselkedést
  • Hasznos eseményekkel való munka során

Példa

Tegyük fel, hogy a Volvo fejlesztőmérnökként dolgozik, és szükségük van egy olyan funkcióra, amely egyszerűen kiírja az autó nevét.

ES5

ES6

A függvény showName()egy Zárás, mivel kiterjeszti a függvény viselkedését showInfo(), és hozzáférést biztosít a változóhoz is carType.

6. Visszahívás

A visszahívás olyan funkció, amely egy másik függvény végrehajtása után hajt végre. Felhívásnak is nevezik. A JavaScript világában egy olyan függvényt, amely egy másik függvény kivárására vagy értékének (tömb vagy objektum) visszaadására vár, visszahívásnak nevezzük. A visszahívás az aszinkron műveletek szinkronabbá tételének módja (szekvenciális sorrend).

Miért fontos ez?

  • Vár egy esemény végrehajtására
  • Szinkron képességeket biztosít
  • Gyakorlati mód a funkciók láncolására (Ha A befejeződött, akkor hajtsa végre B-t stb.)
  • Kódszerkezetet és vezérlést biztosít
  • Ne feledje, lehet, hogy hallott már a visszahívási pokolról. Ez alapvetően azt jelenti, hogy a visszahívások rekurzív szerkezete van (visszahívások a visszahívásokon belül és így tovább). Ez nem praktikus.

Példa

Tegyük fel, hogy Elon Musknak a SpaceX-nél olyan funkcionalitásra van szüksége, amely egy gombnyomásra felgyújtja a Falcon Heavy 27 Merlin motorját (a világ legerősebb rakétáját kétszerese).

ES5

ES6

Figyelje meg, hogy vár egy esemény bekövetkezésére (egy gombnyomásra), mielőtt végrehajtana egy műveletet (beindítja a motorokat). Röviden: a fireUpEngines()függvényt argumentumként (visszahívásként) adjuk át a pressButton()függvénynek. Amikor a felhasználó megnyomja a gombot, beindítja a motorokat.

Tehát itt van! A legnépszerűbb JS-fogalmak egy része egyszerűen példákkal magyarázható. Remélem, hogy ezek a fogalmak még jobban megértették a JS-t és annak működését.

Megtalál a Mediumon, ahol heti rendszerességgel publikálok. Vagy követhet a Twitteren, ahol releváns webfejlesztési tippeket és trükköket teszek közzé személyes történetekkel együtt.

PS Ha tetszett ez a cikk, és szeretnél még ilyeneket, kérlek tapsolj ❤ és oszd meg barátaiddal, ez jó karma