前言

在JavaScript中，export 和 export default 是 ES6 模块系统的核心部分，用于从文件中导出函数、关键字，对象或值，使其可以在其他文件中通过 import 语句导入和使用，而 exports和 module.exports 是CommonJS模块系统的一部分，在 Node.js 环境中，你可以使用 exports 或 module.exports 来导出模块，但这并不是 ES6 标准的一部分。

一. export

export (ES6)，请看

在 JavaScript 开发中，export 是ES6引入的关键特性之一，用于从模块中导出函数、类、变量等，以便在其他文件中使用。它支持命名导出和默认导出，帮助开发者更好地组织代码，促进复用和维护。

1. 导出时（export）

1. 命名导出：使用export关键字导出变量、函数、类或值时，需要为它们指定名称。这些名称将在其他模块中用于导入。

2. 默认导出与命名导出：export default用于导出模块的默认值，而命名导出使用export关键字后跟变量名或函数名。一个模块只能有一个默认导出，但可以有多个命名导出。

3. 导出表达式：你可以直接导出变量、函数或类的值，或者导出它们的计算结果（如表达式）。

4. 重新导出：你可以使用export { name1, name2, ... } from 'module-name'语法来重新导出另一个模块的命名导出。

2. 引入时（import）

1. 命名匹配：当使用命名导入时，必须确保导入的名称与导出模块中定义的名称完全匹配。

2. 默认导入与命名导入：使用import关键字时，可以指定一个名称来接收默认导出（import name from 'module-name'），或者使用花括号来接收命名导出（import { name1, name2 } from 'module-name'）。

3. 静态分析：与默认导出一样，import语句也是静态的，需要在编译时确定模块的路径。

4. 路径正确性：确保在import语句中指定的模块路径是正确的。相对路径或绝对路径都可以，但如果是相对路径，需要注意当前文件与目标模块文件之间的相对位置。

5. 模块加载：import语句会在运行时加载模块，如果模块不存在或发生错误，程序将抛出异常。

3. 使用示例

示例 1

 // myModule.js  
 export const myVariable = "Hello from myVariable!";  
 export function myFunction() {  
   console.log("Hello from myFunction!");  
 }
  
 // myIndex.js
 import { myVariable, myFunction } from './myModule';  
 console.log(myVariable); // 输出 "Hello from myVariable!"  
 myFunction(); // 输出 "Hello from myFunction!"

示例 2

 // debounce.js导出函数
 // 防抖函数实现  
 function debounce(func, wait) {  
   let timeout;  
   return function() {  
    const context = this;  
     const args = arguments;  
     clearTimeout(timeout);  
     timeout = setTimeout(() => {  
       func.apply(context, args);  
     }, wait);  
  };  
 }   
 export { debounce };// 使用 export 导出防抖函数 
  
 // app.js  
 // 导入防抖函数  
 import { debounce } from './debounce';  
 // 假设你有一个需要防抖的函数  
 function doSomething() {  
   console.log('Doing something...');  
 }   
 // 使用防抖函数包装 doSomething  
 const debouncedDoSomething = debounce(doSomething, 500); // 设置500毫秒的防抖时间  
 // 在某个高频事件中调用防抖函数  
 window.addEventListener('resize', debouncedDoSomething);

4. ES6语法

使用ES6语法模块，注意事项，请看

1. 首先，默认的JS文件中是不支持es6中的import、export语法的。因为Node.js 在早期版本中采用的是 CommonJS 模块规范，它使用require和module.exports来导入和导出模块。

2. 在package.json文件中设置"type": "module"，这样 Node.js 就会将所有.js文件视为 ES6 模块。

3. 将文件扩展名改为.mjs，这样 Node.js 会自动将其视为 ES6 模块。

4. 在html的script标签中添加type="module"属性，就像这样。

二. export default

export default (ES6)，请看

在ES6中，export default 用于从模块导出一个默认值，如函数、类或对象。导入时可以使用任意名称接收这个默认导出，简化了代码的使用。每个模块只能有一个默认导出。

1. 导出时（export default）

1. 单一导出：export default 只能用于导出一个模块、函数、对象或值。你不能在同一个文件中使用多个 export default。

2. 命名无要求：在导出时，你可以为 export default 的内容指定任何名称，但在引入时这个名称会被忽略。

3. 函数表达式：你可以直接使用函数表达式进行默认导出，如 export default function myFunc() {}，或者使用匿名函数 export default function() {}。

4. 变量导出：虽然不能直接使用 export default let variable = ... 这样的语法，但你可以先将变量赋值给一个函数或对象，然后使用 export default 导出这个函数或对象。

2. 引入时（import）

1. 命名自由：在引入时，你可以为导入的模块指定任何名称，因为 export default 允许你在导入时使用任意名称。

2. 无需花括号：与命名导出不同，引入默认导出时不需要使用花括号 {}。

3. 静态分析：由于 import 语句是静态的，编译器需要在编译时就能确定模块的路径。这意味着你不能在运行时动态地改变 import 的路径。

4. 路径正确性：确保引入路径（./path/to/module）是正确的，否则会导致模块未找到的错误。

3. 使用示例

示例 1

 // myModule.js 导出简单对象
 const myDefaultValue = "Hello from export default!";  
 export default myDefaultValue;
  
 // myIndex.js 引入导出的对象
 import anythingModule from './myModule'; 
 // 注意这里我们使用了 "anythingModule" 这个名称，但它可以是任何名称  
 console.log(anythingModule); // 输出 "Hello from export default!"

示例 2

 // myObject.js  
 // 使用 export default 导出对象
 export default {  
   name: 'John Doe',  
   age: 30,  
   greet: function() {  
     console.log('Hello, my name is ' + this.name);  
   }  
 };  
  
 // anotherFile.js  
 // 这里可以使用任意名称引入导出的对象  
 import myCustomObject from './myObject.js';  
 // 现在你可以使用引入的对象  
 console.log(myCustomObject.name); // 输出 "John Doe"  
 myCustomObject.greet(); // 输出 "Hello, my name is John Doe"

示例 3

 // debounce.js 导出防抖函数
 // 防抖函数  
 function debounce(func, wait) {  
   let timeout;  
   return function() {  
     const context = this;  
     const args = arguments;  
     clearTimeout(timeout);  
     timeout = setTimeout(() => {  
      func.apply(context, args);  
     }, wait);  
   };  
 }  
 export default debounce;// 使用 export default 导出防抖函数  
  
 // app.js 引入导出的防抖函数  
 import debounce from './debounce';  
 // 假设你有一个需要防抖的函数  
 function doSomething() {  
   console.log('Doing something...');  
 }  
 // 使用防抖函数包装 doSomething  
 const debouncedDoSomething = debounce(doSomething, 500); // 设置500毫秒的防抖时间  
 // 在某个高频事件中调用防抖函数  
 window.addEventListener('resize', debouncedDoSomething);

4. 注意事项

默认的JS文件是不支持es6中的 import、export 语法的，

需要在 package.json文件中，配置添加"type": "module"属性使用，

如果是在html中使用，则需要配置。

三. exports

exports (CommonJS)，请看

在Node.js中，exports 用于从模块导出函数、对象或值，使得这些内容可以在其他文件中通过 require 导入使用。它提供了一种简单的方式来共享代码。

1. 导出时（exports）

1. exports和module.exports：exports 是 module.exports 的一个引用。当你为 exports 分配一个新值时，它不再引用 module.exports。因此，通常推荐直接使用 module.exports，以避免混淆。

2. 导出类型：你可以导出函数、对象、值等。如果导出一个单一的值，通常使用 module.exports = value;。如果导出多个值，则使用 exports.name = value; 或 module.exports = { name: value };。

3. 不要混用：在同一个模块中，不要混用 exports 和 module.exports 来导出不同的内容，因为这会导致混淆和不可预期的行为。

4. 导出函数或类：当你导出函数或类时，可以直接将函数或类赋值给 module.exports。

2. 引入时（require）

1. 路径：使用 require 引入模块时，需要提供正确的文件路径。可以是相对路径（如 ./myModule）或绝对路径（如 /path/to/myModule）。此外，Node.js 还会查找 node_modules 目录中的模块。

2. 赋值：require 语句会将引入的模块内容赋值给一个变量。你可以为这个变量指定任何名称。

3. 缓存：Node.js 会缓存已加载的模块，这意味着多次 require 同一个模块会返回相同的对象（除非使用 require.cache 手动清除缓存）。

4. 循环依赖：虽然Node.js可以处理一定程度的循环依赖，但过度使用或不当使用循环依赖可能导致不可预测的行为或错误。因此，应尽量避免不必要的循环依赖。

3. 使用示例

 // myModule.js  
 exports.myFunction = function() {  
   console.log("Hello from myFunction!");  
 };  
 exports.myVariable = "Hello from myVariable!";
  
// myIndex.js
 const myModule = require('./myModule');  
 myModule.myFunction(); // 输出 "Hello from myFunction!"  
 console.log(myModule.myVariable); // 输出 "Hello from myVariable!"

exports 对象在Node.js环境中特别常见，它是模块系统的一部分。当你创建一个新的模块文件时，exports 对象默认是可用的，你可以向它添加属性，这些属性可以在其他文件中通过 require 函数导入使用。

四. module.exports

在Node.js中，module.exports 用于导出模块的内容，如函数、对象或值，以便其他文件可以通过 require 导入使用。它是模块间共享代码的核心机制。

1. 导出时（module.exports）

1. 导出内容：module.exports 可以导出任何 JavaScript 数据类型，包括函数、对象、数组、字符串、数字等。一旦你为 module.exports 分配了一个值，它将替代默认的导出对象。

2. 不要重复赋值：一旦你为 module.exports 分配了一个值，之后的任何对 module.exports 的赋值操作都将覆盖之前的值。因此，通常建议在文件的顶部进行 module.exports 的赋值。

3. 导出函数：如果你导出的是一个函数，确保该函数在调用时可以访问到它需要的所有外部变量和上下文。

4. 模块缓存：Node.js 会缓存已加载的模块，这意味着如果你多次 require 同一个模块，它将只执行一次，并返回第一次执行的结果。确保你的模块在导出时处于正确的状态。

5. 避免循环依赖：虽然 Node.js 可以处理一定程度的循环依赖，但过度使用或不当使用循环依赖可能导致未定义的行为或错误。

2. 引入时（require）

1. 路径：使用 require 引入模块时，需要提供正确的文件路径。可以是相对路径（如 ./myModule）或绝对路径（如 /path/to/myModule）。如果省略路径，Node.js 将查找 node_modules 目录中的模块。

2. 命名：你可以为引入的模块指定任何变量名，这通常是模块导出的主要功能的名称。

3. 错误处理：如果 require 无法找到指定的模块，它将抛出一个错误。确保你的代码可以妥善处理这些错误，特别是在动态引入模块时。

4. 缓存：由于 Node.js 缓存已加载的模块，所以 require 的结果将始终是第一次加载时的结果，除非你清除 require.cache。

可以看到，module.exports和exports的使用特性是相差不多。

3. 使用示例

示例 1

 // myModule.js  
 const myValue = 'Hello, world!';  
 // 使用 module.exports 导出单一值  
 module.exports = myValue;  
  
 // app.js  
 // 引入导出的单一值  
 const myValue = require('./myModule');  
 console.log(myValue); // 输出 "Hello, world!"  

示例 2

 // myModule.js  
 // 使用 module.exports 导出对象  
 module.exports = {  
   myFunction: function() { /* ... */ },  
   anotherValue: 'Another value'  
 };
  
 // app.js  
 // 引入导出的多个值（如果 myModule.js 是这样导出的）  
 const myModule = require('./myModule');  
 console.log(myModule.myFunction); // 输出 myFunction 函数  
 console.log(myModule.anotherValue); // 输出 "Another value"

五. module.exports 和 exports

module.exports 和 exports的区别和注意事项，请看

• 一致性：在你的模块中，选择使用module.exports或exports，并保持一致。这样可以避免混淆，并使得其他开发者更容易理解你的代码。

• 简洁性：如果你只需要导出一个值（如一个函数或对象），使用module.exports通常更简洁。

• 扩展性：如果你打算逐步添加多个导出项，并且想要保持对exports对象的引用，那么使用exports可能更合适。

• 避免混用：不要在同一模块中混用exports和module.exports来导出不同的内容，这会导致不可预期的行为。

六. 发布时间

1. module.exports - 最早出现在CommonJS规范中，这是Node.js所采用的模块系统。它允许你导出一个值或者一个对象，这样其他文件就可以通过require()来导入这个模块。
2. exports - 这也是CommonJS的一部分，在Node.js中使用。exports实际上是指向module.exports的一个引用。你可以直接在exports上添加属性来扩展module.exports。但是要注意，如果直接赋值给exports（例如：exports = someFunction;），这不会改变module.exports，因为这时exports不再指向module.exports。
3. export - 随着ES6（现在称为ES2015）引入了新的模块系统，export关键字开始被用来定义模块接口。它可以用来导出函数、类、原始值等，并且支持命名导出，即可以导出多个具有不同名称的实体。
4. export default - 也是ES6模块系统的一部分，用于导出默认值。每个模块只能有一个默认导出。当从另一个模块导入时，可以通过任意名称来接收默认导出的内容。

所以，按照它们首次被引入的时间顺序排列如下：

1. module.exports(最早，随CommonJS一起)
2. exports(同样属于CommonJS)
3. export(随ES6模块系统引入)
4. export default(同样是ES6模块系统的特性)

需要注意的是，虽然这些技术按时间顺序排列，但实际使用时选择哪种取决于你的环境和需求。如果你正在开发Node.js应用，可能更多会用到module.exports和exports；而在现代前端项目中，基于浏览器的应用通常会使用export和export default这样的ES6语法。

七. 本篇小结

1. exports 是CommonJS模块系统的一部分，常见于Node.js环境。

2. export 和 export default 是ES6模块系统的一部分，适用于现代浏览器和Node.js环境（通过Babel等转换工具）。

3. export 允许你导出多个值，而 export default 允许你指定一个默认导出。

4. exports 和 export 在语法和用法上有所不同，但它们都实现了模块化的核心概念，封装和组织代码以便重用。

5. ES6模块(export和export default) 使用import语句来导入模块内容；CommonJS模块(exports和module.exports) 使用require函数来导入模块内容。