manual-javascript
Version:
JavaScript 是一种具有函数优先的轻量级、解释型、即时编译型的编程语言。
132 lines (111 loc) • 2.55 kB
Markdown
# 模块化
执行下面的代码，使用 ES Modules 标准语法导入模块。
```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
<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
<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
<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!');
}
```