1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  10.     <button id="btn">import函数</button>
  11.     <button id="dynamic">动态引入</button>
  12. </body>
  13. </html>
  14. <!-- 
  15.     import 引用
  16.     需要定义类型 type="module"
  17.  -->
  18. <script type="module">
  19.     import { createDom } from "./index.js";
  20.     createDom()
  21. </script>
  23. <!-- import函数 -->
  24. <script>
  25.     btn.addEventListener('click',()=>{
  26.         import('./app.js')
  27.             .then(fn =>{
  28.                 fn.createDom()
  29.             })
  30.     })
  32.     //  动态引入
  33.     let lock = true;
  34.     dynamic.addEventListener('click',()=>{
  35.         if(lock){
  36.             lock = false
  37.         }else{
  38.             lock = true;
  39.         }
  40.         import(path()).then(d =>{
  41.             d.createDom()
  42.         })
  43.     })
  45.     function path(){
  46.         if(lock){
  47.             return './path.js'
  48.         }else{
  49.             return ''
  50.         }
  51.     }
  52. </script>

直接引用

  1. export const createDom = ()=>{
  2.     const oDiv = document.createElement('div');
  3.     oDiv.innerHTML = 'import直接引用';
  4.     document.body.appendChild(oDiv);
  5. }

函数引用 - 按需引入

  1. export const createDom = ()=>{
  2.     const oDiv = document.createElement('div');
  3.     oDiv.innerHTML = 'import函数';
  4.     document.body.appendChild(oDiv);
  5. }

动态引入

  1. export const createDom = ()=>{
  2.     const oDiv = document.createElement('div');
  3.     oDiv.innerHTML = 'import动态引入';
  4.     document.body.appendChild(oDiv);
  5. }