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

8 篇文章 1 订阅
5 篇文章 0 订阅

简介: 在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 模块支持?

  1. 在 package.json 文件中设置 "type": "module",这样 Node.js 就会将所有 .js 文件视为 ES6 模块。
  2. 将文件扩展名改为 .mjs,这样 Node.js 会自动将其视为 ES6 模块。
  3. 在html的script 标签中添加type="module"属性,​​​​​​​就像这样<script type="module" src="main.js"></script>。

1、export (ES6)

注意事项:

导出时(export)

  1. 命名导出:使用export关键字导出变量、函数、类或值时,需要为它们指定名称。这些名称将在其他模块中用于导入
  2. 默认导出与命名导出:export default用于导出模块的默认值,而命名导出使用export关键字后跟变量名或函数名。一个模块只能有一个默认导出,但可以有多个命名导出
  3. 导出表达式:你可以直接导出变量、函数或类的值,或者导出它们的计算结果(如表达式)。
  4. 重新导出:你可以使用export { name1, name2, ... } from 'module-name'语法来重新导出另一个模块的命名导出。

引入时(import)

  1. 命名匹配:当使用命名导入时,必须确保导入的名称与导出模块中定义的名称完全匹配
  2. 默认导入与命名导入:使用import关键字时,可以指定一个名称来接收默认导出(import name from 'module-name'),或者使用花括号来接收命名导出(import { name1, name2 } from 'module-name')。
  3. 静态分析:与默认导出一样,import语句也是静态的,需要在编译时确定模块的路径。
  4. 路径正确性:确保在import语句中指定的模块路径是正确的。相对路径或绝对路径都可以,但如果是相对路径,需要注意当前文件与目标模块文件之间的相对位置。
  5. 模块加载:import语句会在运行时加载模块,如果模块不存在或发生错误,程序将抛出异常。

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

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

2、export default (ES6)

注意事项:

导出时(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 导出这个函数或对象。

引入时(import)

  1. 命名自由:在引入时,你可以为导入的模块指定任何名称,因为 export default 允许你在导入时使用任意名称
  2. 无需花括号:与命名导出不同,引入默认导出时不需要使用花括号 {}
  3. 静态分析:由于 import 语句是静态的,编译器需要在编译时就能确定模块的路径。这意味着你不能在运行时动态地改变 import 的路径。
  4. 路径正确性:确保引入路径(./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)

  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。

引入时(require)

  1. 路径:使用 require 引入模块时,需要提供正确的文件路径。可以是相对路径(如 ./myModule)或绝对路径(如 /path/to/myModule)。此外,Node.js 还会查找 node_modules 目录中的模块。
  2. 赋值:require 语句会将引入的模块内容赋值给一个变量。你可以为这个变量指定任何名称
  3. 缓存:Node.js 会缓存已加载的模块,这意味着多次 require 同一个模块会返回相同的对象(除非使用 require.cache 手动清除缓存)。
  4. 循环依赖:虽然Node.js可以处理一定程度的循环依赖,但过度使用或不当使用循环依赖可能导致不可预测的行为或错误。因此,应尽量避免不必要的循环依赖。

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

实例1
// 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!"

4、module.exports

注意事项:

导出时(module.exports)

  1. 导出内容:module.exports 可以导出任何 JavaScript 数据类型,包括函数、对象、数组、字符串、数字等。一旦你为 module.exports 分配了一个值,它将替代默认的导出对象。
  2. 不要重复赋值:一旦你为 module.exports 分配了一个值,之后的任何对 module.exports 的赋值操作都将覆盖之前的值。因此,通常建议在文件的顶部进行 module.exports 的赋值
  3. 导出函数:如果你导出的是一个函数,确保该函数在调用时可以访问到它需要的所有外部变量和上下文。
  4. 模块缓存:Node.js 会缓存已加载的模块,这意味着如果你多次 require 同一个模块,它将只执行一次,并返回第一次执行的结果。确保你的模块在导出时处于正确的状态。
  5. 避免循环依赖:虽然 Node.js 可以处理一定程度的循环依赖,但过度使用或不当使用循环依赖可能导致未定义的行为或错误。

引入时(require)

  1. 路径:使用 require 引入模块时,需要提供正确的文件路径。可以是相对路径(如 ./myModule)或绝对路径(如 /path/to/myModule)。如果省略路径,Node.js 将查找 node_modules 目录中的模块。
  2. 命名:你可以为引入的模块指定任何变量名,这通常是模块导出的主要功能的名称
  3. 错误处理:如果 require 无法找到指定的模块,它将抛出一个错误。确保你的代码可以妥善处理这些错误,特别是在动态引入模块时。
  4. 缓存:由于 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 在语法和用法上有所不同,但它们都实现了模块化的核心概念,封装和组织代码以便重用。

  • 40
    点赞
  • 76
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

北城笑笑

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值