「ES2020 进阶」让我们来看一看 ES11 中新增的 import() 语句-JavaScript中文网-JavaScript教程资源分享门户

随着 JavaScript 的发展，前端的工程化和复杂性越来越高。在 ES11（也叫做 ES2020）中，新增了 import() 这个语句，它可以让我们更灵活地引入模块，并且可以实现按需加载。下面，让我们来详细了解一下 import() 的语法、使用方法和指导意义。

import() 的语法

import() 具有以下基本语法：

import(moduleSpecifier)
  .then(module => {
    // do something with module
  })
  .catch(error => {
    // do something with error
  })

其中，moduleSpecifier 是一个字符串，表示要引入的模块的位置。比如：

import('./myModule.js')

这样就会异步地引入 myModule.js 这个模块。

然后，我们需要在 then 的回调函数中使用模块，或者在 catch 的回调函数中处理错误。

值得注意的是，import() 返回的是一个 Promise。因此，我们可以使用 async/await 来处理模块的导入。

import() 的使用方法

动态加载模块

import() 最常用的一个场景就是动态加载模块。通过使用 import()，我们可以实现按需加载模块，从而提升应用的性能和响应速度。

比如，我们可以将下面的代码打包成两个不同的 JS 文件：

import { add } from './math.js';
console.log(add(1, 2));

然后，在应用的运行时，只有当需要使用 add 函数时，才会动态地加载 math.js 这个模块。

条件加载模块

在某些特殊的情况下，我们可能需要根据条件来加载模块。这时，import() 就可以帮我们完成这个需求。

比如，我们可以在移动端应用中，只在用户请求打开某个功能时再动态加载对应的模块，这样可以减轻应用的负荷，提高性能。

// javascriptcn.com 代码示例
if (isMobile) {
  import('./mobile.js')
    .then(mobile => {
      // do something with mobile
    })
    .catch(error => {
      // do something with error
    })
} else {
  import('./pc.js')
    .then(pc => {
      // do something with pc
    })
    .catch(error => {
      // do something with error
    })
}

向后兼容

在 ES6 中，我们引入模块的语法是静态的，也就是说，我们必须在代码的最上方使用 import 语句来引入模块。但是，在旧版的浏览器中，如果我们需要使用 import 语句，就需要使用一些 polyfill 或者转译工具来实现兼容性。

而 import() 可以让我们在不兼容静态 import 语句的环境下，仍然能够动态地加载模块。

比如，在 Safari 浏览器中，仍然不支持静态 import 语句，因此我们可以使用 import() 来实现兼容性。

import() 的指导意义

引入 import() 的语法，可以让 JavaScript 更灵活，更加适用于工程化和复杂性更高的项目。下面是 import() 的一些指导意义：

按需加载模块

通过动态地引入模块，我们可以实现按需加载模块，从而提升应用的性能和响应速度，减轻服务器的负荷。这是移动端应用和大型 Web 应用最常用的一种优化方式。

后端与前端同步

在 Node.js 中，我们可以使用 require() 来引入模块。而在浏览器端，我们一般使用 import 语句来引入模块。import() 的引入，可以使前后端的模块加载语法更加同步，使得框架和库在前后端共用时更加方便。

常量 import

在 ES6 中，我们引入模块时，可以使用 import { constName } from './myModule.js' 来导入常量。而在 ES11 中，我们可以使用 import() 来异步地导入常量，这样可以帮助我们更好地处理按需加载的场景。

示例代码

// javascriptcn.com 代码示例
// math.js
export function add(a, b) {
  return a + b;
}

// main.js
document.body.addEventListener('click', () => {
  import('./math.js')
    .then(math => {
      console.log(math.add(1, 2));
    })
    .catch(error => {
      console.error(error);
    });
});

在这个代码中，我们在页面加载时不会引入 math.js 这个模块。而是当用户点击页面时，才会动态地加载 math.js，并且调用其中的 add 函数。

总结

import() 是 ES11 中引入的一个新特性，它可以让我们更加灵活地引入模块，并且可以实现按需加载。通过使用 import()，我们可以优化移动端应用、提升应用的性能和响应速度，使得代码更加简洁易懂，开发更加高效。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/653a40007d4982a6eb426eb9