学习记录：ES6-module

module的简述

• 三个命令：export，export dafault和 import
• 默认自带的规则：严格模式
• export 的具体使用方式，以及 import 的具体使用方式
• module 的继承
• module 的实质

export 和 import

简单的例子：

 // a.js
 export const a = 'I am a'

 // index.js
 import { a } from './a.js'
 console.log(a) // I am a

export

• 作用：用于规定模块的对外接口。

import

• 作用：用于输入其他模块提供的共能。

严格模式

• 禁止 this 指向 window
• 不能使用 arguments.callee
• 不能使用 arguments.caller
• 变量名必须声明才能使用
• 函数的参数不能同名，否则报错
• 不能对只读属性进行赋值，否则报错
• 不能使用前缀 0 代表 8 进制，否则报错
• 不能删除不可删除的属性，不能删除变量，否则报错
• eval 和 argumetns 不能被重新赋值
• arguments 不能自动反应函数参数的变化
• 增加保留字（比如：protected，static，interface 等）
  严格模式是ES5就增加的部分，在 module 中自带这些规则，使编程风格趋于严谨

export 的具体使用方式，以及 import 的具体使用方式

• export 表示无默认输出，export dafault 表示默认输出。区别在于：
  
  1. 一个 module，可以有多个 export，但只能有一个 export dafault。他们可以同时存在
  2. export 对于 部分 imort 的时候，是要使用 「 { } 」包裹变量，export dafault 对于 部分 import的时候，则不需要使用 「{ }」；若 export 和 export dafault 的变量同时存在，import的时候就在前面的规则上，使用 「 , 」分隔
  3. export dafault 导出的变量是可以自动重新命名。不管在导出之前是否已经命名，export 的重新命名则是需要 as 进行重新命名
• export 和 import 都是支持使用 as 进行变量名重命名
• 位置：export 和 import 只能出现在除 「 块级作用域 」中， 并且是在文件顶层
• module 的整体加载，使用 「 * 」指定一个对象，把 module 中所有的输出模块都加载到这个对象上。

---

• export 和 export dafault 的区别的例子：

// default.js
const defaultOne = 'default_one'
const defaultTwo = 'default_two'
const defaultThree = 'default_three'

export const defaultFour = 'default_four'

export default {
  defaultThree,
  defaultTwo,
  defaultOne
}

// index.js
import defaultModule, { defaultFour } from'./default'

• export 有两种方式，如下：

// export_1.js

// 第一种方式
export const exportStr = 'export_str'
export const exportFun = function () {
  console.log('exportFun')
}

const exportNum = 100
const exportBoo = true

// 第二种方式
export {exportNum, exportBoo}

// index.js
import { 
  exportNum, 
  exportBoo, 
  exportStr, 
  exportFun } from './export_1'

两种方式是等价的

• export 和 import 都是支持使用 as 进行变量名重命名。如下：

// export_import_as.js
const exportAsStr = 'export_as_str'
const exportAsNum = 'export_as_num'
const exportAsBoo = false

export {
  exportAsStr as strResetName,
  exportAsNum as numResetName,
  exportAsBoo
}

// index.js
import { 
  strResetName, 
  numResetName, 
  exportAsBoo as importResetName 
} from './export_import_as'

• 位置：export 和 import 只能出现在除 「 块级作用域 」中， 并且是在文件顶层。如下：

// position.js
{
  export const position = 'inner' // error 'import' and 'export' may only appear at the top level
}

// index.js
console.log('我在顶部')
import { position } from './position' // error Import in body of module; reorder to top

• module 的整体加载。如下：

// module_all.js
export const testOne = 'one'
export const testTwo = 'two'
export const testThree = 'three'

export default {
  defaultStr: '在整体导出中的默认导出对象'
}

// index.js
import * as all from './module_all'

默认导出 module_all.js 中所有变量组成的对象，包括默认和非默认的输出，如图：

模块的继承

// a.js
export const a = 'I am a'

export default {
  defaultA: 'default_a'
}

// b.js
export const b = 'I am b'

export default {
  defaultA: 'default_b'
}

// index.js
// 先输入再输出, 这种方式不可取，变量很多的时候就会出问题，
import dafaultA, { a } from './a'
import { b } from './b'

export {
  a,
  b
}
export default dafaultA

// 先输入再输出 第一种方式 不能获得 export default 的变量
// export * from './a'
// export * from './b'

// main.js
import * as moduleInhert from ''

在使用 export * from fliePath 实现模块继承的时候，注意子模块不要用 export default，这个方式会自动忽略 export default

module 加载的实质

• 动态引用，保持内部状态

// a.js
let num = 90
let count = function () {
  return ++num
}

export {
  num,
  count
}

// index.js
import {count, num} from './a'

console.log(num) // 90
console.log(count()) // 91
console.log(num) // 91

a.js 有两个变量：num 和 count 。 num 的初识值为 90 ，count 是一个进行累加的函数,每次执行 num +1 之后给 num 赋值。在a.js 是被当作一个对象 export .在 index.js 中 import 并使用。

• 先打印 num ,为 90
• 再执行 count 方法，num 被加 1 并更新值为 91
• 最后再次打印 num 为 91