ES6 - Moduli

introduzione

Considera uno scenario in cui parti del codice JavaScript devono essere riutilizzate. ES6 viene in tuo soccorso con il concetto di Modules.

Un modulo organizza un insieme correlato di codice JavaScript. Un modulo può contenere variabili e funzioni. Un modulo non è altro che un pezzo di codice JavaScript scritto in un file. Per impostazione predefinita, le variabili e le funzioni di un modulo non sono disponibili per l'uso. Le variabili e le funzioni all'interno di un modulo dovrebbero essere esportate in modo che sia possibile accedervi dall'interno di altri file. I moduli in ES6 funzionano solo instrict mode. Ciò significa che le variabili o le funzioni dichiarate in un modulo non saranno accessibili globalmente.

Esportazione di un modulo

La parola chiave export può essere utilizzata per esportare componenti in un modulo. Le esportazioni in un modulo possono essere classificate come segue:

  • Esportazioni denominate
  • Esportazioni predefinite

Esportazioni denominate

Le esportazioni denominate si distinguono per i loro nomi. Ci possono essere diverse esportazioni con nome in un modulo. Un modulo può esportare componenti selezionati utilizzando la sintassi fornita di seguito:

Syntax 1

//using multiple export keyword
export component1
export component2
...
...
export componentN

Syntax 2

In alternativa, i componenti di un modulo possono anche essere esportati utilizzando una singola parola chiave di esportazione con la sintassi di associazione {} come mostrato di seguito -

//using single export keyword

export {component1,component2,....,componentN}

Esportazioni predefinite

I moduli che devono esportare un solo valore possono utilizzare esportazioni predefinite. Può esserci una sola esportazione predefinita per modulo.

Syntax

export default component_name

Tuttavia, un modulo può avere un'esportazione predefinita e più esportazioni con nome contemporaneamente.

Importazione di un modulo

Per poter consumare un modulo, usa il import keyword. Un modulo può avere più fileimport statements.

Importazione di esportazioni con nome

Durante l'importazione di esportazioni con nome, i nomi dei componenti corrispondenti devono corrispondere.

Syntax

import {component1,component2..componentN} from module_name

Tuttavia, durante l'importazione delle esportazioni denominate, possono essere rinominate utilizzando la parola chiave as. Usa la sintassi indicata di seguito:

import {original_component_name as new_component_name }

Tutte le esportazioni con nome possono essere importate su un oggetto utilizzando l'asterisco * operator.

import * as variable_name from module_name

Importazione delle esportazioni predefinite

A differenza delle esportazioni con nome, un'esportazione predefinita può essere importata con qualsiasi nome.

Syntax

import any_variable_name from module_name

Esempio: esportazioni con nome

Step 1 - Crea un file company1.js e aggiungi il seguente codice -

let company = "TutorialsPoint"

let getCompany = function(){
   return company.toUpperCase()
}

let setCompany = function(newValue){
   company = newValue
}

export {company,getCompany,setCompany}

Step 2- Crea un file company2.js. Questo file utilizza i componenti definiti nel file company1.js. Utilizzare uno dei seguenti approcci per importare il modulo.

Approach 1

import {company,getCompany} from './company1.js'

console.log(company)
console.log(getCompany())

Approach 2

import {company as x, getCompany as y} from './company1.js'

console.log(x)
console.log(y())

Approach 3

import * as myCompany from './company1.js'

console.log(myCompany.getCompany())
console.log(myCompany.company)

Step 3 - Esegui i moduli utilizzando un file HTML

Per eseguire entrambi i moduli è necessario creare un file html come mostrato di seguito ed eseguirlo nel server live. Nota che dovremmo usare ilattribute type="module" nel tag script.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
</head>
<body>
   <script src="./company2.js" type="module"></script>
</body>
</html>

L'output del codice precedente sarà come indicato di seguito:

TutorialsPoint
TUTORIALSPOINT

Esportazione predefinita

Step 1 - Crea un file company1.js e aggiungi il seguente codice -

let name = 'TutorialsPoint'

let company = {
   getName:function(){
      return name
   },
   setName:function(newName){
      name = newName
   }
}

export default company

Step 2 - Crea un file company2.js. Questo file utilizza i componenti definiti nel file company1.js.

import c from './company1.js'
console.log(c.getName())
c.setName('Google Inc')
console.log(c.getName())

Step 3 - Esegui il file modules utilizzando un file HTML file

Per eseguire entrambi i moduli dobbiamo creare un file html come mostrato di seguito ed eseguirlo nel server live. Nota che dovremmo usare ilattribute type="module" nel tag script.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
</head>
<body>
   <script src="./company2.js" type="module"></script>
</body>
</html>

L'output del codice sopra sarà come indicato di seguito -

TutorialsPoint
Google Inc

Esempio: combinazione di esportazioni predefinite e con nome

Step 1 - Crea un file company1.js e aggiungi il seguente codice -

//named export
export let name = 'TutorialsPoint'

let company = {
   getName:function(){
      return name
   },
   setName:function(newName){
      name =newName
   }
}
//default export
export default company

Step 2 - Crea un file company2.js. Questo file utilizza i componenti definiti incompany1.jsfile. Importare prima l'esportazione predefinita, seguita dalle esportazioni denominate.

import c, {name} from './company1.js'

console.log(name)
console.log(c.getName())
c.setName("Mohtashim")
console.log(c.getName())

Step 3 - Esegui i moduli utilizzando un file HTML

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
   </head>
   <body>
      <script src="company2.js" type="module"></script>
   </body>
</html>

L'output del codice sopra sarà come mostrato di seguito -

TutorialsPoint
TutorialsPoint
Mohtashim