js模块的导入导出

Week.D.Awn 2/1/2022 模块

# 导出单个变量

// a.js
export const name = "weekdawn";

1
2

# 导入单个变量

import {name} from "./a.js";

# 导出多个变量

// a.js
const name = "weekdawn";
const city = "cd";

export {name, city};

1
2
3
4
5

# 导入多个变量

import {name, city} from "./a.js";

# 导出函数

// a.js
function sum(x, y) {
    return x + y;
}
export {sum}
// 另一种写法
export function sum(x, y) {
  return x + y;
};

1
2
3
4
5
6
7
8
9

# 导入函数

import {sum} from "./a.js";

# 导出对象

// a.js
export default {
    name: "weekdawn",
    city: "cd"
};
// 另一种写法
const obj = {
    name: "weekdawn",
    city: "cd"
};

export default obj;

1
2
3
4
5
6
7
8
9
10
11
12

# 引入对象

import obj from "./a.js"

# 导出类

// a.js
export default class Person {
  name = "weekdawn";
  show() {
    console.log(this.name);
  }
}
// 另一种写法
class Person {
  name = "weekdawn";
  show() {
    console.log(this.name);
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 导入类

import Person from "./a.js";

# export default 命令

export default命令用于指定模块的默认输出。显然，一个模块只能有一个默认输出，因此export default命令只能使用一次。所以，import命令后面才不用加大括号，因为只可能唯一对应export default命令。
它后面不能跟变量声明语句,如：const、let、var等。

export default function foo() { // 输出
  // ...
}
import foo from 'foo'; // 输入

1
2
3
4

# as的使用

通常情况下，export输出的变量就是本来的名字，但是可以使用as关键字重命名。

// 导出
function v1() { ... }
function v2() { ... }
export {
  v1 as streamV1,
  v2 as streamV2,
  v2 as streamLatestVersion
};
// 导入
// 一般用法
import { name, year} from './a.js';
// as 用法
import { name as userName } from './a.js';

1
2
3
4
5
6
7
8
9
10
11
12
13

# 整体加载

//user.js
export name = 'lili';
export age = 18;
//逐一加载
import { age, name } from './user.js';
//整体加载
import * as user from './user.js';
console.log(user.name);
console.log(user.age);

1
2
3
4
5
6
7
8
9

# export 和 export default 的区别

export和export default均可用于导出常量、函数、文件、模块等。
可以在其它文件获模块中通过 import + （常量|函数|文件|模块）名的方式将其导入，以便能够对其进行使用。
export default 后面不能跟 const 或 let 的关键词。
export、import可以有多个，export default 仅有一个。
通过 export 方式导出，在导入时需要加{}， export default 则不需要。
export 具名导出 xxx， export default 匿名。区别在于导入的时候，export需要一样的名称才能匹配，后者无论取什么名都可以。
模块化管理中一个文件就是一个模块，export可以导出多个方法和变量，export default只能导出当前模块，一个js文件中只支持出现一个。

# 注意

import命令具有提升效果，会提升到整个模块的头部，首先执行。

← 前端开发的历史和趋势前端模块化详解 →