如何在 JS 中动态加载 JS？

大多数时候，我们在开始时使用静态导入将所有导出包含在我们的脚本中。每次使用脚本时都会进行导入，无论是否使用模块。因此，如果有人想在需要时有条件地导入模块的某些部分，静态导入将无济于事。
因此，给定一个 JavaScript 代码，我们需要找到一种解决方案，仅在动态需要时才加载其他 JavaScript 模块。

方法：

• ES6 为我们提供了一个构造import() ，它提供了按需导入模块的便利。
• import()返回提供所请求模块的模块对象的承诺。
• 我们可以利用模块对象来使用各种导入。

句法：

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

示例：假设我们要运行一个脚本来根据单击的按钮对字符串执行一些操作。
反向字符串.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(''))
  
}

索引.html：

  

    String operations

  

  
      
            GeeksForGeeks  
        
  
    
  
    
      Reverse the String !!
  
  
    
      Check whether palindrome !!
  
  
    
  
  
    
    
        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";
                }
            });
        });
    

  

输出：

页面加载时的初始显示。

单击“反转字符串”按钮后。

点击“检查是否回文！！”后按钮。

笔记：

模块也可以在常规脚本中动态加载。

使用 ES6 模块时需要设置本地服务器以避免跨站点源问题。

什么时候用什么？
当脚本中很少需要某些模块时，动态导入很有用。这提高了初始加载时的性能。但是，如果在脚本中经常使用任何导出，那么它可能会在执行过程中导致一些延迟。