模块化

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

<!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 文件内容：

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

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

export { num, str, func };

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

<!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 文件内容：

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

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

<!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 文件内容：

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

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

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

<!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 文件内容：

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

results matching ""

    No results matching ""