Module 模块

Module 是什么

1. 什么是模块
   模块：一个一个的局部作用域的代码块
2. 什么是模块系统
   模块系统需要解决的主要问题
   (1) 模块化的问题
   (2) 消除全局变量
   (3) 管理加载顺序

export default 和对应的 import

1. 认识导出和导入
   导出的东西可以被导入(import)，并访问到
   一个模块没有导出，也可以将其倒入
   被倒入的代码都会执行一遍，也仅会执行一遍，即使多次倒入
2. 基本用法

// 导出文件
const age = 18;
export default age;

// 导入文件
import age from './module.js'
console.log(age);

export 和对应的 import

1. 基本用法
   (1) export 声明或语句

export const age = 18

(2)

const age = 18;
export { age };

导入时不能随意命名

import { age } from './module.js';
console.log(age);

2. 多个导出

// 导出
// (1) 分开导出
export function fn() {}
export class className {}
export const age = 18;
// (2) 一起导出
function fn() {}
class className {}
const age = 18;
export { fn, className, age }
// 导入
import { fn, className, age } from './module.js';

3. 导出导入时起别名

// 导出时起别名
export { fn as func, className, age };
// 导入时起别名
import { func, className as Person, age } from './module.js';

4. 整体导入
   会导入所有输出，包括 export default 导出的

import * as obj from './module.js';

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

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

module 的注意事项

1. 模块顶层的 this 指向
   模块中，顶层的 this 指向 undefined

// 模块文件
if (typeof this !== 'undefined') {
	throw new Error('请使用模块的方式加载');
}

2. import 和 import()
   import 命令具有提升效果，会提升到整个模块的头部，率先执行
   import 执行的时候，代码还没执行
   import 和 export 命令只能在模块的顶层，不能在代码块中执行

import() 可以按条件导入

if (PC) {
	import('pc.js').then().catch();
} else if (Mobile) {
	import('mobile.js').then().catch();
}

3. 导入导出的复合写法

export { age } from './module.js';
// 等价于
import { age } from './module.js';
export { age };