// error
const a = 1;
export a;
// ok
export const a;
// error
function a () {
console.log(123)
}
export a;
// ok
export function a () {
console.log(123)
}
2. import 命令
import 命令接受一对"大括号",指定要从其它模块导入的变量名。该大括号不允许解构:
// a.js
export const A = {a:1}
// b.js
import { A:{a} } from './a.js' // error
import 会执行所加载的模块,但是只会执行一次:
// main.js
console.log('i am main')
const A = 'main'
export default A
// utils1.js
import A from './main.mjs'
console.log('i am utils1')
export default () => {}
// utils2.js
import A from './main.mjs'
console.log('i am utils2')
export default () => {}
// index.js
import u1 from './utils1.mjs'
import u2 from './utils2.mjs'
// 打印
// i am main // 即该模块被引用两次,但只会执行一次
// i ma utils1
// i ma utils2
// utils.js
export const A = { a: 1 }
// index.js
import {A} from './utils.mjs';
// {a:1}
import * as A from './utils.mjs';
// {A:{a:1}}
即对于以上的形式,使用import加载模块需要知道模块内部的属性方法名,或者使用整体加载的形式。
而使用 export default 可以使得在 import 时指定任意名字:
// utils.js
const A = { a: 1 }
export default A
import A from './utils.mjs';
// {a:1} 即通过 export default 的形式,可以在不知道接口名的情况下,引入默认的接口
export default 用于指定模块的默认输出,因此一个模块只能有一个默认输出。
export default 命令的本质是将后面的值,赋给 default 变量,所以:
// ok
export default 1
// error
export 1
// ok
const a = 1;
export default a;
// error
export default const a = 1;
// ok
export default function a(){}
// ok
function a(){}
export default a;
5. Utils 推荐写法
export default {
a () {
console.log('a')
},
b () {
this.a() // console.log('a')
console.log('b')
}
}