JavaScript中的export、export default、exports和module.exports(export、export default、exports使用详细)

北城笑笑 2024-06-22 13:05:11 阅读 79

简介: 在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.exportsexports,并保持一致。这样可以避免混淆,并使得其他开发者更容易理解你的代码。
简洁性:如果你只需要导出一个值(如一个函数或对象),使用module.exports通常更简洁。
扩展性:如果你打算逐步添加多个导出项,并且想要保持对exports对象的引用,那么使用exports可能更合适。
避免混用:不要在同一模块中混用exportsmodule.exports来导出不同的内容,这会导致不可预期的行为。

​​​​​​​

小结:

exports 是CommonJS模块系统的一部分,常见于Node.js环境。
export 和 export default 是ES6模块系统的一部分,适用于现代浏览器和Node.js环境(通过Babel等转换工具)。
export 允许你导出多个值,而 export default 允许你指定一个默认导出。
exports 和 export 在语法和用法上有所不同,但它们都实现了模块化的核心概念,封装和组织代码以便重用。



声明

本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。