ES Module

定义

1. 使用关键字import进行导入 export 进行导出,并默认开启严格模式

导出方式

1. export
   (1) 定义: 声明语句导出
   (2) 用法1: 后面可以直接跟声明语句

export const name = 'nano'
export function add(){}
export class Person { }

(3) 用法2: 导出和声明分开

const name = 'nano'
const obj = { age:18 }
function add(){}
export {
  name, obj, add
}

注意: 这里并不是导出一个对象,而是导出一个变量集合

(4) 导出时起别名
i. 定义: 使用as关键字

const name = 'nano'
const obj = { age:18 }
function add(){}

export {
  name as otherName, 
  obj as otherObj, 
  add as otherAdd
}
import {otherName, otherObj, otherAdd } from 'index.js'

备注: 一般都是在导入时候起别名,导出时起别名用的较少

导入的方式

1. 普通导入
   (1) 使用import导入

   import { foo } from './export.js'

2. 起别名导入
   (1) 定义:防止导入的变量命名冲突
   (2) 使用as关键字

   import { foo as bar } from './export.js'

3. 将所有内容导入在一个标识符中
   (1) 定义: 使用*和as关键字

   import * as allVariable from './index.js'
   allVariable.foo()
   let obj = allVariable.obj

结合使用

1. 定义:导入后导出的语法糖

   export { foo } from './index.js'
   
   /* 等价于↓↓↓ */
   
   import { foo } from './index.js'
   export { foo }
   
   /* 导入导出全部 */
   export * from './index.js'

默认导出

1. 默认导出方式1(常用)

   /* export.js */
   const name = 'nano'
   const obj = { age:18 }
   function add(){ console.log('add') }
   
   export default add 
   
   /* import.js */
   import bar from './export.js'
   bar() --> 'add'

2. 默认导出方式2

   /* export.js */
   const name = 'nano'
   const obj = { age:18 }
   function add(){ console.log('add') }
   
   export{
     name as nickName,
     obj as nickObj,
     add as default
   }
   
   /* import.js */
   import bar from './export.js'
   bar() --> 'add'

3. 与export区别
   (1) 每一个js文件默认导出只能使用一次,并且后面不可以接声明语句
   (2) 导入默认导出的变量时可以随意命名并且不需要 { } 包裹

导入同步异步的问题

1. 普通导入方式是同步的,会阻塞下面的代码执行,需要下载完导入的文件才可以往后执行

   /* 普通导入方式 */
   import {a } from 'index.js'
   import foo from 'foo.js'

2. import函数导入是异步的,不会阻止后续代码执行
   (1) 定义: 使用import()函数导入,返回一个promise,内部调用resolve,通过.then函数获取导入的变量

   import('./index.js').then( res => { console.log(res) } )