模块

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

模块系统解决的问题

• 模块化的问题
• 消除全局变量
• 管理加载顺序

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';