了解 JavaScript 中的匯出和匯入-js教程-PHP中文網

了解 JavaScript 中的匯出和匯入

Mary-Kate Olsen

發布： 2024-11-03 05:51:30

原創

213 人瀏覽過

Understanding Exports and Imports in JavaScript

在 JavaScript 中，模組是獨立的程式碼單元，可以使用匯出將資產公開給其他模組，並使用匯入使用來自其他模組的資產。這種機制對於在現代 JavaScript 應用程式中建立模組化和可重複使用的程式碼至關重要。

預設導出

一個模組只能有一個預設導出。
要匯出預設資源，請在匯出的實體之前使用 default 關鍵字。
要匯入預設匯出，可以直接將其指派給變量，而無需指定匯出名稱：

// Exporting a default asset
export default function greet(name) {
  console.log(`Hello, ${name}!`);
}

// Importing the default export
import greet from './myModule';

登入後複製

命名導出

一個模組可以有多個命名導出。
要匯出命名資產，請在匯出的實體之前使用匯出關鍵字並為其命名。
要匯入命名匯出，您必須指定要匯入的資產的名稱：

// Exporting named assets
export function greet(name) {
  console.log(`Hello, ${name}!`);
}

export function farewell(name) {
  console.log(`Goodbye, ${name}!`);
}

// Importing named exports
import { greet, farewell } from './myModule';

登入後複製

結合預設導出與命名導出

您可以在單一模組中同時擁有預設導出和命名導出：

export default function greet(name) {
  console.log(`Hello, ${name}!`);
}

export function farewell(name) {
  console.log(`Goodbye, ${name}!`);
}

登入後複製

要匯入預設匯出和命名匯出：

import greet, { farewell } from './myModule';

登入後複製

要記住的重點

導出用於公開模組中的資產。
import 用於消耗其他模組的資源。
一個模組只能有一個預設導出。
命名匯出可以單獨或集體匯入。
用於導入的名稱是任意的，不必與導出模組中使用的名稱相符。

實際範例

考慮一個 React 元件：

import React from 'react';

export default function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

登入後複製

在此範例中，Greeting 元件被匯出為預設匯出。可以匯入並在其他元件中使用：

import Greeting from './Greeting';

function MyComponent() {
  return <Greeting name="Alice" />;
}

登入後複製

透過了解匯出和匯入，您可以有效地組織和重複使用 JavaScript 專案中的程式碼。

以上是了解 JavaScript 中的匯出和匯入的詳細內容。更多資訊請關注PHP中文網其他相關文章！