Oggi, JavaScript gioca un ruolo enorme nello sviluppo di siti web. Gli sviluppatori front-end utilizzano JavaScript per creare applicazioni Web interattive. Di conseguenza, c'è stato un aumento della domanda di sviluppatori JavaScript.
Certamente, JavaScript si è evoluto nel corso degli anni. ES6 ha introdotto molte nuove funzionalità nel linguaggio. Uno di questi è un modo per condividere facilmente i codici tra i file JavaScript.
L'importazione e l'esportazione di funzioni per JavaScript sono nuove funzionalità che ti renderanno uno sviluppatore migliore. Ecco come funzionano queste funzionalità.
Che cos'è un modulo JavaScript?
Un modulo JavaScript è un file JavaScript che contiene una raccolta di codice da utilizzare. I moduli vengono generalmente scritti in file separati e importati utilizzando l'estensione importare parola chiave. Risparmia tempo e fatica perché puoi riutilizzarlo in seguito.
Ad esempio, se hai una funzione chiamata calcolaSomma(), puoi includerlo in un altro file e renderlo disponibile ovunque nel tuo progetto utilizzando l'estensione
esportare E importare Funzioni JavaScript senza problemi.Uno dei vantaggi dell'utilizzo dei moduli è che aiuta a mantenere il codice organizzato. Rende anche il tuo codice più gestibile e più facile da eseguire il debug.
Per utilizzare un file JavaScript come modulo, è necessario creare uno script nel documento HTML con a tipo="modulo".
<tipo di script="modulo" sorgente="fileName.js"></script>
Esistono due tipi di moduli:
- Moduli ECMAScript: moduli JavaScript standard e sono supportati da tutti i principali browser.
- Moduli CommonJS: sono meno recenti e non sono ampiamente supportati.
Ci concentreremo sui moduli ECMAScript qui. Se necessario, vedere il nostro introduzione a JavaScript per rispolverare le basi.
Come esportare funzioni in JavaScript
In JavaScript, le funzioni sono oggetti di prima classe che possono essere passati come argomenti oltre a essere usati da soli. L'esportazione delle funzioni è un buon modo per trasferirle in altri programmi. Viene utilizzato anche quando si desidera creare librerie riutilizzabili.
L'esportazione delle funzioni in JavaScript viene eseguita utilizzando il file esportare funzione. IL esportare function esporta una data funzione per essere utilizzata da un altro file o script. Esportando le nostre stesse funzioni, possiamo usarli liberamente in altri file o script senza preoccuparci di problemi di licenza.
Ci sono due modi per usare il esportare funzionare in modo efficiente. Li esamineremo con esempi di codice.
Supponiamo di avere un file getPersonalDetails.js che ha una funzione che restituisce il nome completo di un utente dopo un prompt input. La funzione è simile a questa:
funzionegetFullName(nome e cognome){
fullName = prompt('Qual è il tuo nome');
consolare.log (nome completo);
}
- Puoi esportare questa funzione semplicemente usando il file esportare parola chiave seguita dal nome della funzione tra parentesi graffe. Sembra così:
esportare {getFullName}; - Il secondo metodo consiste nell'aggiungere il file esportare parola chiave appena prima di dichiarare la funzione.
esportarefunzionegetFullName (nome e cognome){...}
È possibile esportare più funzioni utilizzando il primo metodo. Questo viene fatto includendo i nomi delle funzioni desiderate tra parentesi graffe. Le funzioni sono separate da una virgola.
Ad esempio: supponiamo di avere tre funzioni in our getPersonalDetails.js file - getNomeCompleto(),getEmail(), getDob(). È possibile esportare le funzioni aggiungendo la seguente riga di codice:
esporta {getFullName, getEmail, getDob};
Come importare funzioni in JavaScript
Per utilizzare un modulo, devi prima importarlo. Qualsiasi funzione può essere importata utilizzando un riferimento a percorso completo.
L'importazione delle funzioni è abbastanza semplice. JavaScript ha una funzione integrata per importare le tue funzioni da altri file. Se vuoi accedere a quelle funzioni da altri moduli, è una buona idea includere una dichiarazione di funzione per ciascuna delle tue utilità.
Una funzione da importare è già esportata nel suo file originale.
È possibile importare funzioni da un file diverso utilizzando l'estensione importare funzionalità delle parole chiave. Importare ti permette di scegliere quale parte di un file o modulo caricare.
Ecco come importare il nostro getFullName funzione da getPersonalDetails.js:
importare {getFullName} da './getPersonalDetails.js'Ciò renderà questa funzione disponibile per l'uso nel nostro file corrente.
Per importare più funzioni, le funzioni da importare sono incluse tra parentesi graffe. Ognuno è separato da una virgola (,).
importare {getFullName, getEmail, getDob} da './getPersonalDetails.js'C'è un altro modo per usare il importare funzionalità. Questo ci permette di importare tutte le esportazioni in un particolare file. È fatto usando il importa * come sintassi.
Puoi importare tutte le esportazioni nel nostro getPersonalDetails.js aggiungendo la seguente riga di codice:
importare * COME personalDettagliModulo da './getPersonalDetails.js'Quanto sopra creerà un oggetto chiamato personalDettagliModulo.
Questo è solo un nome di variabile, puoi chiamarlo qualsiasi cosa.
Questo oggetto contiene tutte le esportazioni nel nostro getPersonalDetails.js. Le funzioni sono memorizzate in questo oggetto e sono accessibili nel modo in cui si accede a qualsiasi proprietà dell'oggetto.
Ad esempio, possiamo accedere al file getFullName funzione aggiungendo la seguente riga di codice
personalDettagliModulo.getNomeCompleto();Cos'è l'esportazione predefinita?
Esporta predefinito è un'eccezionale funzionalità di esportazione. Viene utilizzato se solo una variabile viene esportata da un file. Viene anche utilizzato per creare un valore di fallback per un file o un modulo.
Di seguito è riportato un esempio in cui abbiamo utilizzato il getFullName funzione di default:
esportarepredefinitofunzionegetFullName (nome e cognome){...}Non puoi avere più di un valore come predefinito in ogni modulo o file.
Una funzione utilizzata come predefinita viene importata in modo diverso. Ecco come importare il nostro getFullName funzione utilizzata come predefinita:
importare nome e cognome da './getPersonalDetails.js'Ecco le differenze:
- Non ci sono parentesi graffe attorno al valore importato, nome e cognome.
- nome e cognome ecco solo un nome di variabile. Memorizza il valore di qualunque sia la funzione predefinita.
Potenzia le tue funzioni JavaScript
I moduli JavaScript sono parti di codice che possono essere riutilizzate in altre parti del codice, utilizzando le funzioni JavaScript di importazione ed esportazione. Di solito sono scritti in file separati e importati usando la parola chiave import. Uno dei vantaggi dell'utilizzo dei moduli è che aiuta a mantenere il codice organizzato. Rende anche il tuo codice più gestibile e più facile da eseguire il debug.
