esModule常用的导入导出语法

本文详细介绍了JavaScript中的两种导出和导入方式,包括export声明语句导出、export大括号导出以及import的别名导入和通配符导入。通过实例展示了如何在不同场景下使用这些导出导入方式来组织和使用代码模块。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

导出方式一: export + 声明语句

例:(假设这是一个js文件){

export const name:'yyy'

export const age:18

}

导出方式二:export {(声明标识)}

例:(假设这是一个js文件){

const  name:'yyy'

const  age:18

function foo(){}

export { //这里要注意有大括号并不表示是一个对象哦 这是他的语法,所以里面不要写键值对

name,

age,

foo

}

}

导入方式二:起别名

例:

import {name as yName,age as yAge,foo as yFoo} from './xxx.js'

导入方式三:将导出的所以内容放到一个通配符标识符 '*'中

例:

import * as yyy from './xxx.js'

使用案列:

console.log(yyy.name) //取xxx.js中的元素

yyy.foo() //运行xxx.js中的方法

### ECMAScript 模块 (ESM) 的语法 #### 导入模块 为了导入其他文件中的功能,可以使用 `import` 关键字。这允许开发者按需加载特定的功能或整个模块。 ```javascript // 导入默认导出 import myDefaultExport from './myModule.js'; // 导入命名导出 import { namedExport } from './myModule.js'; // 同时导入默认和命名导出 import myDefaultExport, { namedExport } from './myModule.js'; ``` 当需要给导入的对象指定不同的名称时,可以通过 `as` 来实现重命名[^1]。 ```javascript import { originalName as newName } from './myModule.js'; ``` 对于希望一次性导入多个命名导出的情况,也可以采用通配符的方式: ```javascript import * as allExports from './myModule.js'; console.log(allExports.namedExport); ``` #### 动态导入 动态导入使得可以在运行时决定要加载哪个模块,这对于优化性能非常有用,因为它支持懒加载特性。 ```javascript const moduleSpecifier = './dynamicImportedModule.js'; let dynamicModule; (async function () { dynamicModule = await import(moduleSpecifier); })(); ``` #### 导出模块 定义好函数、类或其他可共享的内容之后,就可以通过 `export` 将其暴露出去供其它地方使用。 ```javascript // 单独导出 export const myFunction = () => {}; // 默认导出 export default class MyClass {} // 组合导出 export { myFunction }; ``` 如果想要在一个文件里重新导出来自另一个文件的成员,则可以直接这样做而不必先声明再导出: ```javascript export { someFeature } from 'someLibrary'; // 转发导出 ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值