ES6 - Moduły

Wprowadzenie

Rozważmy scenariusz, w którym części kodu JavaScript muszą zostać ponownie użyte. ES6 przychodzi Ci na ratunek dzięki koncepcji Modules.

Moduł organizuje powiązany zestaw kodu JavaScript. Moduł może zawierać zmienne i funkcje. Moduł to nic innego jak fragment kodu JavaScript zapisany w pliku. Domyślnie zmienne i funkcje modułu nie są dostępne do użycia. Zmienne i funkcje w module powinny być eksportowane, aby można było uzyskać do nich dostęp z innych plików. Moduły w ES6 działają tylko wstrict mode. Oznacza to, że zmienne lub funkcje zadeklarowane w module nie będą dostępne globalnie.

Eksportowanie modułu

Słowo kluczowe export może służyć do eksportowania komponentów w module. Eksport w module można sklasyfikować w następujący sposób -

Nazwane eksporty
Domyślne eksporty

Nazwane eksporty

Nazwane eksporty rozróżnia się według nazw. W module może być kilka nazwanych eksportów. Moduł może wyeksportować wybrane komponenty używając składni podanej poniżej -

Syntax 1

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

Syntax 2

Alternatywnie komponenty w module można również wyeksportować za pomocą pojedynczego słowa kluczowego export ze składnią {} powiązania, jak pokazano poniżej -

//using single export keyword

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

Domyślne eksporty

Moduły, które muszą eksportować tylko jedną wartość, mogą używać domyślnych eksportów. Dla każdego modułu może istnieć tylko jeden domyślny eksport.

Syntax

export default component_name

Jednak moduł może mieć jednocześnie domyślny eksport i wiele nazwanych eksportów.

Importowanie modułu

Aby móc korzystać z modułu, użyj import keyword. Moduł może mieć wiele plikówimport statements.

Importowanie nazwanych eksportów

Podczas importowania nazwanych eksportów nazwy odpowiednich składników muszą być zgodne.

Syntax

import {component1,component2..componentN} from module_name

Jednak podczas importowania nazwanych eksportów można zmienić ich nazwy za pomocą słowa kluczowego as. Użyj składni podanej poniżej -

import {original_component_name as new_component_name }

Wszystkie nazwane eksporty można zaimportować do obiektu za pomocą gwiazdki * operator.

import * as variable_name from module_name

Importowanie domyślnych eksportów

W przeciwieństwie do nazwanych eksportów, domyślny eksport można importować pod dowolną nazwą.

Syntax

import any_variable_name from module_name

Przykład: nazwane eksporty

Step 1 - Utwórz plik company1.js i dodaj następujący kod -

let company = "TutorialsPoint"

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

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

export {company,getCompany,setCompany}

Step 2- Utwórz plik company2.js. Ten plik zużywa komponenty zdefiniowane w pliku company1.js. Użyj dowolnej z poniższych metod, aby zaimportować moduł.

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 - Uruchom moduły za pomocą pliku HTML

Aby uruchomić oba moduły, musimy utworzyć plik html, jak pokazano poniżej, i uruchomić go na serwerze rzeczywistym. Zauważ, że powinniśmy użyćattribute type="module" w tagu 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>

Wynik powyższego kodu będzie taki, jak podano poniżej -

TutorialsPoint
TUTORIALSPOINT

Domyślny eksport

Step 1 - Utwórz plik company1.js i dodaj następujący kod -

let name = 'TutorialsPoint'

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

export default company

Step 2 - Utwórz plik company2.js. Ten plik zużywa komponenty zdefiniowane w pliku company1.js.

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

Step 3 - Wykonaj modules za pomocą HTML file

Aby uruchomić oba moduły, musimy utworzyć plik html, jak pokazano poniżej i uruchomić go na serwerze rzeczywistym. Zauważ, że powinniśmy użyćattribute type="module" w tagu 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>

Wynik powyższego kodu będzie taki, jak wspomniano poniżej -

TutorialsPoint
Google Inc

Przykład: łączenie domyślnych i nazwanych eksportów

Step 1 - Utwórz plik company1.js i dodaj następujący kod -

//named export
export let name = 'TutorialsPoint'

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

Step 2 - Utwórz plik company2.js. Ten plik zużywa składniki zdefiniowane wcompany1.jsplik. Najpierw zaimportuj domyślny eksport, a następnie nazwane eksporty.

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

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

Step 3 - Uruchom moduły za pomocą pliku 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>

Wynik powyższego kodu będzie taki, jak pokazano poniżej -

TutorialsPoint
TutorialsPoint
Mohtashim