JavaScript中导出模块的不同方式？

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。

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