CommonJS与ESModule标准
模块化的作用
- 解决全局变量污染
- 解决依赖混乱
- 便于代码功能分类
- 利于代码维护管理
规范内容
- CommonJS规定：
-
每个独立的js文件中的全局变量是互不干扰的，不会污染其他js文件
-
CommonJS是一个社区规范，node环境支持，每个js文件都是一个CMJ模块，使用node运行其中一个模块（入口模块）
-
当某模块需要使用其他模块的内容时，其他模块要【暴露】此内容，而此模块需要【导入】此内容
1.js
function a(a,b){
return a+b;
};
// 导出，暴露
module.exports = {
a
};
2.js
// 导入，返回暴露的对象内容
const a = require('./1.js');
导入模块时，可以省略
.js
必须以./或../开头
- ES Module规定：
- 这是随着ES6发布的官方模块化标准，目前浏览器和新版本node环境均支持
- 当某模块需要使用其他模块的内容时，其他模块要【暴露】此内容，而此模块需要【导入】此内容，一个模块可以同时存在两种导出方式，最终会合并为一个「对象」导出
// 默认导出（暴露），只能暴露一个内容
export default 3
// 具名导出
export const d = 3;
const d=3;
export {d}
// as 另取名
const k = 3;
export k as m;
// 导入
// 仅运行一次该模块，不导入任何内容
import "模块路径"
// 导入属性 a、b，放到变量a、b中
import { a, b } from "模块路径"
// 导入属性 default，放入变量c中
import c from "模块路径"
// default->c，a->a, b->b
import c, { a, b } from "模块路径"
// 将模块对象放入到变量obj中
import * as obj from "模块路径"
// 以上均为静态导入
import("模块路径") // 动态导入，返回一个Promise，完成时的数据为模块对象
注意：静态导入的代码必须为在代码顶端，也不可放入代码块中
另外，静态导入的代码绑定的符号是常量，不可更改
导入模块时，不可以省略.js
两者最主要的区别就是导入与导出的区别
CommonJS只用于node环境
ES Module可用于node环境与浏览器环境