ES6 Module 的语法(十二)

ES6(ECMAScript 2015)引入了模块(Modules)的概念,使得JavaScript代码可以更容易地组织和复用。

1. export 关键字

命名导出 (Named Exports)

你可以使用 export 关键字导出多个变量、函数或类。

javascript 复制代码
// module.js
export const name = 'John';
export function greet() {
  console.log('Hello, ' + name);
}
export class Person {
  constructor(name) {
    this.name = name;
  }
}

默认导出 (Default Export)

每个模块只能有一个默认导出,用 export default 来实现。

javascript 复制代码
// module.js
export default function() {
  console.log('This is the default export');
}

2. import 关键字

导入命名导出 (Importing Named Exports)

使用 import 关键字可以导入其他模块的命名导出。

javascript 复制代码
// main.js
import { name, greet, Person } from './module.js';

console.log(name); // John
greet(); // Hello, John
const person = new Person('Jane');
console.log(person.name); // Jane

导入默认导出 (Importing Default Export)

导入默认导出时,不需要使用大括号。

javascript 复制代码
// main.js
import myFunction from './module.js';

myFunction(); // This is the default export

导入所有导出 (Importing All Exports)

可以使用 * as 语法导入一个模块的所有导出,并将其绑定到一个对象上。

javascript 复制代码
// main.js
import * as myModule from './module.js';

console.log(myModule.name); // John
myModule.greet(); // Hello, John
const person = new myModule.Person('Jane');
console.log(person.name); // Jane

3. 重新导出 (Re-Exporting)

可以从一个模块中重新导出另一个模块的导出。

javascript 复制代码
// module1.js
export const a = 1;
export const b = 2;

// module2.js
export { a, b } from './module1.js';
export const c = 3;

// main.js
import { a, b, c } from './module2.js';

console.log(a, b, c); // 1 2 3

4. 动态导入 (Dynamic Import)

ES2020引入了动态导入,使用 import() 函数可以在运行时按需加载模块。

javascript 复制代码
// main.js
async function loadModule() {
  const module = await import('./module.js');
  module.greet(); // Hello, John
}

loadModule();

5. 具有副作用的模块 (Modules with Side Effects)

一些模块在导入时会执行一些代码,这些模块被称为具有副作用的模块。

javascript 复制代码
// sideEffectModule.js
console.log('Module loaded');

// main.js
import './sideEffectModule.js'; // Module loaded

6. export 和 import 的高级用法

导出和导入时重命名

可以在导出和导入时使用 as 关键字进行重命名。

javascript 复制代码
// module.js
const name = 'John';
function greet() {
  console.log('Hello, ' + name);
}
export { name as userName, greet as sayHello };

// main.js
import { userName, sayHello } from './module.js';

console.log(userName); // John
sayHello(); // Hello, John

导出时使用默认导出和命名导出

javascript 复制代码
// module.js
export const name = 'John';
export default function() {
  console.log('This is the default export');
}

// main.js
import defaultFunction, { name } from './module.js';

console.log(name); // John
defaultFunction(); // This is the default export
相关推荐
Asort1 分钟前
JavaScript 从零开始(六):控制流语句详解——让代码拥有决策与重复能力
前端·javascript
无双_Joney20 分钟前
[更新迭代 - 1] Nestjs 在24年底更新了啥?(功能篇)
前端·后端·nestjs
在云端易逍遥22 分钟前
前端必学的 CSS Grid 布局体系
前端·css
ccnocare23 分钟前
选择文件夹路径
前端
艾小码23 分钟前
还在被超长列表卡到崩溃?3招搞定虚拟滚动,性能直接起飞!
前端·javascript·react.js
闰五月24 分钟前
JavaScript作用域与作用域链详解
前端·面试
泉城老铁28 分钟前
idea 优化卡顿
前端·后端·敏捷开发
前端康师傅28 分钟前
JavaScript 作用域常见问题及解决方案
前端·javascript
司宸29 分钟前
Prompt结构化输出:从入门到精通的系统指南
前端