模块
一个一个的局部作用域的代码块
模块系统解决的问题
- 模块化的问题
- 消除全局变量
- 管理加载顺序
export default和对应的import
- 导出的东西可以被导入（import），并访问到
- 一个模块没有导出，也可以将其导入
- 被导入的代码都会执行一遍，也仅会执行一遍
- 导入时可以随便起名
- 一个模块只能有一个 export default
A.js 导出模块
const age = 18;
// const sex = 'male';
// console.log(age);
// export default age;
// export default 20;
// export default {};
// const fn = () => {};
// export default fn;
// export default function () {}
export default class {}
B.js引入模块
//可以随便起名
import age from './module.js';
console.log(age);
export 和对应的import
- 在使用import导入时，不能随意命名，要和导出的名字保持一致
- 使用export 导出时，必须是声明或者语句，不能使一个值，例如：
错误写法：const age = 18; export age;
正确写法：export const age = 18;或者export { age }; -
as导出导入时起别名
//导出时起别名
function fn() {}
export { fn as func};
// 导入时起别名
import { func as f1} from './module.js';
-
*整体导入
import * from './module.js';
// 也可以起别名
import * as obj from './module.js';
- export和export default 同时导入 :一定是 export default 的在前
// 正确写法
import age2, { func, age, className } from './module.js';
// 错误写法
import { func, age, className },age2 from './module.js';
Module 的注意事项
- 模块顶层的this指向undefined
- import 命令具有提升效果，会提升到整个模块的头部，率先执行
- import 执行的时候，代码还没执行
- import 和 export 命令只能在模块的顶层，不能在代码块中执行
- import() 可以按条件导入
- 导入导出的复合写法
export { age } from './module.js';
