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

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

如何启用 ES6 模块支持？

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

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

在html的script 标签中添加type="module"属性，​​​​​​​就像这样<script type="module" src="main.js"></script>。

1、export (ES6)

注意事项：

导出时（export）

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

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

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

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

引入时（import）

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

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

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

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

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

export 关键字是ES6模块系统的一部分，它允许你从一个文件中导出多个变量、函数、类或任何其他值。导入时，你可以根据需要选择性地导入这些值。

实例1// myModule.js export const myVariable = "Hello from myVariable!"; export function myFunction() { console.log("Hello from myFunction!"); }// myIndex.jsimport { 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);

2、export default (ES6)

注意事项：

导出时（export default）

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

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

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

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

引入时（import）

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

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

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

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

export default 允许你为一个模块指定一个默认导出。这意味着导入该模块的文件可以使用任何名称来接收这个默认导出，而不仅仅是在导出时使用的名称。

实例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);

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

需要在package.json 文件中添加 "type": "module"，

或者在html中使用<script type="module" src="main.js"></script>。

3、exports (CommonJS)

注意事项：

导出时（exports）

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

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

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

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

引入时（require）

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

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

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

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

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

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

4、module.exports

注意事项：

导出时（module.exports）

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

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

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

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

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

引入时（require）

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

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

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

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

可以看到module.exports和exports的使用特性是差不多的，下面是使用实例：

实例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"

5、module.exports和exports的使用建议

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

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

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

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

​​​​​​​

小结：

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

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

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

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