这些ECMAScript模块知识，都是我需要知道的

ES 模块是什么?

金水网站建设公司创新互联建站,金水网站设计制作，有大型网站制作公司丰富经验。已为金水成百上千提供企业网站建设服务。企业网站搭建\外贸营销网站建设要多少钱，请找那个售后服务好的金水做网站的公司定做！

ECMAScript模块(简称ES模块)是一种JavaScript代码重用的机制，于2015年推出，一经推出就受到前端开发者的喜爱。在2015之年，JavaScript 还没有一个代码重用的标准机制。多年来，人们对这方面的规范进行了很多尝试，导致现在有多种模块化的方式。

你可能听说过AMD模块，UMD，或CommonJS，这些没有孰优孰劣。最后，在ECMAScript 2015中，ES 模块出现了。

我们现在有了一个“正式的”模块系统。

ES 模块无处不在?

理论上，ES 模块应该在所有JavaScript环境中。实际上，ES 模块的主要应用还是在浏览器上。

2020年5月，Node.js v12.17.0 增加了在不使用标记前提下对ECMAScript模块的支持。这意味着我们现在可以在Node.js中使用import和export，而无需任何其他命令行标志。

ECMAScript模块要想在任何JavaScript环境通用，可能还需要很长的路要走，但方向是正确的。

ES 模块是什么样的

ES 模块是一个简单的文件，我们可以在其中声明一个或多个导出。以下面utils.js为例:

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

这里有两个导出。

第一个是命名导出，后面是export default，表示为默认导出。

假设我们的项目文件夹中有一个名为utils.js的文件，我们可以将这个模块提供的对象导入到另一个文件中。

如何从 ES模块导入

假设我们在项目文中还有一个Consumer.js的文件。要导入utils.js公开的函数，我们可以这样做：

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

这种对应我们的命名导入方式.

如果我们要导入 utils.js 中的默认导出也就是 funcB 方法，我们可以这样做：

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

当然，我们可以导入同时导入命名和默认的：

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

我们也可以用星号导入整个模块：

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

注意，这里要使用默认到处的方法是使用 default() 而不是 funcB()。

从远程模块导入：

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

浏览器中的 ES 模块

现代浏览器支持ES模块，但有一些警告。要使用模块，需要在 script 标签上添加属性 type，对应值为 module。

 
 
 
 
  
  
  
  
  
  
  
  
  
  
  
      
  
  
  
      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 模块是静态的，这意味着我们不能在运行时更改导入。随着2020年推出的动态导入(dynamic imports)，我们可以动态加载代码来响应用户交互(webpack早在ECMAScript 2020推出这个特性之前就提供了动态导入)。

考虑下面的代码：

 
 
 
 
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
      
  
  
  
      Dynamic imports
  
  
  
  
  
  
  
  
  
  
  
  Load!

再考虑一个带有两个导出的JavaScript模块

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

为了动态导入 util.js 模块，我们可以点击按钮在去导入：

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

这里使用解构的方式，取出**命名导出 ** funcA 方法：

 
 
 
 
  
  
  
  ({ funcA }) => {}

ES模块实际上是JavaScript对象：我们可以解构它们的属性以及调用它们的任何公开方法。

要使用动态导入的默认方法，可以这样做

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

当作为一个整体导入一个模块时，我们可以使用它的所有导出

 
 
 
 
  
  
  
  // loader.js
  
  
  
  const 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文件

假设我们项目有一个 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();
  
  
  
  });

作者：Valentino Gagliardib 译者：前端小智来源：valentinog

原文：https://www.valentinog.com/blog/es-modules/

本文转载自微信公众号「大迁世界」，可以通过以下二维码关注。转载本文请联系大迁世界公众号。

分享文章：这些ECMAScript模块知识，都是我需要知道的
文章地址：http://www.mswzjz.cn/qtweb/news34/120684.html

攀枝花网站建设、攀枝花网站运维推广公司-贝锐智能，是专注品牌与效果的网络营销公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：贝锐智能

贝锐智能技术为您推荐以下文章