Memahami Eksport dan Import dalam JavaScript

Dalam JavaScript, modul ialah unit kod serba lengkap yang boleh mendedahkan aset kepada modul lain menggunakan eksport dan menggunakan aset daripada modul lain menggunakan import. Mekanisme ini penting untuk membina kod modular dan boleh guna semula dalam aplikasi JavaScript moden.

Eksport Lalai

• Sesuatu modul hanya boleh mempunyai satu eksport lalai.
• Untuk mengeksport aset lalai, gunakan kata kunci lalai sebelum entiti yang dieksport.
• Untuk mengimport eksport lalai, anda boleh menetapkannya terus kepada pembolehubah tanpa menyatakan nama yang dieksport:

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

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

Eksport Dinamakan

• Modul boleh mempunyai berbilang eksport bernama.
• Untuk mengeksport aset bernama, gunakan kata kunci eksport sebelum entiti yang dieksport dan berikan nama itu.
• Untuk mengimport eksport bernama, anda mesti menyatakan nama aset yang ingin anda import:

// 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';

Menggabungkan Eksport Lalai dan Dinamakan

Anda boleh mempunyai kedua-dua eksport lalai dan eksport bernama dalam satu modul:

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

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

Untuk mengimport eksport lalai dan eksport bernama:

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

Perkara Penting untuk Diingat

• eksport digunakan untuk mendedahkan aset daripada modul.
• import digunakan untuk menggunakan aset daripada modul lain.
• Sesuatu modul hanya boleh mempunyai satu eksport lalai.
• Eksport bernama boleh diimport secara individu atau kolektif.
• Nama yang digunakan untuk import adalah sewenang-wenangnya dan tidak perlu sepadan dengan nama yang digunakan dalam modul yang dieksport.

Contoh Praktikal

Pertimbangkan komponen React:

import React from 'react';

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

Dalam contoh ini, komponen Ucapan dieksport sebagai eksport lalai. Ia boleh diimport dan digunakan dalam komponen lain:

import Greeting from './Greeting';

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

Dengan memahami eksport dan import, anda boleh menyusun dan menggunakan semula kod dengan berkesan dalam projek JavaScript anda.

Atas ialah kandungan terperinci Memahami Eksport dan Import dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!