- Objective:
- Breadcrumb:
# 概念阐释
## 语义
通过导出和导入的语法将模块的代码引入到具体需要的文件中；
## 语法
### 导出模块`export`
```js
//ESM写法
export { toggleHiddenElement, changeToFunkyColor };
//CJS写法
module.exports = {checkInventory, processPayment, shipOrder};
```
将模块文件中的函数导出，用逗号隔开函数名称。
```js
export const toggleHiddenElement = (domElement) => {
// logic omitted...
}
```
也可以在单独函数前加`export`
### 导入模块`import`
```js
//ESM写法
import { exportedResourceA, exportedResourceB } from './path/to/module.js';
// CJS写法
const exportedResourceA = require('./path/to/module.js');
```
### 冲突命名
调用不同js文件，却有相同的命名时可以使用`as`关键字
```js
/* main.js */
import { greet as greetEspanol } from 'greeterEspanol.js';
import { greet as greetFrancais } from 'greeterFrancais.js';
greetEspanol(); // Prints: hola
greetFrancais(); // Prints: bonjour
```
# 实例
# 相关内容
## 文件夹路径
### 相同文件夹下 `./filename`
### 一个在主文件夹，一个在子文件夹 `./folderName/fileName`
### 在不同的两个子文件夹 `../folderName/fileName`
先退出当前文件夹，再进入其他文件夹的文件
# 问题
解释以下代码
```js
/* dom-functions.js */
// 模块文件的参数在具体调用时替换成具体的参数
const toggleHiddenElement = (domElement) => {
if (domElement.style.display === 'none') {
domElement.style.display = 'block';
} else {
domElement.style.display = 'none';
}
}
const changeToFunkyColor = (domElement) => {
const r = Math.random() * 255;
const g = Math.random() * 255;
const b = Math.random() * 255;
domElement.style.background = `rgb(${r}, ${g}, ${b})`;
}
//导出这份文件中的函数名称
export { toggleHiddenElement, changeToFunkyColor };
```
```js
/* secret-messages.js */
// 在具体文件中import模块
import { toggleHiddenElement, changeToFunkyColor } from '../modules/dom-functions.js';
// 访问html标签
const buttonElement = document.getElementById('secret-button');
const pElement = document.getElementById('secret-p');
//添加监听事件，没有函数名称，调用模块的函数，并添加到具体的html标签上
buttonElement.addEventListener('click', () => {
toggleHiddenElement(pElement);
changeToFunkyColor(buttonElement);
});
```
# 问题答案
# 参考资料