ES6 (ECMAScript 2015) 為 JavaScript 引入了標準化模組系統,徹底改變了我們組織和共享程式碼的方式。在本文中,我們將探討 ES6 導入的來龍去脈,提供真實範例和示範項目來說明它們的強大功能和靈活性。
ES6 中導入的基本語法是:
import { something } from './module-file.js';
這會從同一目錄中的檔案 module-file.js 匯入一個名為 Something 的命名匯出。
命名匯出可讓您從模組匯出多個值:
// math.js export const add = (a, b) => a + b; export const subtract = (a, b) => a - b; // main.js import { add, subtract } from './math.js'; console.log(add(5, 3)); // Output: 8 console.log(subtract(10, 4)); // Output: 6
預設導出為模組提供主要導出值:
// greet.js export default function greet(name) { return `Hello, ${name}!`; } // main.js import greet from './greet.js'; console.log(greet('Alice')); // Output: Hello, Alice!
您可以在單一模組中組合命名導出和預設導出:
// utils.js export const VERSION = '1.0.0'; export function helper() { /* ... */ } export default class MainUtil { /* ... */ } // main.js import MainUtil, { VERSION, helper } from './utils.js'; console.log(VERSION); // Output: 1.0.0 const util = new MainUtil(); helper();
您可以重新命名匯入以避免命名衝突:
// module.js export const someFunction = () => { /* ... */ }; // main.js import { someFunction as myFunction } from './module.js'; myFunction();
您可以將模組中的所有匯出匯入為單一物件:
// module.js export const a = 1; export const b = 2; export function c() { /* ... */ } // main.js import * as myModule from './module.js'; console.log(myModule.a); // Output: 1 console.log(myModule.b); // Output: 2 myModule.c();
動態匯入可讓您按需載入模組:
async function loadModule() { const module = await import('./dynamicModule.js'); module.doSomething(); } loadModule();
// Button.js import React from 'react'; export default function Button({ text, onClick }) { return <button onClick={onClick}>{text}</button>; } // App.js import React from 'react'; import Button from './Button'; function App() { return <Button text="Click me" onClick={() => alert('Clicked!')} />; }
// database.js import mongoose from 'mongoose'; export async function connect() { await mongoose.connect('mongodb://localhost:27017/myapp'); } // server.js import express from 'express'; import { connect } from './database.js'; const app = express(); connect().then(() => { app.listen(3000, () => console.log('Server running')); });
讓我們建立一個簡單的任務管理器來示範 ES6 導入的實際操作:
// task.js export class Task { constructor(id, title, completed = false) { this.id = id; this.title = title; this.completed = completed; } toggle() { this.completed = !this.completed; } } // taskManager.js import { Task } from './task.js'; export class TaskManager { constructor() { this.tasks = []; } addTask(title) { const id = this.tasks.length + 1; const task = new Task(id, title); this.tasks.push(task); return task; } toggleTask(id) { const task = this.tasks.find(t => t.id === id); if (task) { task.toggle(); } } getTasks() { return this.tasks; } } // app.js import { TaskManager } from './taskManager.js'; const manager = new TaskManager(); manager.addTask('Learn ES6 imports'); manager.addTask('Build a demo project'); console.log(manager.getTasks()); manager.toggleTask(1); console.log(manager.getTasks());
要執行此演示,您需要使用支援 ES6 模組的 JavaScript 環境,例如帶有 --experimental-modules 標誌的 Node.js 或帶有 webpack 或 Rollup 等捆綁程式的現代瀏覽器。
ES6 導入提供了一種強大而靈活的方式來組織 JavaScript 程式碼。透過了解各種匯入和匯出語法,您可以建立更模組化、可維護且高效的應用程式。此處提供的演示項目和實際範例應該為您在自己的專案中使用 ES6 導入奠定堅實的基礎。
在決定如何建立模組和導入時,請記住始終考慮專案的具體需求。快樂編碼!
以上是ESavaScript 的細節)使用真實範例和示範專案導入。的詳細內容。更多資訊請關注PHP中文網其他相關文章!