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

忘是亡心i 2024-04-22 22:29 76阅读 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.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 在语法和用法上有所不同，但它们都实现了模块化的核心概念，封装和组织代码以便重用。 #####