文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2024-12-24 15:32

关注

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为例:

  1. // utils.js 
  2. export function funcA() { 
  3.   return "Hello named export!"
  4.  
  5. export default function funcB() { 
  6.   return "Hello default export!"

这里有两个导出。

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

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

如何从 ES模块 导入

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

  1. // consumer.js 
  2. import { funcA } from "./util.js"

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

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

  1. // consumer.js 
  2. import { funcA } from "./util.js"

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

  1. // consumer.js 
  2. import funcB, { funcA } from "./util.js"
  3.  
  4. funcB(); 
  5. funcA(); 

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

  1. import * as myModule from './util.js'
  2.  
  3. myModule.funcA(); 
  4. myModule.default(); 

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

从远程模块导入:

  1. import { createStore } from "https://unpkg.com/redux@4.0.5/es/redux.mjs"
  2.  
  3. const store = createStore() 

浏览器中的 ES 模块

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

  1. "en"
  2.  
  3.     "UTF-8"
  4.     ECMAScript modules <span class="op">in</span><span> the browser 
  5.  
  6.  
  7. "el">The result is

     
  8.  
  9. "module"
  10.     import { appendResult } from "./myModule.js"
  11.  
  12.     const el = document.getElementById("el"); 
  13.     appendResult(el); 
  14.  
  15.  

 myModule.js 内容如下:

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

动态导入

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

考虑下面的代码:

  1.  
  2. "en"
  3.  
  4.     "UTF-8"
  5.     <span class="keyword">Dynamic</span><span> imports 
  6.  
  7.  
  8. "btn">Load
  9.  
  10. "loader.js"
  11.  

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

  1. // util.js 
  2. export function funcA() { 
  3.   console.log("Hello named export!"); 
  4.  
  5. export default function funcB() { 
  6.   console.log("Hello default export!"); 

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

  1. / loader.js 
  2. const btn = document.getElementById("btn"); 
  3.  
  4. btn.addEventListener("click", () => { 
  5.   // loads named export 
  6.   import("./util.js").then(({ funcA }) => { 
  7.     funcA(); 
  8.   }); 
  9. }); 

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

  1. ({ funcA }) => {} 

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

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

  1. // loader.js 
  2. const btn = document.getElementById("btn"); 
  3.  
  4. btn.addEventListener("click", () => { 
  5.   import("./util.js").then((module) => { 
  6.     module.default(); 
  7.   }); 
  8. }); 

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

  1. // loader.js 
  2. const btn = document.getElementById("btn"); 
  3.  
  4. btn.addEventListener("click", () => { 
  5.   // loads entire module 
  6.   // uses everything 
  7.   import("./util.js").then((module) => { 
  8.     module.funcA(); 
  9.     module.default(); 
  10.   }); 
  11. }); 

还有另一种用于动态导入的常见样式,如下所示:

  1. const loadUtil = () => import("./util.js"); 
  2.  
  3. const btn = document.getElementById("btn"); 
  4.  
  5. btn.addEventListener("click", () => { 
  6.   // 
  7. }); 

loadUtil返回的是一个 promise,所以我们可以这样操作

  1. const loadUtil = () => import("./util.js"); 
  2.  
  3. const btn = document.getElementById("btn"); 
  4.  
  5. btn.addEventListener("click", () => { 
  6.   loadUtil().then(module => { 
  7.     module.funcA(); 
  8.     module.default(); 
  9.   }) 
  10. }) 

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

使用动态导入,我们可以拆分代码,并只在适当的时候加载重要的代码。在 JavaScript 引入动态导入之前,这种模式是webpack(模块绑定器)独有的。

像React和Vue通过动态导入代码拆分来加载响应事件的代码块,比如用户交互或路由更改。

动态导入JSON文件

假设我们项目有一个 person.json 文件,内容如下:

  1.   "name""Jules"
  2.   "age": 43 

现在,我们需要动态导入该文件以响应某些用户交互。

因为 JSON 文件不是一个方法,所以我们可以使用默认导出方式:

  1. const loadPerson = () => import('./person.json'); 
  2.  
  3. const btn = document.getElementById("btn"); 
  4.  
  5. btn.addEventListener("click", () => { 
  6.   loadPerson().then(module => { 
  7.     const { name, age } = module.default
  8.     console.log(name, age); 
  9.   }); 
  10. }); 

这里我们使用解构的方式取出 name 和 age :

  1. const { name, age } = module.default

动态导入与 async/await

因为 import() 语句返回是一个 Promise,所以我们可以使用 async/await:

  1. const loadUtil = () => import("./util.js"); 
  2.  
  3. const btn = document.getElementById("btn"); 
  4.  
  5. btn.addEventListener("click", async () => { 
  6.   const utilsModule = await loadUtil(); 
  7.   utilsModule.funcA(); 
  8.   utilsModule.default(); 
  9. }) 

动态导入的名字

使用import()导入模块时,可以按照自己的意愿命名它,但要调用的方法名保持一致:

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

或者:

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

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

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

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

 

来源:大迁世界内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯