Trascrizione: (click per espandere)

salve a tutti in questo video parleremo
dei moduli
i moduli è una maniera per importare
codice javascript da un file esterno
nella nostra pagina web ed è stato
introdotto con l'ecmascript 6
se vi ricordate nel primo video della
sezione 2 in cui parlavo di come
inserire codice javascript in una
pagina web accennavo ai moduli però
dicevo che non ne avrei parlato perché
nessun browser li supportava
correntemente adesso è passato un po
di tempo da quel video e i browser
hanno cominciato a implementare questa
nuova funzionalità e quindi andiamo a
vedere come si possono usare i moduli
allora io qui ho una normalissima pagina
html e poi ho già creato per il
momento è vuoto uno script1.js esterno
e vado a inserirci diciamo una variabile
la chiamo mia stringa mettiamo valore
script 1 ecco qui poi ci metto anche una
funzione mia funzione
diciamo che fa solo un output questa qui
ok adesso se vi ricordate per
importare codice javascript da un file
esterno nella pagina web si usava questa
questo metodo qui tag script attributo
source e script è il nome del file
eccolo qui e tutto funzionava
perfettamente io potevo andare a usare
il codice che c'era nel file
esterno per esempio io posso andare a
utilizzare console.log andiamo a vedere la
mia stringa ecco qui e come
vedete io qui riesco a utilizzare la
variabile che è stata dichiarata in
un file esterno e stessa cosa posso fare
per una funzione la mettiamo qui mia
funzione e come vedete tutto funziona
perfettamente
c'era un problema a volte se io per
esempio volevo andare a modificare
document.getElementById il
contenuto di un tag html eccolo qua
adesso io voglio come vedete sono andato
a prendere l'elemento html display e ci
ho messo inserito un nuovo testo e
funziona tutto perfettamente però se
avessi importato questo script
non dopo il mio tag html ma prima
per esempio dalla mia head avrei avuto
questo errore perché
il mio browser era ancora fermo qui
quando io dal mio file js volevo
cominciare andare a modificare un
elemento della mia pagina che non era
ancora stato letto dal mio browser e
quindi mi diceva no c'è un errore quindi
si poteva risolvere questo problema
inserendo il file esterno dopo gli
elementi della nostra pagina html oppure
utilizzando l'attributo defer e come
vedete funziona perfettamente io vado a
solo a dire browser ok io voglio
importare questo però lo voglio
importare dopo che tu hai letto tutti
gli elementi della mia pagina html ok adesso puoi importare il mio codice
javascript un altro problemino
di importare file esterni in questa
maniera è che tutto quello che vado ad
importare proprietà e metodi vengono
aggiunti al mio oggetto window e vi
ricordate l'oggetto window è tutta la
mia pagina web
se io per esempio adesso vi faccio
vedere vado a visualizzare il mio
oggetto window
allora
questo qua il mio già di window e
andiamo a vedere i suoi metodi e
come vedete la mia funzione
che ho creato nel mio file script1.js qui
fa parte dei metodi dell'oggetto window
e se avessi invece di usare let o
const avessi usato la keyword var tra
le proprietà del mio oggetto window
avrei anche la mia stringa che
diventa una proprietà dell'oggetto
window e quindi è una cosa che se si può
evitare è meglio evitare quindi adesso
vi faccio vedere come si lavora coi
moduli allora
innanzitutto i moduli perché una
pagina web riesca a lavorare con un
modulo questa pagina web deve essere inserita dentro a un server se
non vi ricordate come si lavora coi
server vi rimando al primo video della
sezione 5 di questo tutorial un altro
fattore positivo di usare i moduli è che
i moduli by default lavorano in
strict mode
se non vi ricordate cos'è lo strict mode
andate a vedere il primo video della
sezione 9 i moduli vengono caricati in
maniera differita automaticamente quindi
non serve più aggiungere l'attributo defer perché automaticamente i moduli
sono differiti
e i moduli rispettano lo scope della
pagina quindi non vengono aggiunti a
l'oggetto window se non ricordate cosa e'
lo scope andatevi a vedere il video 6
della sezione 2
adesso andiamo a creare un modulo allora
come io vado a copiare lo stesso codice
che avevo nel mio script 1 lo vado a
copiare e mettere nel mio script 2
rimettiamo let qui e qui scriviamo 2
ok salviamo il file per
potere andare a usare il codice
javascript che c'è dentro a questo file
devo esportare proprietà
e funzioni andiamo a vedere
come si può esportare per esportare si
usa la keyword export in questa maniera
qui quindi io vado a dire da questo file
script 2 js voglio andare ad esportare
la variabile mia stringa e la
funzione mia funzione
ok adesso è nella mia pagina web devo
andare a importare
questa variabile e questa funzione allora
innanzitutto si usa sempre il tag script
però non si usa più l'attributo source come avevo fatto prima si dice si
deve andare dire ok io voglio usare un
modulo quindi si usa l'attributo type e
il valore module e adesso vi faccio
vedere come si può importare quello che
sto esportando dal file js allora ci
sono diverse maniere per importare
per importare
variabili e metodi allora c'è il metodo
con l'asterisco che si chiama wild card
allora si usa la keyword import
asterisco che vuol dire voglio andare a
importare tutto quello che viene
esportato dal mio file e poi si deve
dire allora il tutto quello che viene
esportato è rappresentato dal mio asterisco e poi devo andare a dire ok e lo
voglio e tutto quello che viene
esportato lo voglio andare a chiamare
con un nome che può essere valori
esportati e quindi questo qui
adesso diventerà un oggetto caro il nome
valori esportati che avrà tra le sue
proprietà
le variabili esportate dal mio script e
e tra i suoi metodi e le funzioni
esportate dal mio script poi devo
anche andare a dire da dove voglio
importare questa cosa quindi si usa
la keyword from e poi si mette il nome
del file che voglio importare solo che
non va scritto il nome in questa maniera
qui come facevo con
l'attributo source prima del nome
si deve mettere punto slash
ecco qui allora io qui sto importando
tutto quello che viene esportato da
questo file dal file script 2 js e lo
sto andando inserire in questo nuovo
oggetto che avrà varie proprietà e
metodi adesso andiamo a vedere come
usarlo allora metto console log nome
dell'oggetto punto e il nome della
sua proprietà in questo caso la
proprietà sarà chiamata mia stringa e
come vedete io qui ho risultato della
mia stringa posso andare a chiamare
anche la mia la mia funzione allora sempre
valori esportati e come vedete la mia
funzione diventa il metodo dell'oggetto
valori esportati un'altra maniera
per importare elementi esportati da un
file usando la destrutturazione se non
vi ricordate cos'è la destrutturazione
andate a vedervi il quinto video della
sezione 8
e allora ogni uso sempre la keyword
import e poi qui ci mettono le parentesi
graffe le che stanno per
rappresentare l'oggetto che andrò a
costruirmi per importare i valori dallo
script 2
sarebbe questo oggetto qua però lo vado
a destrutturare direttamente in
proprietà e metodi quindi diciamo che ho
la mia stringa e
poi c'è anche mia funzione
ecco sempre la keyword from e poi slash
script 2 js
e ancora una volta io posso andare a
vedere il valore di mia stringa
e qui posso andarmi a invocare anche la mia funzione
andiamo a vedere come vedete ancora
l'output è quello che mi aspettavo io ho
destrutturato l'oggetto passando i nomi
e delle proprietà e delle funzioni
altra maniera per importare
altra maniera per importare proprietà e
valori e metodi da un file esterno è con
destrutturazione ma posso assegnarci dei
nuovi nomi quindi sempre keyword import
parentesi graffe che sono il mio oggetto
e poi allora io voglio importare la
proprietà mia stringa però voglio
chiamarla con un nome nuovo e quindi
qui metto nuova stringa poi voglio andare
importare la funzione mia funzione però
non mi piace il nome che ha e ci metto
un altro nome e la chiamerò nuova
funzione sempre dal mio file l'esterno
script 2 js
e ancora una volta io posso andare a
fare
anzi facciamo così cambiato i nomi console log nuova stringa
e nuova funzione e come vedete
il risultato non cambia ho solo dato
degli alias nuova stringa e nuova
funzione ai nomi originali che erano
esportati dal mio file ultima maniera
per usare valori che sono esportati dal
mio file e importando il valore
di default allora non è obbligatorio
averlo però alcuni moduli
possono esportare un valore di default
per esportare un valore di default si usa la keyword export la
keyword default e poi gli si dà un
valore che ne so per esempio questo qua
un valore 100 quindi di default
questo modulo esporta cento
poi posso anche esportare proprietà
variabili e metodi però in quel caso non
sono più valori di default quindi devo
andare a dire ok voglio proprio
importarmi la mia stringa oppure voglio
proprio importarmi la mia funzione ma di
default io vado sempre ad esportare un
valore se adesso io vado a importare il
valore di default e non mi serve serve
più specificare come facevo
intanto qui lo chiamo 100 from script
2 js non mi serve più specificare i nomi
di cosa stava importando come facevo
prima
perché io vado a importare il valore di
default
quindi se adesso vado a vedere il valore
di default
ritroverò cento valori di default può
essere anche una funzione andiamo a
vedere export default
mettiamo così che mi ritorna sempre
cento ovviamente possa avere solo un
valore di default e adesso vado a
invocare la mia funzione cento che sta
esportando e come vedete io ancora ho il
mio valore di default però in questo
caso è una funzione che vado a invocare
ultima cosa io posso anche andare a
importare i moduli però non è detto che
voglio andare a lavorare con
i loro valori direttamente nella mia
pagina web e quindi io posso importare
diciamo che in questo caso voglio solo
modificare il contenuto del mio
paragrafo p quindi non mi serve più
tutta sta roba qui o comunque magari mi
serve per fare altri conteggi ma non mi
serve dentro la mia pagina web
andiamo a vedere io voglio solo a
importare vado a importare lo script 2
js però allora posso fare tutto
direttamente dentro il tag script e
quindi devo specificare che è un modulo
è che il file è questo qui è come vedete
io vado a
modificare il
contenuto del mio tag html eccolo qui
semplicissimo mi sembra di avere coperto
tutto vi lascio anche un link in
descrizione dove potete trovare la
documentazione su come utilizzare i
moduli
ricordatevi che essendo una cosa che i
browser hanno cominciato a implementare
negli ultimi tempi non tutti i browser
la supportano e comunque non tutte le
vecchie versioni dei browser la
supportano quindi dovete stanno po'
attenti e con questo è tutto ci sentiamo
alla prossima ciao