Module ES6

介绍

在ES6之前社区定制了一些模块加载方案，主要有CommonJS和AMD两个，CommonJS用于服务器，而AMD用于浏览器，ES6的出现可以成为通用方案。ES6的模块设计思想是尽量静态化，在编译时就可以确定模块的依赖关系以及输入和输出的变量。模块功能主要由export和import两个命令构成

相关名词解释

• 运行时加载。它的模块就是对象，输入时查找对象属性

let {a, b, c} = require('common')

解析：上面的代码运行是整体加载common模块，然后使用a,b,c三个方法，这样的加载方式叫做运行时加载

• 编译时加载

import {a, b, c} from 'common'

解析：从common模块加载a,b,c三个模块，其他不加载，这种方式叫做编译时加载

export和import

• export规定模块的对外接口，import用于输入其他模块提供的功能。
• export和import的基本语法
  • export {a, b, c} 对应 import {a, b, c} from './lib'

  // lib.js
  const a = () => { //... }
  const b = 123
  const c = {list: []}
  export {a, b, c}
  

  // module.js
  import {a, b, c} from './lib'
  console.log(a)
  

  • export {a as sum} 对应 import {sum} from './lib' 通过as重命名

  // lib.js
  const a = (a, b) => { return a + b}
  export {a as sum}
  

  // module.js
  import {sum} from './lib'
  console.log(sum(10, 5))
  

  • export const a = 5 对应 import {a} from './lib' 直接命名导出

  // lib.js
  export const a = 5
  

  // module.js
  import {a} from './lib'
  console.log(a)
  

  • export default 对应 import a from './lib' 默认导出，倒入不需要知道具体变量名

  // lib.js
  const a = (a, b) => {return a + b}
  export default a
  

  // module.js 这里不用{}包裹哦
  import a from './lib'
  console.log(a(10, 5))
  

  • export * from './other' 对应 import {a} from './lib' 使用通配符重新倒出其他模块接口

  // other.js
  export a = 12
  export b = () => {//...}
  

  // lib.js
  export * from './other'
  

  // module.js
  import {a} from './lib'
  console.log(a)
  

• 特殊写法
  • export {a as default} from './lib'
    从lib模块倒入a变量并且作为默认倒出

  // 上面的写法等同于
  import {a} from './lib'
  export default a
  

  • export {a as b} from './lib'
    输出lib模块的a并且改名为b

ES6模块加载的实质

ES6模块输出的是值的引用（根据简单数据类型和引用类型的特点来理解这个问题比较容易），当他遇到import时不是去执行模块而是生成一个引用，等到执行到这里再到模块中去拿。

🌰说明

// lib.js
export let num = 0
export function sum () {
  num++
}

// main.js
import {num, sum} from './lib.js'
console.log(num) // 0
sum()
console.log(num) // 1