导出模块的不同方式：export default和export const

蓝斯同学
5,050 阅读6分钟

export default 和 export const 是 JavaScript 中用于导出模块的两种不同的导出语法。

  1. export default:

    • 用于导出模块的默认值。
    • 可以在一个模块中只有一个 export default。
    • 在导入时，可以使用任意名称来引用默认导出的值。
    • 导入时可以省略花括号 {}。

    示例：

    // 模块A.js
const name = 'John';
export default name;

// 模块B.js
import myName from './A.js';
console.log(myName); // 输出: 'John'

  2. export const:

    • 用于导出命名的常量或变量。
    • 可以导出多个常量或变量。
    • 在导入时，需要使用相同的名称引用导出的值。
    • 导入时需要使用花括号 {} 包裹导入的值。

    示例：

    // 模块A.js
export const name = 'John';
export const age = 25;

// 模块B.js
import { name, age } from './A.js';
console.log(name); // 输出: 'John'
console.log(age);  // 输出: 25

需要根据使用场景和需求选择适当的导出方式。如果你的模块只导出一个默认值，可以使用 export default。如果你需要导出多个命名的常量或变量，可以使用 export const。在导入时也要根据导出方式使用相应的语法进行导入。

当涉及到模块的导入和导出时，除了 export default 和 export const，还有其他一些常用的导出语法和导入方式。

其他导出语法包括：

  1. 导出命名的函数或类：

    export function myFunction() {
  // 函数逻辑...
}

export class MyClass {
  // 类定义...
}

  2. 导出命名的变量：

    export const myVariable = 'Hello';
export let myOtherVariable = 42;

  3. 导出多个命名的变量或函数：

    const name = 'John';
const age = 25;
export { name, age };

  4. 导出时重命名：

    const myVariable = 'Hello';
export { myVariable as greeting };

除了 import 语句用于导入模块之外，还有其他导入方式：

  1. 导入默认导出的值：

    import myName from './A.js';

  2. 导入具名导出的值：

    import { name, age } from './A.js';

  3. 导入所有导出的值到一个对象中：

    import * as myModule from './A.js';
console.log(myModule.name);
console.log(myModule.age);

进阶的技巧和用法：

  1. 默认导出和具名导出的混合使用： 在一个模块中，可以同时使用默认导出和具名导出。这种情况下，可以在导入语句中混合使用默认导入和具名导入。

    示例：

    // 模块A.js
export default 'Hello';
export const name = 'John';

// 模块B.js
import defaultGreeting, { name } from './A.js';
console.log(defaultGreeting); // 输出: 'Hello'
console.log(name); // 输出: 'John'

  2. 导出时重命名和导入时重命名的结合使用： 可以在导出模块时使用重命名，然后在导入模块时再次进行重命名。这种方式可以更灵活地控制导入和导出的命名。

    示例：

    // 模块A.js
const myVariable = 'Hello';
export { myVariable as greeting };

// 模块B.js
import { greeting as message } from './A.js';
console.log(message); // 输出: 'Hello'

  3. 导入和导出时使用别名： 可以使用 as 关键字来创建导入和导出时的别名，以提高代码的可读性或避免命名冲突。

    示例：

    // 模块A.js
const myVariable = 'Hello';
export { myVariable as greeting };

// 模块B.js
import { greeting as welcomeMessage } from './A.js';
console.log(welcomeMessage); // 输出: 'Hello'

  • export default 用于导出模块的默认值。一个模块只能有一个默认导出，而且在导入时可以使用任意名称引用默认导出的值。

  • export const 用于导出命名的常量或变量。可以导出多个常量或变量，并且在导入时需要使用相同的名称引用导出的值。

总结一下两者的区别：

  • export default 导出的是默认值，导入时可以使用任意名称。
  • export const 导出的是具名的常量或变量，导入时需要使用相同的名称。

对于在 Vue 中的使用，如果你只需要导出一个默认的 Vue 组件或对象，可以使用 export default。如果你需要导出多个组件或对象，可以使用 export const。

注意： 不要混淆 module.exports 、export不是一个概念！

module.exports 是在 Node.js 中用于导出模块的特殊对象。与 export 和 import 在 ES6 中用于导出和导入模块的语法不同，module.exports 是 Node.js 中的一种导出方式。

通过 module.exports，你可以将一个值或对象作为模块的导出内容，以便其他模块可以使用 require 函数来引入该模块并获取导出的值。

以下是 module.exports 的使用示例：

// 模块A.js
const name = 'John';
const age = 25;

module.exports = {
  name,
  age,
};

// 模块B.js
const myModule = require('./A.js');

console.log(myModule.name); // 输出: 'John'
console.log(myModule.age);  // 输出: 25

在模块A中，我们使用 module.exports 将一个包含 name 和 age 属性的对象导出。然后，在模块B中，我们使用 require 函数引入模块A，并将其返回值赋给 myModule 变量。通过访问 myModule 对象的属性，我们可以获取模块A导出的值。

需要注意的是，使用 module.exports 导出的是一个整个对象或值，而不是单个的变量或函数。如果你只想导出一个单独的变量或函数，可以直接给 module.exports 赋值，例如 module.exports = myVariable。

总结起来，module.exports 是 Node.js 中用于导出模块的方式，通过它可以导出一个对象或值，并在其他模块中使用 require 来引入和访问导出的内容。与 ES6 中的 export 和 import 语法相比，module.exports 是在 Node.js 环境下使用的常见模块导出方式。

module.exports 和 export 都是用于在 JavaScript 模块中导出内容的方式，但是它们在语法和使用上有一些差异。

  1. module.exports：

    • 在 Node.js 环境中使用的导出方式。
    • 可以直接赋值为一个对象、函数、类或其他任意值。
    • 导出的内容可以是单个的变量、函数、类，也可以是一个包含多个属性或方法的对象。
    • 可以通过 require 函数引入模块并获取导出的内容。
    • 用法示例： 
      // 模块A.js
const myVariable = 'Hello';
module.exports = myVariable;

// 模块B.js
const myModule = require('./A.js');
console.log(myModule); // 输出: 'Hello'

  2. export 和 import：

    • 在 ES6（ECMAScript 2015）及以上版本中引入的模块导入导出语法。
    • 可以使用 export 关键字导出变量、函数、类或其他声明。
    • 导出的内容可以是具名导出（通过名称导出）或默认导出（只有一个默认导出）。
    • 可以使用 import 语句引入模块并获取导出的内容。
    • 用法示例： 
      // 模块A.js
export const myVariable = 'Hello';

// 模块B.js
import { myVariable } from './A.js';
console.log(myVariable); // 输出: 'Hello'

主要的区别在于语法和使用环境。module.exports 是在 Node.js 中使用的导出方式，而 export 和 import 是在支持 ES6 模块的现代浏览器或使用了 Babel 等工具进行转译的环境中使用的导出方式。

在使用时，可以根据你的开发环境和需求选择适当的导出方式。如果你正在开发一个 Node.js 应用程序或使用 CommonJS 模块规范，可以使用 module.exports。如果你正在开发一个现代的 JavaScript 应用程序，可以选择使用 export 和 import 来进行模块导入导出操作。

需要注意的是，在同一个模块中不应同时使用 module.exports 和 export 来导出内容，因为它们使用的是不同的导出语法。

### 干货：关注我或微信公众号：全栈思维导航，目前在写一套开源项目（社交类）：基于Spring Boot + Vue3 + 小程序 + APP的开源项目。关注不错过！！！

avatar
文章
阅读
粉丝