javascript异步动态加载模块，导出和导入代码

cdcdhj

于 2024-10-16 21:52:50 发布

阅读量297

点赞数 3

分类专栏： javascript学习日记文章标签： javascript 开发语言

本文链接：https://blog.youkuaiyun.com/cdcdhj/article/details/142992460

版权

javascript学习日记专栏收录该内容

151 篇文章

订阅专栏

异步动态导入模块中的代码是ES6中使用模块化的方法，方便按需加载模块

//这是模块(exportModule.js)有两个函数被导出

const foo=()=>{
    console.log('foo');
};

export {foo as myFoo};

export function add(x,y)
{
    console.log(x+y);
}

//然后在html代码中动态导入并运行

<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=UTF-8"/>
        <title>测试export模块导出</title>
    </head>
    <body>
        

        <script>
        //异步动态导入模块代码，返回的是期约
            async function loadModule(){
                const f=await import('./exportModule.js');
                
                f.myFoo();
                f.add(5,6);
            }
            loadModule();
           
        </script>
        //这里是模块化导入，用了type=module
        <script type="module">
            import {myFoo,add} from './exportModule.js';
            myFoo();
            add(5,6);
        </script>
        
    </body>
</html>