Praktični vodič za ES6 module

ES6 moduli

Jedan od glavnih izazova prilikom izrade web-aplikacije je kako brzo možete prilagoditi veličinu i odgovoriti na potrebe tržišta. Kada se povećava potražnja (zahtjevi), povećavaju se i mogućnosti (mogućnosti). Stoga je važno imati čvrstu arhitektonsku strukturu kako bi aplikacija organski rasla. Ne želimo završiti u situacijama kada se aplikacija ne može skalirati jer je sve u aplikaciji duboko zapleteno.

Napisati kôd koji je lako izbrisati, a nije lako proširiti.
- Tef, programiranje je strašno

U ovom ćemo članku stvoriti jednostavnu nadzornu ploču pomoću ES6 modula, a zatim ćemo predstaviti tehnike optimizacije za poboljšanje strukture mapa i lakše pisanje manje koda. Pogledajmo zašto su ES6 moduli važni i kako ih učinkovito primijeniti.

JavaScript već dugo ima module. Međutim, provedene su putem knjižnica, a ne ugrađene u jezik. ES6 je prvi put da JavaScript ima ugrađene module (izvor).

TL; DR - Ako želite vidjeti praktičan primjer gdje izrađujemo nadzornu ploču pomoću ES6 modula iz izgleda arhitektonskog dizajna, prijeđite na odjeljak 4.

Evo čega ćemo se obratiti

  1. Zašto su potrebni ES6 moduli
  2. Povratak u dane kada su se skripte ručno učitavale
  3. Kako rade ES6 moduli (uvoz vs izvoz)
  4. Izradimo nadzornu ploču s modulima
  5. Tehnike optimizacije za primjer nadzorne ploče
Ako želite postati bolji web programer, pokrenuti vlastiti posao, podučavati druge ili poboljšati svoje razvojne vještine, tjedno ću objavljivati ​​savjete i trikove na najnovijim web jezicima.

1. Zašto su potrebni ES6 moduli

Pogledajmo nekoliko scenarija zašto su moduli relevantni.

Scenarij 1 - Nemojte ponovo izumiti kotač

Kao programeri, mi često rekreiramo stvari koje su već stvorene, a da ih nismo svjesni, ili kopiramo i zalijepimo stvari kako bismo smanjili vrijeme. Na kraju se zbraja, a preostaje nam x broj identičnih primjeraka razbacanih po aplikaciji. I za svaki put kada moramo nešto promijeniti, moramo to učiniti x puta, ovisno o tome koliko primjeraka imamo.

Primjer
Na primjer, zamislite tvornicu automobila koja pokušava ponovo izraditi motor svaki put kada proizvodi novi automobil ili arhitekta počevši od nule nakon svakog crteža. To nije nemoguće učiniti, ali što je onda poanta ako ne možete ponovo koristiti iskustvo koje ste stekli.

Scenarij 2 - Prepreka znanja

Ako je sustav duboko upetljan i nema dokumentacije, starim / novim programerima je teško naučiti kako aplikacija funkcionira i kako su stvari povezane.

Primjer
Na primjer, programer bi trebao biti u stanju vidjeti kakav je rezultat promjene bez nagađanja, jer u suprotnom na kraju s puno pogrešaka ne znamo odakle započeti. Rješenje je korištenje modula za inkapsulaciju ponašanja, lako možemo suziti postupak uklanjanja pogrešaka i brzo identificirati korijen problema.

Nedavno sam napisao članak o „Razvojnim programerima koji stalno žele učiti nove stvari“, sa savjetima kako poboljšati znanje.

Scenarij 3 - Neočekivano ponašanje

Izbjegavanjem razdvajanja problema (princip dizajna) može dovesti do neočekivanog ponašanja.

Primjer
Na primjer, recimo da netko povećava jačinu zvuka u automobilu i pokreću brisače vjetrobranskog stakla. To je primjer neočekivanog ponašanja, a ne nešto što želimo u našoj aplikaciji.

Ukratko, potrebni su nam moduli ES6 da bismo učinkovito mogli ponovo koristiti, održavati, odvajati i zaokruživati ​​unutarnje ponašanje od vanjskog ponašanja. Ne radi se o složenosti sustava, već u tome da možete lako skalirati i brisati stvari bez rušenja sustava.

2. Povratak u dane kada su se skripte ručno učitavale

Ako ste radili web razvoj nekoliko godina, onda ste se sigurno susreli s sukobima ovisnosti, kao što su skripte koje se ne učitavaju u ispravnom redoslijedu, ili da JS elementima stabla DOM ne može pristupiti.

Razlog je taj što se HTML na stranici učitava redom u kojem se pojavljuje, što znači da ne možemo učitati skripte prije nego što se sadržaj unutar elementa dovrši.

Na primjer, ako pokušate pristupiti elementu unutar oznake koristeći document.getElementById ("id-ime"), a element još nije učitan, pojavit će se nedefinirana pogreška. Da bismo bili sigurni da su skripte ispravno učitane, možemo upotrijebiti defer i async. Prvi će se pobrinuti da se svaka skripta učita u redoslijedu u kojem se pojavljuje, dok drugi učitava skriptu kad god postane dostupna.

Starinski način rješavanja takvog problema bio je učitavanje skripti neposredno prije elementa .

Ali dugoročno se povećava broj skripti i možda ćemo završiti s 10 i više skripti dok pokušavamo održavati sukobe verzije i ovisnosti.

Odvajanje-od-problema

Općenito, učitavanje skripti kako je gore prikazano nije dobra ideja u pogledu performansi, ovisnosti i održavanja. Ne želimo da datoteka index.html preuzme odgovornost za učitavanje svih skripti - potrebna nam je neka struktura i razdvajanje logike.

Rješenje je korištenje ES6 sintaksnih, uvoznih i izvoznih izjava, elegantan i održiv pristup koji nam omogućava da stvari razdvojimo i dostupne samo kad nam zatrebaju.

Izjave o uvozu i izvozu

Izvozna ključna riječ koristi se kada negdje želimo nešto učiniti dostupnim, a uvoz se koristi za pristup onome što je izvoz učinio dostupnim.

Pravilo palca je da biste nešto uvezli, prvo ga morate izvesti.

I što zapravo možemo izvesti?

  • Varijabla
  • Objekt doslovno
  • Razred
  • Funkcija
  • ++

Da bismo pojednostavili primjer kao što je prikazano gore, sve skripte možemo zamotati u jednu datoteku.

A zatim samo unesite skriptu app.js u naš indeks.html. Ali prvo, da bismo ga iskoristili, moramo koristiti type = "module" (izvor) kako bismo mogli koristiti uvoz i izvoz za rad s modulima.

Kao što vidite, index.html sada je odgovoran za jednu skriptu koja olakšava održavanje i razmjera. Ukratko, skripta app.js postaje naša ulazna točka koju možemo upotrijebiti za pokretanje naše aplikacije.

Napomena: Ne bih preporučio da se sve skripte učitaju u jednu datoteku, poput app.js, osim onih koje to zahtijevaju.

Sad kad smo vidjeli kako možemo koristiti izjave o uvozu i izvozu, pogledajmo kako to funkcionira pri radu s modulima.

3. Kako rade ES6 moduli

Koja je razlika između modula i komponente? Modul je skup malih neovisnih jedinica (komponenti) koje možemo ponovo upotrijebiti u svojoj aplikaciji.

Koja je svrha?

  • Inkapsulirajte ponašanje
  • Lako za rad
  • Jednostavno za održavanje
  • Lako za skaliranje

Da, to olakšava razvoj!

Pa što je zapravo komponenta?

Komponenta može biti varijabla, funkcija, klasa itd. Drugim riječima, sve što se može izvoziti izjavom o izvozu je komponenta (ili je možete nazvati blokom, jedinicom itd.).

Što je komponenta

Pa što je modul u stvari?

Kao što je spomenuto, modul je skup komponenti. Ako imamo više komponenti koje komuniciraju ili ih jednostavno moramo prikazati zajedno kako bismo tvorili integriranu cjelinu, vjerojatno vam je potreban modul.

Što je modul

Izazov je učiniti sve višekratnim

Jednom je rekao glavni inženjer s preko 30 godina iskustva u elektrotehnici, ali ne možemo očekivati ​​da će se sve ponovo upotrijebiti zbog vremena, troškova i nije sve namijenjeno ponovnoj uporabi. Bolje je ponovno koristiti u određenoj mjeri nego očekivati ​​da će se stvari ponovo koristiti 100%.

Općenito, to znači da ne moramo sve izrađivati ​​u aplikaciji. Neke su stvari namijenjene samo jednom korištenju. Pravilo je da ako vam treba nešto više od dva puta, možda je dobra ideja stvoriti modul ili komponentu.

U početku može izgledati jednostavno napraviti nešto za višekratnu upotrebu, ali zapamtite, potrebno je izvaditi komponentu iz okruženja i očekivati ​​da će raditi u drugom. Ali često moramo dijeliti dijelove kako bismo ih učinili potpuno upotrebljivim, a prije nego što to znate, stvorili ste dvije nove komponente.

Antoine, napisao je članak u kojem je opisao 3 osnovna pravila stvaranja JS komponenti za višekratnu upotrebu, koje je preporučljivo pročitati. Kad je predstavio VueJS svom timu, iskusni suradnik kaže:

To je sjajno u teoriji, ali po mom iskustvu te fantastične stvari za višekratnu upotrebu nikada se ne upotrebljavaju.

Ideja je da se ne treba sve ponovo upotrijebiti, poput gumba, polja za unos i potvrdnih okvira i tako dalje. Čitav posao stvaranja nečega za višekratnu upotrebu zahtijeva resurse i vrijeme, a često završimo sa scenarijima pretjeranog razmišljanja koji se nikada ne bi dogodili.

Predsjednik Uprave Stack Overflowa, Joel Spolsky, kaže:

50% dobro rješenje koje ljudi zapravo rješavaju više problema i preživljava duže od 99% rješenja koje nitko nema jer je u vašem laboratoriju gdje beskrajno polirate prokletstvo. Dostava je značajka. Doista važna značajka. Vaš proizvod ga mora imati.

4. Izradimo nadzornu ploču s modulima

Sada kada imamo osnovno razumijevanje kako moduli rade, pogledajmo praktičan primjer na koji ćete najvjerovatnije naići prilikom rada sa JS okvirima. Napravit ćemo jednostavnu nadzornu ploču slijedeći arhitektonski dizajn koji se sastoji od izgleda i komponenti.

Kod za primjer možete pronaći ovdje.

Korak 1 - Dizajnirajte što trebate

U većini slučajeva, programeri bi uskočili izravno u kod. Međutim, dizajn je važan dio programiranja i može vam uštedjeti puno vremena i glavobolje. Zapamtite, dizajn ne bi trebao biti savršen, već nešto što vas vodi u pravom smjeru.

To je ono što nam treba na temelju arhitektonskog dizajna.

  • Dijelovi: users.js, user-profile.js i issues.js
  • Izgledi: header.js i sidebar.js
  • Nadzorna ploča: dashboard.js

Sve komponente i izgled učitavat će se u dashboard.js, a zatim ćemo pokrenuti dashboard.js u index.js.

Arhitektonski dizajn naše nadzorne ploče

Pa zašto imamo mapu izgleda i komponenti?

Izgled nam treba jednom, na primjer statički predložak. Sadržaj unutar nadzorne ploče može se promijeniti, ali bočna traka i zaglavlje će ostati isti (a to je ono što je poznato kao izgled). Izgled može biti stranica pogreške, podnožja, stranica sa statusom i tako dalje.

Mapa komponenti namijenjena je općim komponentama koje ćemo najvjerojatnije ponovo upotrijebiti više puta.

Pri radu s modulima važno je imati čvrstu strukturu tla. Da bi se učinkovito skalirale, mape moraju imati razumna imena koja olakšavaju pronalaženje i uklanjanje pogrešaka.

Kasnije ću vam pokazati kako stvoriti dinamično sučelje, za koje je potrebno imati mape za potrebne komponente i izgleda.

Korak 2 - Postavljanje strukture mape

Kao što je već spomenuto, imamo 3 glavne mape: nadzornu ploču, komponente i izgled.

- nadzorna ploča
- komponente
- izgled
index.html
index.js (ulazna točka)

I u svakoj datoteci unutar mape izvozimo klasu.

- nadzorna ploča
    dashboard.js
- komponente
    issues.js
    korisnik-profile.js
    users.js
- izgled
    header.js
    sidebar.js
index.html
index.js (ulazna točka)

Korak 3 - implementacija

Struktura mapa je sve postavljena, pa je sljedeće što treba napraviti je stvoriti komponentu (klasu) u svakoj datoteci, a zatim je izvoziti. Konvencija koda ista je za ostale datoteke: svaka komponenta je jednostavno klasa, a metoda koja konzolira "x komponenta je učitana" gdje je x naziv komponente kako bi pokazao da je komponenta učitana.

Kreirajmo korisničku klasu, a zatim je izvozimo na sljedeći način.

Napominjemo, imamo različite mogućnosti kada se bavimo izvozom. Dakle, ideja je da možete izvoziti pojedinačne komponente ili zbirku komponenti. Na primjer, ako izvozimo klasu, možemo pristupiti metodama prijavljenim unutar stvaranja nove instance klase.

U redu, pa ako pogledate arhitektonski dijagram u koraku 1, primijetit ćete da je komponenta profila korisnika zaokružena izgledom zaglavlja. To znači da kada učitavamo izgled zaglavlja, on će učitati i komponentu korisničkog profila.

Sada kada svaka komponenta i izgled imaju izvezenu klasu, zatim je uvozimo u našu datoteku nadzorne ploče na sljedeći način:

Da bismo razumjeli što se zapravo događa u datoteci nadzorne ploče, moramo ponovo pregledati crtež u koraku 1. Ukratko, budući da je svaka komponenta klasa, moramo stvoriti novu instancu, a zatim je dodijeliti objektu. Zatim koristimo objekt za izvršavanje metoda kao što je prikazano na metodi loadDashboard ().

Trenutačno aplikacija ne prikazuje ništa jer nismo izvršili metodu loadDashboard (). Da bi to uspjelo potrebno je uvesti modul nadzorne ploče u datoteku index.js, kao što je ovaj:

A zatim konzola izlazi:

Komponente ES6 učitane

Kao što je prikazano, sve funkcionira i komponente se uspješno učitavaju. Također možemo nastaviti i stvoriti dvije instance, a zatim napraviti nešto takvo:

Koji su rezultati isti kao što je prikazano gore, ali s obzirom na to da imamo nove instance, rezultate dobivamo dva puta.

Dvije jedinstvene instance nadzorne ploče

Općenito, ovo nam omogućuje jednostavno održavanje i ponovnu upotrebu modula u potrebnim datotekama bez uplitanja u druge module. Samo stvaramo novu instancu koja kapsulira komponente.

No, kao što je ranije spomenuto, svrha je bila obuhvatiti dinamiku načina na koji možemo raditi s modulima i komponentama koristeći izvode iz uvoza i izvoza.

U većini slučajeva pri radu s JS okvirima obično imamo rutu koja može promijeniti sadržaj nadzorne ploče. Trenutačno se učitava sve poput rasporeda svaki put kada prizovemo metodu loadDashboard () što nije idealan pristup.

5. Tehnike optimizacije za primjer nadzorne ploče

Sada kada imamo osnovno razumijevanje načina rada modula, pristup zapravo nije skalabilan ili intuitivan kada se bavimo velikim aplikacijama koje se sastoje od puno komponenti.

Trebamo nešto što je poznato kao dinamično sučelje. Omogućuje nam stvaranje zbirke potrebnih komponenti i lako pristupanje njoj. Ako koristite Visual Studio Code, IntelliSense vam pokazuje koje su komponente dostupne i koju već koristite. To znači da vam nije potrebno ručno otvarati mapu / datoteku da biste vidjeli koje su komponente izvezene.

Dakle, ako imamo modul sa dvadeset komponenti, ne želimo uvoziti svaku komponentu jednu za drugom. Jednostavno želimo dobiti ono što nam treba, i to je to. Ako ste radili s imenima na jezicima kao što su C #, PHP, C ++ ili Java, primijetit ćete da je ovaj koncept slične prirode.

Evo što želimo postići:

Kao što je prikazano, imamo manje redaka koda i učinili smo to deklarativnim bez gubitka konteksta. Pogledajmo koje smo promjene napravili.

Stvorite dinamično sučelje (poznato i kao bačva)

Dinamično sučelje omogućava nam stvaranje zbirke stvari koje su nam potrebne. To je poput stvaranja okvira s alatima s našim omiljenim alatima. Važno je spomenuti da se dinamičko sučelje ne smije dodati u svaku pojedinačnu mapu, već u mape koje se sastoje od mnogih komponenti.

Oni uvelike pojednostavljuju uvoz i čine ih jasnijim. Jednostavno ne želimo imati previše barel datoteka jer je to kontraproduktivno i obično dovodi do kružnih problema ovisnosti koje ponekad mogu biti prilično škakljivi.
- Adrian Fâciu

Da bismo stvorili dinamičko sučelje, stvaramo datoteku po imenu index.js koja se nalazi u korijenu svake mape za ponovni izvoz podskupina datoteka ili komponenti koje su nam potrebne. Isti koncept funkcionira u TypeScript-u, samo promijenite vrstu iz .js u .ts poput index.ts.

Index.js je prva datoteka koja se učitava kada pristupimo prostoru korijenske mape - to je isti koncept kao index.html koji podiže naš HTML sadržaj. To znači da ne moramo izričito pisati uvoz {komponenta} iz './components/index.js', već uvesti {komponentu} iz './components.

Evo kako izgleda dinamično sučelje.

Korištenjem dinamičkog sučelja, završavamo s jednom manje korijenskom razinom pristupa, a također i manje koda.

Stvorite novu instancu u vrijeme izvršavanja

Uklonili smo četiri instance iz našeg dashboard.js, a umjesto toga stvorili smo instancu u vrijeme izvođenja kada se svaka komponenta izvozi. Ako želite odrediti naziv objekta, možete izvesti zadanu novu nadzornu ploču (), a zatim uvoziti dashView bez kovrčavih zagrade.

Kao što je prikazano, metodu možemo izravno pozvati bez potrebe za stvaranjem nove instance i također napisati manje koda. Međutim, to je osobna preferencija i slobodno možete odlučiti što je praktični slučaj za vašu aplikaciju i zahtjeve.

I na kraju, sve komponente i izgled učitavamo jednom metodom.

Zaključak

Počeo sam s namjerom da pokažem samo kratki primjer kako možete uvesti i izvoziti komponentu, ali tada sam osjetio potrebu da (gotovo) dijelim sve što znam. Nadam se da će vam ovaj članak pružiti neki uvid u to kako učinkovito upravljati ES6 modulima prilikom izrade aplikacija i stvari koje su važne u pogledu razdvojenosti (načelo dizajna).

Potoci:

  • Pomoću ES6 modula lako možemo ponovo koristiti, održavati, odvajati i enkapsulirati komponente bez promjene vanjskim ponašanjem
  • Modul je skup komponenti
  • Sastavni dio je pojedinačni blok
  • Ne pokušavajte učiniti da se sve ponovo upotrebljava jer zahtijeva vrijeme i resurse, a najčešće ga ne koristimo ponovo
  • Napravite arhitektonski dijagram prije ronjenja u kod
  • Da bi komponente bile dostupne u drugim datotekama, prvo moramo izvesti, a zatim uvesti
  • Korištenjem index.js (isti koncept za TypeScript index.ts) možemo stvoriti dinamična sučelja (barele) za brzi pristup stvarima koje trebaju s manje koda i manje hijerarhijskih staza.
  • Možete izvesti novu instancu za vrijeme izvođenja koristeći Export let objectName = new ClassName ()

Dobra vijest je da su se stvari promijenile i krećemo prema komponentnoj paradigmi koja se može ponovo koristiti. Pitanje je kako možemo ponovo koristiti ne samo običan JS kod, već i HTML elemente na praktičan i intuitivan način. Čini se da nam ES6 moduli u kombinaciji s web komponentama mogu upravo dati ono što nam je potrebno za izgradnju uspješnih i skalabilnih aplikacija.

Evo nekoliko članaka koje sam napisao o web-ekosustavu, zajedno s osobnim programskim savjetima i trikovima.

  • Usporedba između Angular i React
  • Kaotičan um dovodi do kaotičnog koda
  • Programeri koji stalno žele učiti nove stvari
  • Naučite ove osnovne web-koncepte
  • Povećajte svoje vještine ovim važnim JavaScript metodama
  • Program brže kreirajte prilagođene bash naredbe

Možete me naći na Mediumu gdje objavljujem na tjednoj osnovi. Ili me možete slijediti na Twitteru, gdje objavljujem relevantne savjete i trikove za web razvoj zajedno s osobnim dev pričama.

Ako ste uživali u ovom članku i želite još ovakvog, klanjajte (❤) i podijelite s prijateljima ili kolegama, to je dobra karma.