ECMAScript 6（26）Module

1.概述

1. Module (模块)

• 简单说就是一些公共js(方法或者对象等),在分别要在多个地方需要使用,但是呢,我们又不想全局引入这些文件(会污染全局变量),于是就有了模块这个概念,模块就是保存了这一系列这些方法,我们需要哪一个取哪一个

2. CommonJS,AMD,CMD
3. es6模块化

• es6模块有以下特点

静态化，加载哪些，可以在编译的时候就确定，而不是只有当运行的时候才确定；
模块内部的作用域是独立的，不同模块即使有同名变量，只要该变量不影响外部，那么也是互不干扰的；
内部自动严格模式

2.export

// 写法一
export var m = 1;

// 写法二
var m = 1;
export {m};

// 写法三 重新命名
var n = 1;
export {n as newn};

3.import

// 写法一
import {m} from './path'

// 写法二 重新命名
import {m as newm} from './path'

• 引入所有模块 *

// base.js
export var a = 1;
export var b = 2;

// .......
import * as base from './base'
base.a // 1
base.b // 2

4.export default

• 模块指定默认输出
• 一个模块只能有一个默认输出，因此export default命令只能使用一次。所以，import命令后面才不用加大括号，因为只可能唯一对应export default命令。
• export default命令的本质是将后面的值，赋给default变量

// 写法一
export default function foo() {
  console.log('foo');
}

// 写法二

function foo() {
  console.log('foo');
}

export default foo;

// 也可以是值(export default命令的本质是将后面的值，赋给default变量)

export default 1;

• 其他模块加载该模块时，import命令可以为该匿名函数指定任意名字。

import customName from './export-default';  // customName名字是定义的

5.export 与 import 的复合写法

export { foo, bar } from 'my_module';

// 可以简单理解为
import { foo, bar } from 'my_module';
export { foo, bar };

• 改名

// 接口改名
export { foo as myFoo } from 'my_module';

// 整体输出
export * from 'my_module';

• 具名接口改成默认接口

export { es6 as default } from './someModule';

// 等同于
import { es6 } from './someModule';
export default es6;

• 默认接口改成具名接口

export { default as es6 } from './someModule';

• 导出所有

export * as ns from "mod";

// 等同于
import * as ns from "mod";
export {ns};

6.import() 提案

参考:阮一峰es6