JavaScript-如何动态导入模块

最新推荐文章于 2024-08-22 15:53:39 发布

王建博09

最新推荐文章于 2024-08-22 15:53:39 发布

阅读量2.8k

点赞数 1

文章标签： js javascript

本文链接：https://blog.csdn.net/wangjianbo09/article/details/110918982

版权

Data20201209 By WJB

模块加载分为静态加载和动态加载。该文章讲解如何动态加载模块，也就是在程序运行过程中，遇到某个操作或者某个事件时加载需要的模块。

代买展示

1，模块代码

md.js

 export  function  add(a,b)
 {
     return a+b;
 }

2, html文件

moduldome.html

（1）静态加载

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>动态加载</title>
    </head>
    <body>
      <script type="module">
          import {add} from './md.js';
          console.log(add);
      </script>
    </body>
</html>

执行结果

（2）动态加载

设想情景：点击按钮后加载模块

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>动态加载</title>
    </head>
    <body>
    <div>
        <button onclick="buttonclick()">点击事件</button>
    </div>
    <script>
        function buttonclick()
        {
           import("./md.js").then(({add})=>{
            console.log(add);
        });
        }

    </script>
<!--      <script type="module">-->
<!--          import {add} from './md.js';-->
<!--          console.log(add);-->
<!--      </script>-->
    </body>
</html>

运行结果：