commonjs和esmodule的导入导出细节

CommonJS和ES Module是JavaScript中两种不同的模块系统，它们在导入导出细节上存在差异，以下是两者的具体对比以及方便区分记忆的方法：

1. 导入导出细节

1. CommonJS
   • 导出：使用module.exports或exports对象来导出模块中的变量、函数或类等。可以导出多个成员，但需要将它们附加到module.exports或exports对象上。
   • 导入：使用require函数来导入其他模块。require函数返回的是被导入模块module.exports或exports对象的内容。
2. ES Module
   • 导出：使用export关键字来导出模块中的变量、函数、类等。可以导出多个成员，也可以使用默认导出（export default）来导出一个成员。
   • 导入：使用import语句来导入其他模块。import语句可以解构被导入模块的内容，也可以导入默认导出的成员。

2. 差异

1. 语法：CommonJS使用require和module.exports进行导入导出，而ES Module使用import和export关键字。
2. 模块加载时机：CommonJS是运行时加载模块，即在代码执行到require语句时才会加载模块。而ES Module是在静态编译期间就确定模块的依赖，并在运行时加载。
3. 值的类型：CommonJS导出的是一个值的拷贝，因此模块内部对导出值的修改不会影响到外部。而ES Module导出的是一个引用，模块内部对导出值的修改可以同步到外部。
4. 作用域：CommonJS的模块作用域是动态的，模块中定义的变量和函数会被添加到全局作用域中（尽管在实际使用中，这通常通过模块封装来避免）。而ES Module的模块作用域是静态的，模块中定义的变量和函数不会污染全局作用域。
5. 异步加载：ES Module支持异步加载模块，以提高性能和减少启动时间。而CommonJS只能同步加载模块。
6. 循环依赖：由于ES Module在静态编译期间就确定模块的依赖关系，因此它可以处理循环依赖。而CommonJS可能会因为循环依赖导致程序崩溃。
7. 浏览器兼容性：ES Module在现代浏览器中得到广泛支持，而CommonJS主要在Node.js环境中使用。

3. 方便区分记忆的方法

1. 语法差异：记住CommonJS使用require和module.exports这对“动词+名词”的组合进行导入导出，而ES Module使用import和export这对“动词+动词”的组合。
2. 加载时机：将CommonJS想象成“按需加载”的模型，即代码执行到需要时才加载模块；而将ES Module想象成“预先规划”的模型，在编译期间就确定好模块的依赖关系。
3. 值的类型：记住CommonJS导出的是“值的拷贝”，就像复印了一份文件；而ES Module导出的是“值的引用”，就像提供了一个文件的链接。
4. 作用域：将CommonJS想象成“开放”的模型，模块中的变量和函数可能会影响到全局作用域；而将ES Module想象成“封闭”的模型，模块中的变量和函数被严格封装在模块内部。

4. esmodule特殊情况

esmodule可以这样写

// 写法一
export var m = 1;

// 写法二
var m = 1;
export {m};

// 写法三
var n = 1;
export {n as m};

// 报错
function f() {}
export f;

// 正确
export function f() {};

// 正确
function f() {}
export {f};

5. 思考

1. CommonJS可以记忆成数据量大，所有的关键词配上s，然后实际导出都是借助module，exports 实际上只是对 module.exports 的一个引用。
2. esmodule导出：的实质是，在接口名与模块内部变量之间，建立了一一对应的关系。（简单记忆：直接导出或者在对象中导出，可配合as改名）