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
相关推荐
万少5 分钟前
可可图片编辑 HarmonyOS(5)滤镜效果
前端
还是大剑师兰特31 分钟前
ES6 面试题及详细答案 80题 (55-61)-- 类与继承
es6·大剑师·es6面试题
Yvonne爱编码36 分钟前
后端编程开发路径:从入门到精通的系统性探索
java·前端·后端·python·sql·go
GIS之路2 小时前
GDAL 读取遥感影像数据
前端
IT_陈寒3 小时前
Spring Boot 3.2 新特性全解析:这5个性能优化点让你的应用提速50%!
前端·人工智能·后端
携欢3 小时前
PortSwigger靶场之Stored DOM XSS通关秘籍
前端·xss
正义的大古3 小时前
OpenLayers数据源集成 -- 章节八:天地图集成详解
开发语言·javascript·ecmascript·openlayers
LDM>W<3 小时前
Electron下载失败
前端·javascript·electron
EndingCoder3 小时前
Electron 新特性:2025 版本更新解读
前端·javascript·缓存·electron·前端框架·node.js·桌面端
BillKu3 小时前
Vue3 中使用 DOMPurify 对渲染动态 HTML 进行安全净化处理
前端·安全·html