学习记录：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.jsconst defaultOne = 'default_one'const defaultTwo = 'default_two'const defaultThree = 'default_three'export const defaultFour = 'default_four'export default {  defaultThree,  defaultTwo,  defaultOne}// index.jsimport defaultModule, { defaultFour } from'./default'

• export 有两种方式，如下：

// export_1.js// 第一种方式export const exportStr = 'export_str'export const exportFun = function () {  console.log('exportFun')}const exportNum = 100const exportBoo = true// 第二种方式export {exportNum, exportBoo}// index.jsimport {   exportNum,   exportBoo,   exportStr,   exportFun } from './export_1'

两种方式是等价的

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

// export_import_as.jsconst exportAsStr = 'export_as_str'const exportAsNum = 'export_as_num'const exportAsBoo = falseexport {  exportAsStr as strResetName,  exportAsNum as numResetName,  exportAsBoo}// index.jsimport {   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.jsconsole.log('我在顶部')import { position } from './position' // error Import in body of module; reorder to top

• module 的整体加载。如下：

// module_all.jsexport const testOne = 'one'export const testTwo = 'two'export const testThree = 'three'export default {  defaultStr: '在整体导出中的默认导出对象'}// index.jsimport * as all from './module_all'

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

模块的继承

// a.jsexport const a = 'I am a'export default {  defaultA: 'default_a'}// b.jsexport 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.jsimport * as moduleInhert from ''

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

module 加载的实质

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

// a.jslet num = 90let count = function () {  return ++num}export {  num,  count}// index.jsimport {count, num} from './a'console.log(num) // 90console.log(count()) // 91console.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