深入理解 ECMAScript modules:提升你的 JavaScript 技能(二)

简介: 深入理解 ECMAScript modules:提升你的 JavaScript 技能(二)

三、模块导出的写法


默认导出


在JavaScript中,可以使用export default关键字来导出一个默认成员。默认导出只能有一个。


例如:

// 默认导出
export default function myFunction() {
  // ...
}

// 或者

const myConstant = 'some value';
export default myConstant;

要导入默认导出,可以使用import语句,不需要使用大括号。


例如:

// 导入默认导出
import myFunction from './my-module.js';

// 或者

import myConstant from './my-module.js';

在导入默认导出时,如果使用了import语句,但对应的模块没有默认导出,或者使用了错误的名称,那么在运行时会出现ReferenceError错误。


行内命名导出


在JavaScript中,可以使用export关键字为模块中的成员指定一个名称,这样在导入时就可以使用这个名称来访问该成员。

例如:

// 行内命名导出
export function myFunction() {
  // ...
}

// 或者

const myConstant = 'some value';
export {myConstant as myConstantName};


在导入时,可以使用as关键字来使用原始名称或自定义名称导入成员。

例如:

// 使用原始名称导入
import {myFunction} from './my-module.js';

// 使用自定义名称导入
import {myFunction as fn} from './my-module.js';

// 使用自定义名称导入并使用别名
import {myConstantName as myConstant} from './my-module.js';

在导入时,如果使用了import语句,但对应的模块没有导出该成员,或者使用了错误的名称,那么在运行时会出现ReferenceError错误。


通过一个 export 子句批量命名导出


在JavaScript中,可以使用export关键字在一个语句中批量命名导出多个成员。

例如:

// 批量命名导出
export {myFunction, myConstant as constantName};


在导入时,可以使用import语句,并在大括号中使用原始名称或自定义名称导入成员。

例如:

// 使用原始名称导入
import {myFunction, myConstant} from './my-module.js';

// 使用自定义名称导入
import {myFunction as fn, myConstant as constant} from './my-module.js';

在导入时,如果使用了import语句,但对应的模块没有导出该成员,或者使用了错误的名称,那么在运行时会出现ReferenceError错误。


重新导出


在JavaScript中,可以使用export关键字将一个模块中导出的成员重新导出。


例如:

// 原始模块
export function myFunction() {
  // ...
}

// 重新导出
export {myFunction} from './original-module.js';

或者:

// 原始模块
export function myFunction() {
  // ...
}

// 重新导出并命名
export {myFunction as myFunctionName} from './original-module.js';

在导入时,可以使用import语句,就像导入原始模块中的成员一样。


例如:

// 导入重新导出的成员
import {myFunction} from './re-exported-module.js';

// 或者

import {myFunction as fn} from './re-exported-module.js';


在导入时,如果使用了import语句,但对应的模块没有导出该成员,或者使用了错误的名称,那么在运行时会出现ReferenceError错误。

注意,重新导出不会影响原始模块中的成员,它们在原始模块中仍然存在。

相关文章
|
7月前
|
缓存 JavaScript 前端开发
深入理解 ECMAScript modules:提升你的 JavaScript 技能(五)
深入理解 ECMAScript modules:提升你的 JavaScript 技能(五)
|
7月前
|
JavaScript 前端开发
深入理解 ECMAScript modules:提升你的 JavaScript 技能(四)
深入理解 ECMAScript modules:提升你的 JavaScript 技能(四)
|
4月前
|
JavaScript 前端开发 编译器
解锁JavaScript模块化编程新纪元:从CommonJS的基石到ES Modules的飞跃,探索代码组织的艺术与科学
【8月更文挑战第27天】随着Web应用复杂度的提升,JavaScript模块化编程变得至关重要,它能有效降低代码耦合度并提高项目可维护性及扩展性。从CommonJS到ES Modules,模块化标准经历了显著的发展。CommonJS最初专为服务器端设计,通过`require()`同步加载模块。而ES Modules作为官方标准,支持异步加载,更适合浏览器环境,并且能够进行静态分析以优化性能。这两种标准各有特色,但ES Modules凭借其更广泛的跨平台兼容性和现代语法逐渐成为主流。这一演进不仅标志着JavaScript模块化的成熟,也反映了整个JavaScript生态系统的不断完善。
54 3
|
3月前
|
存储 JavaScript 前端开发
[JS] ES Modules的运作原理
【9月更文挑战第16天】ES Modules(ECMAScript Modules)是 JavaScript 中的一种模块化开发规范,适用于浏览器和 Node.js 环境。它通过 `export` 和 `import` 关键字实现模块的导出与导入。模块定义清晰,便于维护和测试。JavaScript 引擎会在执行前进行静态分析,确保模块按需加载,并处理循环依赖。ES Modules 支持静态类型检查,现代浏览器已原生支持,还提供动态导入功能,增强了代码的灵活性和性能。这一规范显著提升了代码的组织和管理效率。
|
7月前
|
缓存 JavaScript 前端开发
JavaScript模块化:CommonJS与ES Modules的对比与使用
【4月更文挑战第22天】本文探讨了JavaScript模块化的两种规范——CommonJS和ES Modules。CommonJS适用于Node.js,通过`require`同步加载模块,而ES Modules(ES6模块)用于前端,支持异步加载和静态导入导出。CommonJS有缓存,ES Modules无缓存。在选择时,Node.js环境常用CommonJS,但趋势正转向ES Modules,前端项目推荐使用ES Modules以利用其优化性能的优势。
|
7月前
|
JavaScript 前端开发 开发者
深入理解 ECMAScript modules:提升你的 JavaScript 技能(六)
深入理解 ECMAScript modules:提升你的 JavaScript 技能(六)
|
7月前
|
JavaScript 前端开发
深入理解 ECMAScript modules:提升你的 JavaScript 技能(三)
深入理解 ECMAScript modules:提升你的 JavaScript 技能(三)
|
7月前
|
JavaScript 前端开发 开发者
深入理解 ECMAScript modules:提升你的 JavaScript 技能(一)
深入理解 ECMAScript modules:提升你的 JavaScript 技能(一)
node Express.js node:internal/modules/cjs/loader:988 throw err; ^ Error: Cannot find module ‘
node Express.js node:internal/modules/cjs/loader:988 throw err; ^ Error: Cannot find module ‘
1129 0
node Express.js node:internal/modules/cjs/loader:988 throw err; ^ Error: Cannot find module ‘
【Error】This dependency was not found: * core-js/modules/es.error.cause.js in ./node_modules/@babel
【Error】This dependency was not found: * core-js/modules/es.error.cause.js in ./node_modules/@babel