ECMAScript 6知识点总结 --- Module模块化

• export命令

  export var year = 2008;
  
  var year = 2008;
  export {year};
  
  var year = 2008;
  export {year as time};

  ---

  export语句不能放在函数中
• import命令

  import {year} from './year'
  
  import {year as time} from './year'

  ---

  不允许更改输入接口

  import a from './a'
  a = {}  
  //Syntax Error : 'a' is read-only;

  但是可以改写属性

  a.foo = 'hi'

  ---

  import命令会提升到模块头部，首先执行

  ---

  import中不能使用表达式和变量

  ---

  import语句会执行所加载的模块，但是不输入任何值

  import 'year'

   

• export default
  匿名函数

  export default function() {
  console.log(666)
  }

  其它模块加载时，可以为该匿名函数指定任意名字

  import num from './number'
  num()

  ---

  非匿名函数

  export default function num() {
      console.log(666)
  }

  或者写成

  function num() {
      console.log(666)
  }
  export default num

  此时函数名num在模块外是无效的，其他模块加载时同样当作匿名函数

• 对比export default和export
  使用export default时，对应的import不需要使用大括号

  export default function num() {
      //....
  }
  
  import num from './num'

  ---

  使用export时，对应的import需要使用大括号

  export function num() {
      //...
  }
  
  import {num} from './num'

   

• export 与 import 的复合写法

  import {a, b} from './module';
  export {a, b};
  // 可以简化为
  export {a, b} from './module';

  模块的接口改名和整体输出，也可以采用这种方法

  export {a as mya} from './a'
  
  export * from './a'

   

• 模块的继承
  有一个b模块继承了a模块

  // b.js
  export * from './a'

  并在c模块中加载

  // c.js
  import * as data from './b'

   

• 跨模块常量

  // a.js
  export const A = 1;
  export const B = 2;
  export const C = 3;
  
  // b.js
  import * as num from './a'
  console.log(num.A)  // 1
  
  //c.js
  import {A, B} from './a'
  console.log(A)  // 1