前言

ES6模块化标准中定义：ES6模块化标准是浏览器端和服务器端通用的模块化开发标准

ES6的导入和导出是指在ES6标准中引入的模块化体系，用于更好地安排、管理和重用JavaScript代码。这一模块化体系提供了两个关键字：import 用于导入模块中的成员，export 用于将模块中的成员导出，使其可供其他模块运用。

  1. 每一个JS文件都是一个独立的模块
  2. 导入其它模块成员运用 import 关键字
  3. 向外同享模块成员运用 export 关键字

默许导入和默许导出

默许导出语法：export default 默许导出的成员

// ./out.js
let name = '张三';
let age = 21;
function show() {
    console.log(name, age);
}
// 默许导出name和show办法
export default {
    name,
    show
}

默许导入语法：import 接纳称号 from ‘模块标识符’

// App.vue
// 默许导入
import test from './default';
test.show();
//输出成果为：
// 张三 21

留意： 每个模块中只允许运用仅有的一次 export default，默许导入时的接纳称号可所以任意合法称号。

按需导出与按需导入

按需导出语法：export 导出的特点或办法

// ./need.js
export let name = '张三';
let age = 21;
export let gender = '男';
export function show() {
    console.log(name, age, gender);
}

按需导入语法：import {对应的特点名或办法} from ‘模块标识符’

// App.vue
// 按需导入
import { name, show } from '.need';
show();
// 输出成果
// 张三 21 男

留意 ：

  • 每个模块中能够运用屡次按需导出。
  • 按需导入的成员称号有必要和按需导出的称号保持一致。
  • 按需导入时，能够运用 as 关键字进行重命名。

直接导入并履行模块中的代码

// ./direct.js
let name = '张三';
let age = 21;
let gender = '男';
console.log(name, age,gender);

// App.vue
// 直接导入并履行
import './direct';
// 输出成果：张三 21 男

结语

总结：

  • 默许导出：模块中只允许运用仅有的一次 export default，默许导入时能够挑选运用任意合法称号。
  • 默许导入：导入的成员被命名为 test，是默许导出模块的整个目标。
  • 按需导出：能够屡次运用 export 关键字导出模块中的成员。
  • 按需导入：导入的成员称号有必要和导出时的称号保持一致，也能够运用 as 关键字进行重命名。
  • 直接导入并履行：用于履行模块中的大局代码，不需要显式导入任何成员，只需导入模块本身。
  • 留意： 直接导入并履行方法首要用于模块中包括一些大局履行的代码，而不是导出特定的成员。

总的来说默许导出与默许导入适用于导出模块的整个目标，导入时能够挑选运用任意合法称号。
按需导出与按需导入适用于有挑选性地导入模块中的特定成员，能够屡次导出和导入，支撑重命名。
直接导入并履行适用于履行模块中的大局代码，不需要显式导入成员，只需导入模块本身。