ES6--模块化

发表于 |

ES6 Module 设计思想

与之前社区规范 CommonJS 和 AMD 相比，ES6 的 Module 设计思想强调静态化

  • 带来的优点

    1
    2
    3
    4
    1.静态加载效率更高(按需加载部分内容)
    2.未来引入宏、类型检查等特性（静态化）
    3.前后端统一模块化标准
    4.未来新的浏览器API和扩展功能(Math等)通过模块提供

  • 静态化的要求

    1
    2
    3
    1.只能在顶层作用域完成加载(不允许函数内，分支块内)
    2.不能在import语句中使用变量
    3.模块化默认要求严模式(不需要加'use strict')

普通 export import 语法

输出 export:

1
2
3
4
5
6
7
8
9
10
11
//输出必须是变量并且变量必须在大括号中
export var lastName = 'Jackson';
export {firstName, lastName, year};
export lastName  //Error！没有大括号！
//可以重命名外部接口
function v2() { ... }
export {
  v2 as streamV2,
  v2 as streamLatestVersion
};

输入 import:

1
2
3
4
5
6
//导入变量必须在大括号中，并且与导出名同名
import {firstName, lastName, year} from './profile';
//导入重命名
import { lastName as surname } from './profile';
//使用 * 来进行整体加载，将所有加载的变量赋值到一个对象上
import * as circle from './circle';

export default 命令

为了快速上手，用户往往没有时间去看文档来学习需要导入的变量名，因此需要通过export default指令来输出

1
2
3
4
function foo() {...};
export default foo;
//任意变量名皆可
import bar from 'foo';

本质上是将输出的变量赋值给了一个叫做default的变量，在导入时，default可以被任意命名

1
2
3
4
5
//以下语句等价
export {add as default};
export default add;
export default var a = 1; //Error！default本身就是赋值，不能跟声明语句

export 与 import 复合写法

export { foo, bar } from 'my_module';

等价于

import { foo, bar } from 'my_module';
export { foo, bar };