export、exports以及export default 的导入导出

合集 - 前端(9)

1.CSS、JS、jQuery中选择器总结2023-05-122.JS中得到自定义属性值2023-05-123.为选中的按钮添加特定属性2023-05-134.Tab栏切换2023-05-135.event 和 this 的区别2023-05-146.下拉菜单的实现2023-05-147.mouse事件2023-05-148.Vue中watch监听属性新旧值相同问题解决方案2023-12-01

9.export、exports以及export default 的导入导出2023-12-05

收起

1. `export` 导出：

- 使用 `export` 关键字导出具名变量、函数或对象。
- 导出的变量、函数或对象可以使用解构赋值导入。
- 可以导出多个变量、函数或对象，使用逗号分隔。
- 可以使用 `export { variable, function, object }` 语法来导出多个变量、函数或对象。
- 示例代码：
```javascript
// 导出具名变量
export const variable1 = 'value1';
export function function1() {
// ...
}
export const object1 = { key: 'value' };

// 导出多个变量、函数或对象
export { variable2, function2, object2 };
```

- 导入 `export` 导出的变量、函数或对象：
```javascript
// 使用解构赋值导入
import { variable1, function1, object1 } from './module';
```

2. `export default` 导出：
- 使用 `export default` 关键字导出默认变量、函数或对象。
- 导出的默认变量、函数或对象在导入时可以使用任意名称。
- 每个模块只能有一个默认导出。
- 示例代码：
```javascript
// 导出默认变量
export default 'value';
// 导出默认函数
export default function() {
// ...
}
// 导出默认对象
export default { key: 'value' };
```

- 导入 `export default` 导出的变量、函数或对象：
```javascript
// 使用任意名称导入默认变量、函数或对象
import anyName from './module';
```

3. `module.exports` 导出（CommonJS）：
- 在 Node.js 环境下，可以使用 `module.exports` 导出变量、函数或对象。
- `module.exports` 导出的内容可以在其他模块中使用 `require` 函数导入。
- 示例代码：
```javascript
// 导出变量
module.exports.variable = 'value';
// 导出函数
module.exports.function = function() {
// ...
}
// 导出对象
module.exports.object = { key: 'value' };
```

- 导入 `module.exports` 导出的内容：
```javascript
// 使用 require 导入
const module = require('./module');
const variable = module.variable;
const func = module.function;
const object = module.object;
```

需要注意的是，`export` 和 `export default` 是 ES6 模块系统的语法，可以在现代浏览器和支持 ES6 模块的 Node.js 版本中使用。而 `module.exports` 是 CommonJS 模块系统的语法，主要用于 Node.js 环境。在同一个模块中，不能同时使用 ES6 模块系统和 CommonJS 模块系统的语法。