ES6模块化

默认导出 与 默认导入

默认导出语法:

export default 默认导出成员

let title = 'node_1.js的成员';

// 默认导出
export default {
  title
}

默认导入语法:

import 接收名称 from '模块标识符(路径)'

// 默认导入
import title from './node_1'

console.log(title); // {title: 'node_1.js的成员'}

默认导入的名称可以随意(比如: aaa, bbb)

按需导出 与 按需导入

按需导出

// 按需导出
export let title2 = 'title2的内容';

或者

let title2 = 'title2的内容';
export {
    title2
}

按需导入

// 按需导入
import { title2 } from './node_1'

console.log(title2); // title2的内容

按需导入修改名称

// 按需导入
import { title2 as title3 } from './node_1' // 使用as 将title2 修改为title3

console.log(title3); // title2的内容

注意:

页面中可以同时有按需导出和默认导出,可以有多少按需导出,但是不能有多少默认导出;

默认导入和按需导入可以同一行进行

// 默认导入 和 按需导入 同时进行
import title, { title2 } from './node_1'

直接导入并执行模块代码

单纯的执行下模块代码,不需要导出与导入

index_1.js

// index_1.js代码
for (let i = 0; i < 3; i++) {
  console.log(i);
}

 index_2.js

// index_2.js代码
import './node_1'; // 这里只是让index_1.js代码执行下,不需要接收