千家信息网

ECMAScript模块如何使用

发表于:2024-11-14 作者:千家信息网编辑
千家信息网最后更新 2024年11月14日,这篇"ECMAScript模块如何使用"文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇"
千家信息网最后更新 2024年11月14日ECMAScript模块如何使用

这篇"ECMAScript模块如何使用"文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇"ECMAScript模块如何使用"文章吧。

什么是ES模块?

ECMAScript模块(简称ES模块)是2015年推出的 JavaScript 中代码重用的机制。在高度碎片化的 JavaScript 模块场景中,它终于成为了标准。

在2015年之前, JavaScript 还没有一个标准的代码重用机制。这方面曾有过很多标准化的尝试,导致这些年乱七八糟的碎片化。

你可能听说过 AMD 模块、UMD 或者 CommonJS。没有明显的赢家。终于,随着 ECMAScript 2015,ES模块登陆语言。

我们现在有了一个 "官方 "的模块系统。

ECMAScript模块无处不在?

理论上,ECMAScript 模块应该普遍适用于所有 JavaScript 环境。实际上,浏览器仍然是ES模块的主要目标。

2020年5月,Node.js v12.17.0 发货时,支持 ECMAScript 模块,没有标志。这意味着我们现在可以在 Node.js 中使用导入和导出,而无需任何额外的命令行标志。

在 ECMAScript 模块在任何 JavaScript 环境中普遍工作之前,还有很长的路要走,但方向是正确的。

ES模块是怎样的?

一个ES模块就是一个简单的文件,我们可以声明一个或多个出口。以这个虚构的 utils.js 为例。

// utils.jsexport function funcA() {  return "Hello named export!";}export default function funcB() {  return "Hello default export!";}

我们这里有两个导出。

第一个是一个命名的导出,后面是一个默认的导出,表示为导出默认。

假设我们的项目文件夹中住着这个名为 utils.js 的文件,我们可以在另一个文件中导入这个模块提供的对象。

如何从ES模块导入

假设我们在项目文件夹中还有一个名为 consumer.js 的文件。要导入 utils.js 所暴露的函数,我们可以这样做。

// consumer.jsimport { funcA } from "./util.js";

这种语法是一种命名的导入方式,与命名的导出方式有异曲同工之妙。

如果要导入定义为默认导出的 funcB,我们可以这样做:

// consumer.jsimport funcB from "./util.js";

如果我们想在一个文件中同时导入默认导出和命名导出,我们可以将其压缩为:

// consumer.jsimport funcB, { funcA } from "./util.js";funcB();funcA();

我们也可以用 star 导入整个模块。

import * as myModule from "./util.js";myModule.funcA();myModule.default();

要注意,在这种情况下,必须显式调用默认导出。

要从远程模块导入。

import { createStore } from "https://unpkg.com/redux@4.0.5/es/redux.mjs";const store = createStore(/* do stuff */)

浏览器中的ECMAScript模块

现代浏览器支持 ES 模块,尽管有一些注意事项。要加载一个模块,请在脚本标签的 type 属性中添加模块。

    ECMAScript modules in the browser

The result is:

import { appendResult } from "./myModule.js"; const el = document.getElementById("el"); appendResult(el);

这里 myModule.js 是同一个项目文件夹下的一个简单模块。

export function appendResult(element) {  const result = Math.random();  element.innerText += result;}

虽然可以直接在浏览器中使用ES模块,但现在捆绑 JavaScript 应用的任务仍然是 webpack 等工具的专属,以获得最大的灵活性、代码拆分和对旧浏览器的兼容性。

动态导入

ES 模块是静态的,这意味着我们无法在运行时更改导入。有了2020年登陆的动态导入,我们可以根据用户的交互动态加载我们的代码(webpack在ECMAScript 2020中提供动态导入功能之前就已经提供了)。

考虑一个简单的 HTML,它可以加载一个脚本。

    Dynamic imports

也可以考虑用几个导出的 JavaScript 模块。

// util.jsexport function funcA() {  console.log("Hello named export!");}export default function funcB() {  console.log("Hello default export!");}

如果要动态加载这个模块,也许点击一下,我们可以这样做。

// loader.jsconst btn = document.getElementById("btn");btn.addEventListener("click", () => {  // loads named export  import("./util.js").then(({ funcA }) => {    funcA();  });});

在这里,我们通过重构模块的对象,只加载命名的导出。

({ funcA }) => {}

ES 模块实际上就是 JavaScript 对象:我们可以重构它们的属性,也可以调用它们的任何暴露的方法。

要动态地导入一个默认的导出,我们可以这样做。

// loader.jsconst btn = document.getElementById("btn");btn.addEventListener("click", () => {  // loads entire module  // runs default export  import("./util.js").then((module) => {    module.default();  });});

当整体导入一个模块时,我们可以使用它的所有输出。

// loader.jsconst btn = document.getElementById("btn");btn.addEventListener("click", () => {  // loads entire module  // uses everything  import("./util.js").then((module) => {    module.funcA();    module.default();  });});

还有一种常见的动态导入方式,我们在文件的顶部提取逻辑。

const loadUtil = () => import("./util.js");const btn = document.getElementById("btn");btn.addEventListener("click", () => {  //});

在这里,loadUtil 将返回一个 Promise,准备进行链锁。

const loadUtil = () => import("./util.js");const btn = document.getElementById("btn");btn.addEventListener("click", () => {  loadUtil().then(module => {    module.funcA();    module.default();  });});

动态导入看起来很好,但是它们有什么用呢?

通过动态导入,我们可以拆分我们的代码,只在合适的时刻加载重要的内容。在动态导入登陆JavaScript之前,这种模式是webpack这个模块捆绑器的专属。

像React和Vue这样的前端库,就大量使用了通过动态导入进行代码拆分的方式,在响应事件时加载分块代码,比如用户交互或者路由变化。

JSON文件的动态导入

假设你在代码库的某个地方有一个JSON文件person.json。

{  "name": "Jules",  "age": 43}

现在,你想动态地导入这个文件,以响应一些用户的交互。

由于JSON文件导出的只是一个默认的导出,它不是一个函数,所以你只能像这样访问默认的导出。

const loadPerson = () => import("./person.json");const btn = document.getElementById("btn");btn.addEventListener("click", () => {  loadPerson().then(module => {    const { name, age } = module.default;    console.log(name, age);  });});

这里,我们从默认的导出中重构name和age。

    const { name, age } = module.default;

使用async/await动态导入

import()语句返回的总是一个Promise,这意味着我们可以对它使用async/await。

const loadUtil = () => import("./util.js");const btn = document.getElementById("btn");btn.addEventListener("click", async () => {  const utilsModule = await loadUtil();  utilsModule.funcA();  utilsModule.default();});

动态导入名称

当用import()导入一个模块时,你可以随心所欲地给它命名,只要保持一致即可。

  import("./util.js").then((module) => {    module.funcA();    module.default();  });

或者:

  import("./util.js").then((utilModule) => {    utilModule.funcA();    utilModule.default();  });

以上就是关于"ECMAScript模块如何使用"这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注行业资讯频道。

0