# 模块化

执行下面的代码，使用 ES Modules 标准语法导入模块。

```html
<!DOCTYPE html>
<html lang="zh-Hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript</title>
</head>
<body>
    <script type="module">
        import * as main from './main.js';
        console.log(main.num);
        console.log(main.str);
        console.log(main.func());
    </script>
</body>
</html>
```

上例中的 `main.js` 文件内容：

```javascript
let num = 233;
let str = 'Hello World!';

function func() {
    return 'Hello JavaScript!';
}

export { num, str, func };
```

也可以使用默认导出方式。

```html
<!DOCTYPE html>
<html lang="zh-Hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript</title>
</head>
<body>
    <script type="module">
        import * as main from './main.js';
        console.log(main.default.num);
        console.log(main.default.str);
        console.log(main.default.func());
    </script>
</body>
</html>
```

上例中的 `main.js` 文件内容：

```javascript
export default {
    num: 233,
    str: 'Hello World!',
    func: function () {
        return 'Hello JavaScript!';
    }
};
```

还可以使用简易导出方式。

```html
<!DOCTYPE html>
<html lang="zh-Hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript</title>
</head>
<body>
    <script type="module">
        import {num, str, func} from './main.js';
        console.log(num);
        console.log(str);
        console.log(func());
    </script>
</body>
</html>
```

上例中的 `main.js` 文件内容：

```javascript
export let num = 233;
export let str = 'Hello World!';

export function func() {
    return 'Hello JavaScript!';
}
```

执行下面的代码，动态导入模块。

```html
<!DOCTYPE html>
<html lang="zh-Hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript</title>
</head>
<body>
    <button id="btn">Click</button>
    <script type="module">
        const btn = document.getElementById('btn');
        btn.addEventListener('click', function () {
            import('./main.js').then(main => main.func());
        });
    </script>
</body>
</html>
```

上例中的 `main.js` 文件内容：

```javascript
export function func() {
    alert('Hello World!');
}
```

