JavaScript中的export、export default、exports和module.exports（export、export default、exports使用详细）

简介: 在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.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 在语法和用法上有所不同，但它们都实现了模块化的核心概念，封装和组织代码以便重用。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/879568.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【ArcGIS】栅格计算器原理及案例介绍

【ArcGIS】栅格计算器原理及案例介绍

ArcGIS&#xff1a;栅格计算器原理及案例介绍 栅格计算器&#xff08;Raster Calculator&#xff09;原理介绍案例案例1&#xff1a;计算栅格数据平均值 参考 栅格计算器&#xff08;Raster Calculator&#xff09;原理介绍 描述&#xff1a;在类似计算器的界面中&#xff0c;…
阅读更多...
基于对数变换的图像美白增强，Matlab实现

基于对数变换的图像美白增强，Matlab实现

博主简介&#xff1a;matlab图像处理&#xff08;QQ:3249726188&#xff09; ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 本次案例是基于对数变换的图像美白增强&#xff0c;用matlab实现。 一、案例背景和算法介绍 这次案例是美白算法&…
阅读更多...
在实际LabVIEW开发中，哪些算法是常用的？

在实际LabVIEW开发中，哪些算法是常用的？

在LabVIEW的实际开发中&#xff0c;常用的算法主要集中在数据处理、控制系统、信号处理、图像处理等领域。以下是一些常用算法的介绍&#xff1a; 1. PID控制算法 PID&#xff08;比例-积分-微分&#xff09;控制是LabVIEW中常用的算法之一&#xff0c;广泛应用于工业自动化和…
阅读更多...
剃（磨）前插齿刀设计计算开发第一步

剃（磨）前插齿刀设计计算开发第一步

之前接触滚刀比较多&#xff0c;渐开线齿轮滚刀的基准齿形的参数相对简单&#xff0c;都是由直线和圆弧组成的。插齿刀实质是一个开了前角后后角的“特殊齿轮”&#xff0c;在齿轮的齿形上增加“凸角”和“倒角”相对滚刀基准齿形就要复杂一些了&#xff1a; 要设计一款剃&…
阅读更多...
深入分析计算机网络性能指标

深入分析计算机网络性能指标

速率带宽吞吐量时延时延带宽积往返时间RTT利用率丢包率图书推荐内容简介作者简介 速率 连接在计算机网络上的主机在数字信道上传送比特的速率&#xff0c;也称为比特率或数据率。 基本单位&#xff1a;bit/s&#xff08;b/s、bps&#xff09; 常用单位&#xff1a;kb/s&#x…
阅读更多...
MacOS Catalina 从源码构建Qt6.2开发库之01: 编译Qt6.2源代码

MacOS Catalina 从源码构建Qt6.2开发库之01: 编译Qt6.2源代码

安装xcode&#xff0c; cmake&#xff0c; ninja brew install node mac下安装OpenGL库并使之对各项目可见 在macOS上安装OpenGL通常涉及到安装一些依赖库&#xff0c;如MGL、GLUT或者是GLEW等&#xff0c;同时确保LLVM的OpenGL框架和相关工具链的兼容性。以下是一个基本的安装…
阅读更多...
【算法】动态规划—编辑距离

【算法】动态规划—编辑距离

题目 给你两个单词 word1 和 word2&#xff0c; 请返回将 word1 转换成 word2 所使用的最少操作数 。 你可以对一个单词进行如下三种操作&#xff1a; 插入一个字符删除一个字符替换一个字符 思路分析 编辑距离问题就是给定两个字符串 s1 和 s2&#xff0c;只能用三种操作…
阅读更多...
【隐私计算】Paillier半同态加密算法

【隐私计算】Paillier半同态加密算法

一、何为同态加密&#xff08;HE&#xff09;&#xff1f; HE是一种特殊的加密方法&#xff0c;它允许直接对加密数据执行计算&#xff0c;如加法和乘法&#xff0c;而计算过程不会泄露原文的任何信息。计算的结果仍然是加密的&#xff0c;拥有密钥的用户对处理过的密文数据进…
阅读更多...
编程辅助工具下一个热门应用场景是什么？（一）

编程辅助工具下一个热门应用场景是什么？（一）

&#x1f381;&#x1f449;点击进入文心快码 Baidu Comate 官网&#xff0c;体验智能编码之旅&#xff0c;还有超多福利&#xff01;&#x1f381; 本系列视频来自百度工程效能部的前端研发经理杨经纬&#xff0c;她在由开源中国主办的“AI编程革新研发效能”OSC源创会杭州站1…
阅读更多...
QT之QML学习五：添加自定义Qml组件，以及组件管理

QT之QML学习五：添加自定义Qml组件，以及组件管理

开发环境： 1、Qt 6.7.2 2、Pyside6 3、Python 3.11.4 4、Windows 10 重要的事情说三遍，使用自定义qml参考链接： Qt官网参考网址！！！ 重要的事情说三遍，使用自定义qml参考链接： Qt官网参考网址！！！ 重要的事情说三遍，使用自定义qml参考链接： Qt官网参考网址！！！…
阅读更多...
6.1 溪降技术：绳结

6.1 溪降技术：绳结

目录 6.1 绳结电子书&#xff1a;绳结1级概览正确打结打绳结绳结组成部分学习术语八字套结&#xff08;双八字结&#xff09;观看技术步骤双重单结&#xff08;反手结绳耳&#xff09;观看技术步骤骡子结&#xff08;驮马结&#xff09;观看技术步骤 6.1 绳结 电子书&#xff1…
阅读更多...
POI生成Excel文件增加数据验证（下拉序列）

POI生成Excel文件增加数据验证（下拉序列）

POI版本为5.2.2 正常的如果不超过255字符的数据验证可以参照如下代码&#xff1a; /*** <p>设置某列的数据验证</p>* param Sheet 作用于哪一个sheet* param colIndex 需要增加数据验证的列的索引* String[] names 数据验证的序列&#xff0c;就是excel下拉列表的内…
阅读更多...
持续集成与持续交付CI/CD

持续集成与持续交付CI/CD

CI/CD 是指持续集成&#xff08;Continuous Integration&#xff09;和持续部署&#xff08;Continuous Deployment&#xff09;或持续交付&#xff08;Continuous Delivery&#xff09; 持续集成&#xff08;Continuous Integration&#xff09; 持续集成是一种软件开发实践&…
阅读更多...
HTML贪吃蛇游戏

HTML贪吃蛇游戏

文章目录 贪吃蛇游戏 运行效果代码 贪吃蛇游戏 贪吃蛇是一款经典的休闲益智游戏。本文将通过HTML5和JavaScript详细解析如何实现一个简易版的贪吃蛇游戏。游戏的主要逻辑包括蛇的移动、碰撞检测、食物生成等功能。以下是游戏的完整代码及注释解析。&#xff08;纯属好玩&#…
阅读更多...
(学习总结17)C++继承

(学习总结17)C++继承

C继承 一、继承的概念与定义继承的概念继承定义1. 定义格式2. 继承基类成员访问方式的变化 继承类模板 二、基类和派生类间的转换三、继承中的作用域隐藏规则 四、派生类的默认成员函数4个常见默认成员函数实现一个不能被继承的类 五、继承与友元六、继承与静态成员七、多继承及…
阅读更多...
HTML 揭秘：HTML 编码快速入门

HTML 揭秘：HTML 编码快速入门

HTML 揭秘&#xff1a;HTML 编码快速入门 一 . 前端知识介绍二 . HTML 介绍三 . HTML 快速入门四 . HTML 编辑器 - VSCode4.1 插件安装4.2 修改主题配色4.3 修改快捷键4.4 设置自动保存4.5 创建 HTML 文件4.5 书写 HTML 代码4.6 常见快捷键 五 . 基础标签5.1 字体标签5.1.1 col…
阅读更多...
物品识别——基于python语言

物品识别——基于python语言

目录 1.物品识别 2.模型介绍 3.文件框架 4.代码示例 4.1 camera.py 4.2 interaction.py 4.3 object_detection.py 4.4 main.py 4.5 运行结果 5.总结 1.物品识别 该项目使用Python&#xff0c;OpenCV进行图像捕捉&#xff0c;进行物品识别。我们将使用YOLO&#xff08…
阅读更多...
大数据处理技术：HBase的安装与基本操作

大数据处理技术：HBase的安装与基本操作

目录 1 实验名称 2 实验目的 3 实验内容 4 实验原理 5 实验过程或源代码 5.1 Hbase数据库的安装 5.2 创建表 5.3 添加数据、删除数据、删除表 5.4 使用Java操作HBase 6 实验结果 6.1 Hbase数据库的安装 6.2 创建表 6.3 添加数据、删除数据、删除表 6.4 使用Java操…
阅读更多...
【Elasticsearch系列七】索引 crud

【Elasticsearch系列七】索引 crud

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…
阅读更多...
数据结构（Day13）

数据结构（Day13）

一、学习内容 内存空间划分 1、一个进程启动后&#xff0c;计算机会给该进程分配4G的虚拟内存 2、其中0G-3G是用户空间【程序员写代码操作部分】【应用层】 3、3G-4G是内核空间【与底层驱动有关】 4、所有进程共享3G-4G的内核空间&#xff0c;每个进程独立拥有0G-3G的用户空间 …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023