如何在JS中动态加载JS

大部分情况下，我们使用静态导入在我们的脚本中包含所有的导出。导入发生在每次使用脚本时，无论模块是否被使用。因此，如果有人需要在需要时有条件地导入模块的某些部分，静态导入将毫无帮助。

因此，给定一个JavaScript代码，我们需要找到一个解决方案，在需要时动态加载其他的JavaScript模块。

方法：

ES6向我们提供了一个构造函数import()，它提供了按需导入模块的功能。
import()返回一个promise以提供请求的模块的模块对象。
我们可以利用模块对象使用各种导入。

语法：

import("#ModuleSource").then((module)=>{
     //use module object to access any of the imports.
})

示例： 假设我们想要运行一个脚本，根据按钮的点击来执行一些关于字符串的操作。

reverseString.mjs：

// reverseString.mjs 
// module to reverse a given string 
  
export function reverseString(str){ 
  
    return str.split('').reverse().join(''); 
  
}

isPalindrome.mjs：

// isPalindrome.mjs 
// module to check whether string is palindrome or not 
  
export function isPalindrome(str){ 
      
    return (str===str.split('').reverse().join('')) 
  
}

index.html:

<!-- index.html:- contains frontend scripts -->
<!DOCTYPE html> 
<html> 
  
<head> 
    <title>String operations</title> 
</head> 
  
<body style="text-align:center;"> 
  
    <h1 style="color:green;">   
            GeeksForGeeks   
        </h1> 
  
    <input type="text" 
           id="myString"> 
  
    <button id="reverse" 
            style="padding: 0.5em 0.5em;"> 
      Reverse the String !! 
  </button> 
  
    <button id="palindrome" 
            style="padding: 0.5em 0.5em;"> 
      Check whether palindrome !! 
  </button> 
  
    <div id="answer" 
         style="color: green; 
                font-size: 2em;  
                padding: 1em;"> 
  </div> 
  
    <!-- Script to perform one of the operations. -->
    <script type="text/javascript"> 
        var reverseButton = document.getElementById("reverse"); 
        var palindromeButton = document.getElementById("palindrome"); 
        
        //module containing the logic to reverse a string. 
        var module1 = '/reverseString.mjs';  
          
        //module containing the logic to check  
        //whether the string is palindrome or not. 
        var module2 = '/isPalindrome.mjs';  
  
        reverseButton.addEventListener("click", () => { 
          
            //consuming the value of input 
            var str = document.getElementById("myString").value;  
  
            import (module1).then(module => { 
  
                document.getElementById("answer").innerHTML =  
                module.reverseString(str); 
  
            }); 
        }); 
  
        palindromeButton.addEventListener("click", () => { 
          
            //consuming the value of input 
            var str = document.getElementById("myString").value;  
  
            import (module2).then(module => { 
  
                if (module.isPalindrome(str)) { 
                    document.getElementById("answer").innerHTML =  
                    "The string is a palindrome"; 
                } else { 
                    document.getElementById("answer").innerHTML =  
                    "The string is not a palindrome"; 
                } 
            }); 
        }); 
    </script> 
</body> 
  
</html>

输出：

如何在JS中动态加载JS