Blog

Make it work, make it right, make it fast

Dec 17, 2021 - 2 minute read - JavaScript 编程

ES6模块化

一、基本导出导入

任意变量、函数和类都能作为导出类型

//export_demo.js

//导出变量
export var name = "john";
export const color = "red";
export const num = 7;

//导出函数
export function sum(num1, num2) {
  return num1 + num2;
}

//导出类
export class Person{
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

//import_demo.js
//导入变量、函数、类
import {name, color, num, sum} from "./export_demo.js";

console.log(name); //john
name = "mary"; //error 不能对导入的变量二次赋值

在html中引用模块化js的时候，需要在type指定为module：

<script type="module" src="./import_demo.js"></script>

导入一整个模块

import * as example from "./export_demo.js";

console.log(example.name) //john

更改导入变量的值

export var name = "mary";

export function changeName(newName) {
  name = "lily";
}

导入该变量和函数

import {name, changeName} from "./example.js";

console.log(name); "mary"
changeName("bob");
console.log(name); "bob"

name = kery; //error

二、重命名导出导入

使用as重命名导出

function sum(num1, num2) {
  return num1 + num2;
}

export { sum as add };

这时导入该函数的时候可以使用add作为函数名

import { add } from "./example.js";

如果在导入的时候需要重命名同样可以使用as关键字

import { add as sum } from "./example.js";

console.log(typeof add); // "undefined"
console.log(sum(1, 2));

三、默认值导出导入

使用default关键字导出，每个模块只能设置一个默认导出。

export default function(num1, num2) {
  return num1 + num2;
}

也可以使用以下方式作为默认导出

function sum(num1, num2) {
  return num1 + num2;
}

export default sum;
---------------------------
function sum(num1, num2) {
  return num1 + num2;
}
export { sum as default };

导入默认值

// 导入默认值
import sum from "./example.js";

console.log(sum(1, 2)); // 3

导入多个值（包含默认值）

export let color = "red";

export default function(num1, num2) {
  return num1 + num2;
}

使用import同时导入color和默认函数，这里默认导入需要位于为默认名称之前

import sum, { color } from "./example.js";

console.log(sum(1, 2)); // 3
console.log(color); // "red"

也可以使用重命名语法进行默认值的导入

// 等价于上个例子
import { default as sum, color } from "example";

console.log(sum(1, 2)); // 3
console.log(color); // "red"