ES6 export import

本文详细介绍了ES6模块化的使用方法,包括如何通过export和import进行变量的导出与导入,探讨了命名导出、默认导出及两者结合使用的场景,并提供了一些实用的小技巧。

ES6 支持模块, 模块间可以通过引用的方式复用代码, 基本的 使用 export 导出一个变量, 使用 import 导入 一个变量

// 命名导出, 即导出的变量是带名字的
lib.js:
export a = 1
export b = 3.14
export c = ()=>{alert(‘haha’)}
class d{}
export d

// 导入时, 必须 以解包的方式 指定你要导入的变量名
app.js:
import {a,b,d} from ‘./lib’ // 后面就能直接使用 变量 a, b d 了
// 也可以用 * as 方式导入所有变量 作为 一个对象的 成员
import * as myLib from ‘./lib’ // 后面访问时就需要使用 myLib.a 或 myLib.b 等方式了

// 另外 还能使用 default 方式 作为 默认 的 导出变量, 这样导出的变量 是 没有名字的
lib.js:
export default ()=>{}
a = 2
export default a
// 导入时 需要指定一个名字
import myA from ‘./lib’

// 最后, 两种导出(命名导出 和 默认导出)可以同时出现在一个 lib.js 文件中

// 最最后
1. 使用 import * as myLib from ‘./lib’ 的方式 实际上也会导入 “默认导出”, 他放在了 myLib.default 字段中
2. lib.js 中不能出现两个 export default, 否则编译报错
3. 小技巧: 使用 export default { a, b, c } 的方式能汇合一些变量到默认导出中

### ES6 中 `export` 和 `import` 的使用教程 #### 默认导出与命名导出的区别 在 ES6 模块化编程中,有两种主要的导出方式:默认导出 (`export default`) 和命名导出 (`export`)。 对于 **默认导出** ,一个模块只能有一个默认导出项。这种方式允许开发者不依赖于具体的变量名称来导入模块[^1]: ```javascript // math.js 文件中的默认导出 export default function add(a, b) { return a + b; } ``` 而 **命名导出** 则允许多个不同实体被导出,并且这些实体可以通过它们各自的名称来进行访问。当采用这种形式时,在另一个文件里导入的时候需要加上花括号 `{}` 来指明具体想要获取的内容: ```javascript // constants.js 文件中的多个命名导出 const PI = 3.1415926; const EULER_NUMBER = 2.718; export { PI, EULER_NUMBER }; ``` #### 如何导入已导出的对象? 对应上述两种不同的导出方法,存在相应的导入语句格式。 如果目标是从其他地方引入由 `export default` 定义的功能,则可以直接利用简单的 `import` 关键字后面跟上自定义的名字即可完成操作;而对于那些通过常规 `export` 声明出来的成员来说,则需按照其原始名字包裹在大括号内进行引用: ```javascript // 导入默认导出的例子 import add from './math'; console.log(add(2, 3)); // 输出: 5 // 导入命名导出的例子 import { PI, EULER_NUMBER } from './constants'; console.log(`圆周率大约等于 ${PI}, 自然常数 e 大约等于 ${EULER_NUMBER}`); ``` 另外值得注意的是,ES6 还提供了动态加载的能力——即可以在运行期间按条件决定是否以及何时去请求特定资源。这主要是借助新的 `import()` 函数实现的,它会返回一个 Promise 对象以便处理异步逻辑[^4]: ```javascript button.addEventListener('click', () => { import('./dialogBox') .then(dialogBoxModule => dialogBoxModule.showDialog()) .catch(error => console.error('Error loading module:', error)); }); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值