ES6模块之export和import教程

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ES6模块之export和import教程相关的知识,希望对你有一定的参考价值。

一、ES6中的模块
ES6中的模块即使一个包含JS代码的文件,在这个模块中所有的变量都是对其他模块不可见的,除非我们导出它。ES6的模块系统大致分为导出(export)和导入(import)两个模块。

二、导入的具体使用

场景1:只想导入源模块的部分内容
假设a.js是以如下方式导出的

// a.js
export var num = 100
export var name = ‘王小明‘

那么如果我们只需要a模块的num,就应该按下面的方式导入它

// b.js
import {num} from ‘./a.js‘
console.log(num) // 100

此处的模块导入利用了ES6的解构方式

场景2:不满意源模块所导出的变量或方法的名称,想要为它们另起名称
假设a.js中有一个名称如此晦涩的变量gddhauabsg

// a.js
export var gddhauabsg = 100

忍不住想要重命名这个变量的名称,但是又无权或不想修改源模块的话,那么不妨这么做

// b.js
// 如此,我们就可以在b.js中愉快的使用num了
import {gddhauabsg as num} from ‘./a.js‘
console.log(num) // 100

场景3:想要把源模块的所有导出都导入进来,但偏偏源模块不是以export default方式导出的
假设a模块将每个变量都单独,且声明时立即导出

// a.js
export var num = 100
export var name = ‘王小明‘

那么我们就要这样导入a的所有导出

// b.js
import * as moduleA from ‘./a.js‘
console.log(moduleA.num)  // 100
console.log(moduleA.name) // ‘王小明‘

解释一哈:*代表源模块(除去export default)的所有导出的集合,该集合类似Object类型,*就相当于{num: 100, name: ‘王小明‘},所以在源模块没有使用export default导出时,我们就可以使用上面的方式导入源模块的所有导出

场景4:源模块并没有对外暴露任何导出
a模块没有导出任何内容

// a.js
var arr = [1, 2, 3]
for (var i = 0;i < arr.length;i++) {
    console.log(arr[i])
}

那么b文件将a.js文件整个引入就好了

// b.js
// 此处会执行a.js的所有代码逻辑
import ‘./a.js‘

那么有些童鞋可能会有个疑问“这种导入方式的应用场景在哪?”,不知道大家是否听过‘腻子脚本‘这一概念,就是一些第三方脚本或工具,作用类似于补丁,用于兼容一些新特性或功能,在一般情况下,这些脚本或工具只需要自执行,并且通常都是在我们的业务代码之前引入

三、导出的具体使用
ES6模块的导出方式大致有两种:命名导出、默认导出;

场景1:源模块怎样才能支持命名导入和命名空间导入?

// a.js
// 方式1:在源模块末尾集中导出(当导出较多时,推荐此方式,方便管理导出)
var num = 100
var name = ‘王小明‘
var flag = true
export {
    num,
    name,
    flag
}

// 方式2:声明时立即导出(当导出较少时,推荐此方式)

export var num = 100
export var name = ‘王小明‘
export var flag = true

场景2:导出的内容前后名称需要不一致,那么我们可以尝试重命名
什么意思呢?如果源模块的开发者有下面这种想法时,就应该使用重命名导出:‘我想要提高代码的可读性且有较好的语义化,此时变量或方法的名称长度一定不会太短,类似getOrderInfoFromDatabaseByHttp这种命名,但又不想让使用我的模块的人觉得我的导出名称过长’,示例如下:

// a.js
// 名称真的好长
var getOrderInfoFromDatabaseByHttp = function () {
    // ...
}
export {
    // 如果没有重命名,就会导出下面这一大串
    // getOrderInfoFromDatabaseByHttp
    // 但如果使用了重命名,方法的名称就会变得很简洁,即getOrderInfo
    getOrderInfoFromDatabaseByHttp as getOrderInfo
}

场景3:模块功能单一,并且只需要导出值,不需要具名,使用默认导出export default

// version.js
export default ‘v1.0.0‘
// index.js
import version from ‘./version.js‘

上面的代码功能很简单,只是导出项目的版本号,所以我们应该使用默认导出,而没有必要像下面这样写:

// version.js
export var version = ‘v1.0.0‘
// index.js
import {version} from ‘./version.js‘ 不需要加花括号

以上是关于ES6模块之export和import教程的主要内容,如果未能解决你的问题,请参考以下文章

探索 模块打包 exports和require 与 export和import 的用法和区别

ES6新特性:模块化(import 和 export)

ES6模块的import和export用法总结

ES6导入导出import | export | export default-使用案例

ES6导入导出import | export | export default-使用案例

ES6 模块export import