- Objective: 用对象的导出更加方便
- Breadcrumb:
# 概念阐释
## 语义
每个模块都有一个可以导出**默认**的选项，通常但不仅限于将模块中的对象使用默认，也可以将所有函数写出一个[[JavaScript 对象]]`resources`,然后默认导出对象。
## 语法
### 导出
```js
const resources = {
valueA,
valueB
}
export { resources as default };
//shorthand写法,没有花括号
export default resources;
```
### 导入
如果在输出时用了默认导出就不能使用函数名称导入了。
```js
import {default as resources} from './module.js'
//shorthand写法,没有花括号
import resources from './module.js'
const{valueA, valueB} = resources;
//也可以用模块名称来引入,模块名名称符合JS写法
import module from './module.js'
```
这里`const{valueA, valueB} = resources;`用的是[[js 表达式 Destructured Assignment 解构赋值]]
# 实例
# 相关内容
# 问题
1. 写出默认导出公式和默认导入公式
```js
function changeText(domElement, newText) {
domElement.innerHTML = newText;
}
function changeToFunkyColor(domElement) {
const r = Math.random() * 255;
const g = Math.random() * 255;
const b = Math.random() * 255;
domElement.style.color = `rgb(${r}, ${g}, ${b})`;
}
```
# 问题答案
```js
/* dom-functions.js */
//将函数创建为一个对象
const resources = {
changeText,
changeToFunkyColor
}
//导出
export default resources;
//导入
import resources from 'dom-functions.js';
const{changeText,changeToFunkyColor} = resources;
//文件名导入
import domFunctions from 'dom-functions.js';
const{changeText,changeToFunkyColor} = resources;
```
# 参考资料