广告

扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > node.js >ECMAScript模块知识有哪些
  • 907

0
分享到

ECMAScript模块知识有哪些

2024-04-02 19:04:59 907人浏览 薄情痞子
摘要

这篇文章主要介绍“ECMAScript模块知识有哪些”，在日常操作中，相信很多人在ECMAScript模块知识有哪些问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”ECMASc

这篇文章主要介绍“ECMAScript模块知识有哪些”，在日常操作中，相信很多人在ECMAScript模块知识有哪些问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”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()

浏览器中的 ES 模块

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

<html lang="en"> <head>     <meta charset="UTF-8">     <title>ECMAScript modules in the browser</title> </head> <body> <p id="el">The result is: </p> </body> <script type="module">     import { appendResult } from "./myModule.js";      const el = document.getElementById("el");     appendResult(el); </script> </html>

myModule.js 内容如下：

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

动态导入

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

考虑下面的代码：

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Dynamic imports</title> </head> <body> <button id="btn">Load!</button> </body> <script src="loader.js"></script> </html>

再考虑一个带有两个导出的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(); });

到此，关于“ECMAScript模块知识有哪些”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: ECMAScript模块知识有哪些

本文链接: https://www.lsjlt.com/news/84658.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档
去做题
猜你喜欢
  • ECMAScript模块知识有哪些
    这篇文章主要介绍“ECMAScript模块知识有哪些”，在日常操作中，相信很多人在ECMAScript模块知识有哪些问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”ECMASc...
    99+
    2022-10-19
  • JavaScript模块知识点有哪些
    这篇文章主要介绍“JavaScript模块知识点有哪些”，在日常操作中，相信很多人在JavaScript模块知识点有哪些问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”Java...
    99+
    2022-10-19
  • CSS3边框模块知识点有哪些
    这篇文章主要介绍“CSS3边框模块知识点有哪些”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“CSS3边框模块知识点有哪些”文章能帮助大家解决问题。   ...
    99+
    2022-10-19
  • Node模块化的知识点有哪些
    今天小编给大家分享一下Node模块化的知识点有哪些的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。什么是模块化模块化是指解决一...
    99+
    2023-07-04
  • Kubernetes模块的基础知识点有哪些
    今天小编给大家分享一下Kubernetes模块的基础知识点有哪些的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。　　1、创建一...
    99+
    2023-06-03
  • HTML块元素的知识点有哪些
    这篇文章主要介绍“HTML块元素的知识点有哪些”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“HTML块元素的知识点有哪些”文章能帮助大家解决问题。大多数 HTML ...
    99+
    2022-10-19
  • C++模板基础知识点有哪些
    这篇文章主要讲解了“C++模板基础知识点有哪些”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“C++模板基础知识点有哪些”吧！引入我们对交换函数Swap已经非常熟悉了,但是我们经常会遇到这样的...
    99+
    2023-06-25
  • python 模块相关知识
    1，python 文件标准开头：#!/usr/bin/env python3 #-- coding: utf-8 -- 2,import sys.,sys.args 是一个list,里面包含了命令行数据的list.3,安装Anaconda:...
    99+
    2023-01-31
    相关知识 模块 python
  • Java内存模型的知识点有哪些
    这篇文章主要介绍“Java内存模型的知识点有哪些”，在日常操作中，相信很多人在Java内存模型的知识点有哪些问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”Java内存模型的知识点有哪些”的疑惑有所帮助！接下来...
    99+
    2023-06-16
  • java设计模式基础知识有哪些
    本篇内容介绍了“java设计模式基础知识有哪些”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！　　1、单例模式　　单例模式：分为饿汉式和懒汉式...
    99+
    2023-06-02
  • Node.js 的模块知识汇总
    在写 Node.js 应用程序的时候，你确实可以把所有代码放在巨大原 index.js 文件中，不在乎你的应用程序会变得多大多复杂。Node.js 解释器不会在意这个事情。但在代码组织方面，你很快就会陷入混...
    99+
    2022-06-04
    模块 知识 Node
  • ecmascript的特性有哪些
    本篇内容介绍了“ecmascript的特性有哪些”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！ ...
    99+
    2022-10-19
  • ecmascript的版本有哪些
    这篇文章将为大家详细讲解有关ecmascript的版本有哪些，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。版本有：1、1.0版本；2、2.0版本；3、3.0...
    99+
    2022-10-19
  • ECMAScript新特性有哪些
    本篇内容介绍了“ECMAScript新特性有哪些”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！1. Top-level Await在ES20...
    99+
    2023-07-02
  • CSS小知识有哪些
    本篇文章为大家展示了CSS小知识有哪些，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。1.CSS的color属性并非只能用于文本显示对于CSS的color属性，相信所...
    99+
    2022-10-19
  • Refs的知识有哪些
    本篇内容主要讲解“Refs的知识有哪些”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“Refs的知识有哪些”吧!Refs 提供了一种方式，允许我们访问 DOM 节...
    99+
    2022-10-19
  • mysql知识点有哪些
    本篇内容主要讲解“mysql知识点有哪些”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“mysql知识点有哪些”吧! 1、同步方式 binlog和pos同步、...
    99+
    2022-10-19
  • JS知识点有哪些
    小编给大家分享一下JS知识点有哪些，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！ 暂时性死区只要块级作用域存在let命...
    99+
    2022-10-19
  • HTML5新知识有哪些
    这篇文章主要为大家展示了“HTML5新知识有哪些”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“HTML5新知识有哪些”这篇文章吧。一、h6新增的主要语义化标签如...
    99+
    2022-10-19
  • CSS知识点有哪些
    这篇文章给大家分享的是有关CSS知识点有哪些的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。 1、对WEB标准以及W3C的理解与认识 标签闭合、标签小写、不乱嵌套、提高搜索机器...
    99+
    2022-10-19
软考高级职称资格查询
软考职称历年真题下载
软考职称资料下载
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作