JavaScript 模块 module

1 module 模块化

js module

• ES6 的模块化分为导出（export）与导入（import）两个模块。
• 模块导入导出各种类型的变量，如字符串，数值，函数，类。
• export、import 都处于模块顶层

1.1 export

• export 输出变量、函数、类

  • export 语句输出的接口，与其对应的值是动态绑定关系，即通过该接口，可以取到模块内部实时的值。
  • 对应的 import 语句需要使用大括号。

// 1.
export var xxx = 123;
export var yyy = 'aaa';
export function multiply(x, y) {
  return x * y;
};

export const multiply = (x, y) { }

// 2.
var xxx = 123;
var yyy = 'aaa';
function multiply(x, y) {
  return x * y;
}

export { xxx, yyy, multiply };

// 3. 别名
export { multiply as ccc };

// 4. 错误
export 1;

var m = 1;
export m;  // 应该写成 export {m};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

1.2 import

• import 输入其他模块提供的功能

  • import 命令具有提升效果，会提升到整个模块的头部，首先执行
  • 只读属性：import 命令输入的变量都是只读的，可以改写 import 变量类型为对象的属性值，不能改写 import 变量类型为基本类型的值。
  • 单例模式：多次重复执行同一句 import 语句，那么只会执行一次，而不会执行多次。import 同一模块，声明不同接口引用，会声明对应变量，但只执行一次 import
  • 静态执行特性：import 是静态执行，编译阶段执行的，所以不能使用表达式和变量

// 1.
import { xxx, yyy, multiply } from "./profile.js";

// 2. 别名
import { xxx as surname } from "./profile.js";

// 3. 整体加载 *
import * as circle from "./circle";
1
2
3
4
5
6
7
8

//可以改写 import 变量类型为对象的属性值，不能改写 import 变量类型为基本类型的值。
import { a } from "./xxx.js";
a = {}; // error

import { a } from "./xxx.js";
a.foo = "hello"; // a = { foo : 'hello' }
1
2
3
4
5
6

1.3 export default

• export default 命令，为模块指定默认输出。

  • 对应的 import 语句不需要使用大括号；
  • 正是因为 export default 命令其实只是输出一个叫做 default 的变量，所以它后面不能跟变量声明语句。
  • 因为 export default 命令的本质是将后面的值，赋给 default 变量，所以可以直接将一个值写在 export default 之后。
  • 在一个文件或模块中，export、import 可以有多个，export default 仅有一个。
  • export default 中的 default 是对应的导出接口变量，本质上，export default 就是输出一个叫做 default 的变量或方法，然后系统允许你为它取任意名字。
  • export default 向外暴露的成员，可以使用任意变量来接收。

// 1.
export default function () {
  console.log('foo');
}

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

export default foo;

// 3. 不能跟变量声明语句
export default var a = 1; // 错误
export var a = 1;  // 正确

// 4. 直接将一个值写在后面
export default 42; // 正确
export 42; // 报错
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

1.4 export 与 import 在同一模块使用

• export 与 import 可以在同一模块使用，使用特点：

  • 可以将导出接口改名，包括 default。
  • 复合使用 export 与 import ，也可以导出全部，当前模块导出的接口会覆盖继承导出的。

// 1. 输入默认方法
import customName from "./export-default";

// 2. 同时输入默认方法和其他接口
//
export default function (obj) {}

export function each(obj, iterator, context) {}

export { each as forEach };

//
import _, { each, forEach } from "lodash";
1
2
3
4
5
6
7
8
9
10
11
12
13

// modules.js
function add(x, y) {
  return x * y;
}
export { add as default };
// 等同于
// export default add;

// app.js
import { default as foo } from "modules";
// 等同于
// import foo from 'modules';
1
2
3
4
5
6
7
8
9
10
11
12

// export 与 import 的复合写法
// 如果在一个模块之中，先输入后输出同一个模块，import语句可以与export语句写在一起。
// 写成一行以后，foo和bar实际上并没有被导入当前模块，只是相当于对外转发了这两个接口，导致当前模块不能直接使用foo和bar。
export { foo, bar } from "my_module";

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

// 整体输出
export * from "my_module";
1
2
3
4
5
6
7
8
9
10
11

1.5 import()

• import(./xxx.js)
  • 参数 specifier，指定所要加载的模块的位置
  • import 命令能够接受什么参数，import()函数就能接受什么参数，两者区别主要是后者为动态加载。
  • import()返回一个 Promise 对象
  • 它是运行时执行，什么时候运行到这一句，就会加载指定的模块。
  • import()函数与所加载的模块没有静态连接关系，这点也是与 import 语句不相同。
  • import()类似于 Node.js 的 require()方法，区别主要是前者是异步加载，后者是同步加载。