ES6模块化之export和import的用法
程序员文章站
2023-12-22 19:35:04
...
我的github github.com/zhuanyongxi…
ES6中export和import一般的用法有两种
- 命名导出(Named exports)
- 默认导出(Default exports)
命名导出(Named exports)
就是每一个需要导出的数据类型都要有一个name,统一引入一定要带有{}
,即便只有一个需要导出的数据类型。这种写法清爽直观,是推荐的写法。
//------ lib.js ------
const sqrt = Math.sqrt;
function square(x) {
return x * x;
}
function diag(x, y) {
return sqrt(square(x) + square(y));
}
export {sqrt, square, diag}
//------ main.js ------
import { square, diag } from 'lib';
console.log(square(11)); // 121
console.log(diag(4, 3)); // 5
把export直接加到声明前面就可以省略{}
//------ lib.js ------
export const sqrt = Math.sqrt;
export function square(x) {
return x * x;
}
export function diag(x, y) {
return sqrt(square(x) + square(y));
}
//------ main.js ------
import { square, diag } from 'lib';
console.log(square(11)); // 121
console.log(diag(4, 3)); // 5
无论怎样导出,引入的时候都需要{}
。
别名引入(Aliasing named imports)
当从不同模块引入的变量名相同的时候
import {speak} from './cow.js'
import {speak} from './goat.js'
这些写法显然会造成混乱
正确的方法是这样的
import {speak as cowSpeak} from './cow.js'
import {speak as goatSpeak} from './goat.js'
可是,当从每个模块需要引入的方法很多的时候,这种写法就显得十分的繁琐、冗长,例如
import {
speak as cowSpeak,
eat as cowEat,
drink as cowDrink
} from './cow.js'
import {
speak as goatSpeak,
eat as goatEat,
drink as goatDrink
} from './goat.js'
cowSpeak() // moo
cowEat() // cow eats
goatSpeak() // baa
goatDrink() // goat drinks
解决方案就是命名空间引入了
命名空间引入(Namespace imports)
import * as cow from './cow.js'
import * as goat from './goat.js'
cow.speak() // moo
goat.speak() // baa
十分的简洁优雅
默认导出(Default exports)
默认导出就不需要name了,但是一个js文件中只能有一个export default。
//------ myFunc.js ------
export default function () { ... };
//------ main1.js ------
import myFunc from 'myFunc';
myFunc();
其实这种导出方式可以看成是命名到处的变种,只不过把命名写成了default。
虽然export default只能有一个,但也可以导出多个方法。
export default {
speak () {
return 'moo'
},
eat () {
return 'cow eats'
},
drink () {
return 'cow drinks'
}
}
引入与命名空间引入类似
import cow from './default-cow.js'
import goat from './default-goat.js'
cow.speak() // moo
goat.speak() // baa
如果我们在编写模块的时候使用的导出方法不统一,那么引入的时候就需要考虑不同模块引入的方式。这种麻烦可以通过自引用的方法消除。方法如下
编写两种引入方式通用的模块
import * as myself from './ambidextrous-cow.js' // import this file into itself
// this module's own namespace is its default export
export default myself
export function speak () {
console.log('moo')
}
这样在引入的时候就不需要考虑引入方式了。
import cow from './ambidextrous-cow'
import * as alsocow from './ambidextrous-cow'
cow.speak() // moo
alsocow.speak() // moo
两种引入方法均可。
这种方法也有一个小缺点,就是在我们编写的模块中,有一个function是常用的,我们想默认导出,可export default
已经使用了,而我们知道export default
在一个模块中只能使用一次。这时就要使用Object.assign
import * as myself from './ambidextrous-cow.js'
export default Object.assign(speak, myself)
export function speak () {
console.log('moo')
}
需要注意的是,Object.assign
只能用于function。
对应引入的例子
import cow from './ambidextrous-cow'
import * as alsocow from './ambidextrous-cow'
cow() // moo
cow.speak() // moo
alsocow.speak() // moo
参考文章
1.[es6] import, export, default cheatsheet
2.详解JavaScript ES6中export import与export default的用法和区别
3.ES Modules: Using named exports as the default export
原文发布时间为:2018年06月21日
原文作者:砖用冰西瓜推荐阅读
-
ES6模块化之export和import的用法
-
详解ES6 export default 和 import语句中的解构赋值
-
详解ES6 export default 和 import语句中的解构赋值
-
ES6使用export和import实现模块化的方法
-
ES6使用export和import实现模块化的方法
-
ES6新特性:使用export和import实现模块化详解
-
ES6模块化的import和export用法方法总结
-
JS/TS的import和export用法小结
-
探索 模块打包 exports和require 与 export和import 的用法和区别
-
ES6中export和import详解(export定义了模块的对外接口后,其他JS文件就可以通过import来加载这个模块)