ES6-Module

ES6-Module

模块：一个一个的局部作用域的代码块

模块系统需要解决的主要问题
① 模块化的问题
② 消除全局变量
③ 管理加载顺序

一个模块没有导出，也可以将其导入，被导入的代码都会执行一遍，也仅会执行一遍

export default

一个模块只能有一个 export default，导入时可以随便起名

// ./home.js
const age =18;
export default age;

// ./index.js
import age from './home.js';
cosole.log(age);

export

不能随意命名

export 声明或语句

// ./home.js
export const age = 18;

const name = ‘小明’;
export { name };

// ./index.js
import { name,age } from './home.js';
cosole.log(name,age); 

导出导入时起别名

export { fn as func, className, age };
import { func, age, className as Person } from './module.js';

整体导入，会导入所有输出，包括通过 export default 导出的

export { fn as func, className, age };
import * as obj from './module.js';

同时导入，一定是 export default 的在前

export { fn as func, className, age };
export default 18;

import age2, { func, age, className } from './module.js'; // √
import { func, age, className },age2 from './module.js'; // ×

注意

模块中，顶层的 this 指向 undefined

import 命令具有提升效果，会提升到整个模块的头部，率先执行，import 执行的时候，代码还没执行

import 和 export 命令只能在模块的顶层，不能在代码块中执行，但是import() 可以按条件导入

导入导出的复合写法

//复合写法导出的，无法在当前模块中使用
export { age } from './module.js';
console.log(age);

//等价于
import { age } from './module.js';
export { age } from './module.js';
console.log(age);