Moduły w JavaScript

Moduły (Modules)

JavaScriptowe moduły pozwalają na dzielenie kodu na oddzielne pliki.

co ułatwia utrzymanie biblioteki kodu.

Moduły są używane import polecenia importowanego z pliku zewnętrznego.

Moduły zależą od <script> znacznika w type="module".

Przykład

<script type="module">
import message from "./message.js";
</script>

Spróbuj sam

eksport

zfunkcjelubzmienneModuły mogą być przechowywane w dowolnym pliku zewnętrznym.

Eksporty mają dwa typy:nazwane eksportyiDomyślne eksporty.

Nazwane eksporty (Named Exports)

Stwórz plik o nazwie person.js i wypełnij go treścią, którą chcesz wyeksportować.

Możesz tworzyć nazwane eksporty na dwa sposoby. Jednym z nich jest tworzenie ich po kolei w liniowej wersji, a drugim jest ich一次性tworzenie na dole pliku.

Tworzenie po kolei w liniowej wersji:

person.js

export const name = "Bill";
export const age = 19;

Tworzenie一次性在文件底部：

person.js

const name = "Bill";
const age = 19;
export {name, age};

Domyślne eksporty (Default Exports)

Stwórzmy kolejny plik o nazwie message.js i użyj go do demonstrowania eksportu domyślnego.

W jednym pliku może być tylko jeden domyślny eksport.

Przykład

message.js

const message = () => {
const name = "Bill";
const age = 19;
return name + ' jest ' + age + 'lat.';
};
export default message;

Importowanie

Możesz导入 moduły do pliku na dwa sposoby, w zależności od tego, czy są to eksporty nazwane czy domyślne.

Eksport nazwany jest zbudowany za pomocą nawiasów kwadratowych. Domyślny eksport nie jest.

Importowanie z eksportu nazwanego

Importowanie eksportu nazwanego z pliku person.js:

import { name, age } from "./person.js";

Spróbuj sam

Importowanie z domyślnego eksportu

Importowanie domyślnego eksportu z pliku message.js:

import message from "./message.js";

Spróbuj sam

Uwaga

Moduły są dostępne tylko dla protokołów HTTP(s).

Strony otwarte przez protokół file:// nie mogą korzystać z importu/eksportu.