Module的语法

参考文档：https://es6.ruanyifeng.com/#docs/module#export-%E5%91%BD%E4%BB%A4

1. 概述

• 模块体系：CommonJS、AMD、ES6模块（Module）
• Module：静态化，编译时确定模块依赖关系、输入、输出
• 其他：运行时确认依赖关系
  • CommonJS：对象，运行时加载

2. 严格模式

• Module自动采用严格模式
  • 顶层this指向undefined

3. export命令

• 对外接口
• 实质： 接口名与模块内部变量间，建立了一对一的关系
• 接口与值：动态绑定关系

//正确写法
export var n = 1
var m = 1
export {m}
export {m as n}

//错误写法
export 1
var m = 1	
var f = ()=>{}
export m		//非接口
export f		//非接口
export function(){}	//非接口

4. import命令

• 输入接口
• 接受大括号，里面含有其他模块导入的变量名
• as关键字
• from后可为相对或绝对路径，.js后缀可省略
• 输入变量只读

import {a} from './file'
import {a as b} from './file'
b = {}		//报错

• 静态执行
  • import在编译时执行
  • 提升效果
  • 不能用于表达式、变量、if等语句
• import可只用于加载模块（不做输入）
• Singleton （单例模式，只执行一次）

fun()		//正常
import {fun} from './file'

import {'f'+'un'} from './file'		//报错
let path = './file'
import {fun} from path		//报错
if(1){
	import {fun} from './file'		//报错
}

import 'lodash'

import {a} from './file'
import {b} from './file'
//相当于
import {a,b} from './file'

5. 模块的整体加载

• 使用 * 号，表示一个包含所有输出的对象

import * as all from './file'

6. export default 命令

• 默认输出（只能有一个），无需了解模块的输出
• import后面，无需大括号
• 输出具体值（与export区别）
• 实质：输出名为default的变量或方法
  • 将export default 后面的值，赋值给default变量
  • 其后不能跟声明语句

//正确写法
export default function(){}
export default function f(){}
var f = ()=>{}
export default f
//导入
import every from './file'

//错误写法
export default var f = ()=>{}	

• export 和 export default 可混合使用

//输出
export var a = 1
export var b = 1
export default 1

//输入
import _,{a, b} from './file'

7. export 和 import 的复合写法

• 复合写法时，接口并未导入，相当于转发

export {a,b} from './f'
//等同于
import {a,b} from './f'
export {a,b}

//接口改名
export {a as b} from './f'

//整体输出
export * from './f'

//默认接口
export {default} from './f'

//有名改默认
export {a as default} from './f'

//默认改有名
export {default as a} from './f'

8. 模块的继承

• export * 会忽略默认导出

export * from './f'
export var a = 1
export default 1		//忽略

9. import()

• import命令
  • 只能位于模块顶层
  • 无法实现条件加载（动态加载）
  • 编译时执行
• import(specifier)函数
  • 支持动态加载模块
  • es2020
  • 返回promise对象（异步加载）
  • 任何地方运行（不限模块）
  • 运行时执行
  • 类似于nodejs require（区别：同步加载）
• 适用场合
  • 按需加载
  • 条件加载
  • 动态模块路径

var path = './f'
//获取输出接口a,b
import(path).then((a,b)=>{})
//获取默认接口
import(path).then(m=>{})
//多个模块
Promise.all([
	import('./f1'),
	import('./f2'),
	import('./f3')
]).then(([m1,m2,m3])=>{})
//async中
async function f(){
	let m1 = await import('./f1')
	let [m2,m3] = await Promise.all([
		import('./f2')
		import('./f3')
	])
	//...
}