Karakteristike ES6 modula

es6 modul

Sa novom verzijom JavaScript-a ES6 dolazi integrisana podrška za modularno programiranje.

  • Podržava module koji se smeštaju u datoteke – jedan modul po datoteci
  • Moduli su jedinstveni primerci, svaki modul se izvršava samo jednom (singleton model).
  • ES6 moduli mogu da rade i sinhrono i asihrono.
  • Podržava “cyclic dependencies”.
  • Sintaksa je još kompaktnija od CommonJS
  • ES moduli imaju statičku strukturu. Pošto je struktura modula nepromenjiva, često je dovoljno da se pregleda kod i shvati šta se gde importuje. Ovo nije slučaj kod dinamičke strukture, gde je često potrebno da se kod izvrši da bi se videlo šta se importuje. Eventualne greške mogu da se nadju i u vreme kompajliranja (sa modul bundler-om), jer se sve radnje vezane za import i export modula odredjuju u tom trenutku.
  • Svi uvezeni elementi su nepromenjivi iz modula koji importuje. Svaka operacija dodeljivanja vrednosti uveženom elementu bi prouzrokovala grešku (TypeError).
  • ES6 se ne pravi kopiju svojstva već deli vezu na to svojstvo. Ovo važi čak i za deljenje primitivnih svojstava (“broj” ili “string”). U narednom primeru vidimo da ukoliko matični modul promeni vrednost deljenog svojstva (promena je izvršena metodom iz matičnog modula!), modul koji je importovao to svojsto “vidi” tu promenu.
    PRIMER
    proracun.js

    main.js

    Importujemo sve elemente koji su eksportovani iz modula “proracun.js”

    Ako bi se sada koristila promenjiva “brojač” u nekom “trećem” modulu imala bi vrednost 2.

Export modula

Standardno eksportovanje

Standardno eksportovanje se postiže stavljanjem rezervisane reči ispred deklaracije promenjive (funkcije):

Imenovano eksportovanje

Imenovano (named) eksportovanje je sintaksa kojom na kraju modula definišemo elemente koji su za eksport. Naziv je potekao iz činjenice da se za definisanje eksportovanih elemenata, koriste njihova imena.

Podrazumevano eksportovanje

Preporuka je da se pri eksportovanju nekog modula definiše deo modula koji se podrazumevano eksportuje. Podrazumevano eksportovanje se definiše sa rezevisanom reči default. U jednom modulu je dozvoljen samo jedan podrazumevani eksport. Eksportovani deo se u drugom modulu koristi pod imenom “default”.

Defaultni eksport može da se definiše i sa “imenovanom formom” uz dodatkak ključne reči “as”:

NAPOMENA: nije dozvoljena ovakva sintaksa (klasičan primer nedoslednosti sintakse ES6):

Re-eksportovanje

Re-eksporting znači eksportovanje iz modula koji nije matični.

Preporuke

Ukoliko modul ima priličan broj “razbacanih” elemenata koji se eksportuju, preporuka je da se na vrhu modula jasno i pregledeno definiše API kao na sledećem primeru:

Import modula

Karakteristike

  • Deklaracija promenjive ili funkcije se u fazi kompajliranja diže na početak domena (hoisting). Zbog toga pozivanje funkcije u narednom primeru neće izbacivati grešku:
  • Svi uvezeni elementi su nepromenjivi iz modulua koji importuje. Svaka operacija dodeljivanja vrednosti u okviru modula (koji importuje) bi prouzrokovala grešku (TypeError). Medjutim u slučaju objekta možemo ga promeniti indirektno:
    PRIMER
    lib.js

    main.js

  • Nije dozvoljeno korišćenje promenjivih u import izrazu. Moduli su statični pa import ne sme da zavisi od nečega što je dobijeno u vreme izvršenja koda (runtime). Tako da je sintaksa u sledećem primeru pogrešna i vraća grešku:

  • Uslovno učitavanje modula samo sa ES6 sintaksom nije moguće. Razlog za pomenuto je to što “import” naredba mora biti uvek “top level”, što se ne dobija uvlačenjem unutar if petlje. Stoga za ovakav slučaj mora da se koristi programibilan loader – System.JS koji bi imao neku dodatnu skriptu:

Imenovani uvoz modula (named import)

Uvoz default elemenata

Importovanje podrazumevanih vrednosti se vrši jednostavnim pozivanjem imena modula ili imenskim pozivanjem.

Uvoz celog modula (Import namespace object)

Globalni import koristimo ukoliko želimo da u jednoj naredbi učitamo sve eksportovane elemente jednog modula. Import namespace (imenskog prostora) zahteva sintaksu * as.

Nakon čega su dostupni svi elementi iz modula “foo” u modulu pod “novim” imenom “bar”:

Ako je u modulu koji se exportuje bilo definisanih podrazumevanih (default) vrednosti, nakon importa celog imenskog prostora, on se poziva sa “default”:

PRIMER
proracun.js

main.js

Putešestvije do produkcije

Pošto ES6 sintaksa nije još uvek dovoljno podržana u browser-ima, potrebno je pre stavljanja u produkciju izvršiti odredjene predradnje:

  • Izbor transpilera (Babel Typescript…)
  • Izbor formata u koji želimo da prebacimo tokom transpiliranja (AMD ili CommonJS).
  • Transpiliranje koda
  • Izbor menadžera zavisnosti “modul loader” (require.js ili SystemJS) ili “modul bundler” (Browswerify ili Webpack).
  • Integracija “dependencies manager-a”

Iako je ovaj put prilično trnovit, smatra se da su ES6 moduli budućnost i da će tokom vremena istisnuti sve do sada korišćene formate, pa čak i CommonJS na serverskoj strani.

Podelite:

Ostavite komentar