export default 和对应的 import
1.认识导出和导入
导出（export）的东西可以被导入（import），并访问到
一个模块没有导出，也可以将其导入
// a.js
const age = 18
console.log(age)
// main.js
import './a.js'
// 控制台打印 18
// 被导入的代码都会执行一遍，也仅会执行一遍
import './a.js'
import './a.js'
import './a.js'
// 导入多次，结果也只会打印一次 18
2.基本用法
export default 对应的 import 可以随便起名
// a.js
export default age
// main.js
import age111 from './a.js'
一个模块只能有一个 export default
// a.js
const name = 'xiaolong'
const age = 18
export default age
export default name
// Uncaught SyntaxError: Identifier '.default' has already been declared
export 和对应的 import
1.基本用法
// export 声明或语句
export const age = 18
const age = 18
export { age }
// 必须加花括号
export age
// Uncaught SyntaxError: Unexpected token 'export'
// main.js 导入
main.js import { age } from './a.js'
// 必须加花括号
import age from './a.js'
// Uncaught SyntaxError: The requested module './a.js' does not provide an export named 'default'
// 不能随意命名
import { age1 } from './a.js'
// Uncaught SyntaxError: The requested module './a.js' does not provide an export named 'age1'
2.多个导出
export { name, age, sayHello }
3.导出导入时起别名
// a.js 导出
export { sayHello as hello, name, age }
// main.js 导入
import { sayHello, age, name as Person } from './a.js'
4.整体导入
会导入所有输出，包括通过 export default 导出的
import * as Person from './a.js' // Module {Symbol(Symbol.toStringTag): 'Module'}
5.同时导入
import { age, name, sayHello } from './a.js'
import age2 from './a.js'
// 一定是 export default 的在前
import age2, { age, name, sayHello } from './a.js'
Module 的注意事项
1.模块顶层的 this 指向
模块中，顶层的 this 指向 undefined
// a.js
console.log(this)
// main.js
import './a.js'
// undefined
2.import 和 import()
import 命令具有提升效果，会提升到整个模块的头部，率先执行
// a.js
export { age }
// main.js
console.log('沙发')
console.log('第二')
import { age } from './a.js'
// 18
// 沙发
// 第二
import 执行的时候，代码还没执行
import 和 export 命令只能在模块的顶层，不能在代码块中执行
if(PC){
import 'pc.js'
}else if(Mobile){
import 'mobile.js' // 报错
}
import() 可以按条件导入
if(PC){
import('pc.js')
}else if(Mobile){
import('mobile.js')
}
3.导入导出的复合写法
// main.js
export{age} from './a.js'
//当前模块不可以访问age
// 等价于
import {age} from './a.js'
export {age} from './a.js'
//当前模块可以访问age
参考：
慕课前端课程
