当前位置： 首页 > news >正文

2024-05-18 前端模块化开发——ESModule模块化

news 2025/11/22 7:32:04
目录
  • 1、认识 ES Module
  • 2、ES Module基本使用
  • 3、export关键字
    • 3.1、导出方式一——直接导出
    • 3.2、导出方式二——通过as起别名
    • 3.3、导出方式三——定义的时候就直接导出
  • 4、import关键字
    • 4.1、导入方式一——直接导入
    • 4.2、导入方式二——通过as起别名
    • 4.3、导入方式三——可以给整个模块起别名
  • 5、export和import结合使用
  • 6、default默认导出
    • 6.1、导出方式一——默认导出
    • 6.2、导出方式二——定义时直接导出
  • 7、import函数
  • 8、import meta（了解）
  • 9、ES Module的解析流程
    • 9.1、阶段一：构建阶段
    • 9.2、阶段二和三——实例化阶段-求值阶段

1、认识 ES Module

  • JavaScript没有模块化一直是它的痛点，所以才会产生我们前面学习的社区规范：CommonJS、AMD、CMD等，所以在ECMA推出了自己的模块化系统时，大家也是兴奋异常。
  • ES Module和CommonJS的模块化有一些不同之处：
  • 一方面它使用了import和export关键字；
  • 另一方面它采用编译期的静态分析，并且也加入了动态引用的方式；
  • ES Module模块采用export和import关键字来实现模块化：
  • export负责将模块内的内容导出；
  • import负责从其他模块导入内容；
  • 了解：采用ES Module将自动采用严格模式：use strict

2、ES Module基本使用

注意，export后面跟的{}不是一个对象，只是一种特定的语法。

// foo.js
const name = 'lisi'
const age = 18
function sayHello() {console.log("sayHello");
}// export { 标识符1， 标识符2， 标识符3 }
export {name,age,sayHello
}// main.js
// 注意事项一：在浏览器中直接使用esmodule时，必须在文件后面加上后缀名.js
import { name, age, sayHello } from './foo.js'console.log(name);
console.log(age);
sayHello()<!--index.html-->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!--注意事项二：在我们打开对应的html时，如果html中有使用模块化的代码，那么必须开启一个服务来打开--><script src="./foo.js" typt="module"></script><script src="./main.js" type="module"></script>
</body>
</html>

说明：

  • 如果直接在浏览器中运行代码，会报错：
    在这里插入图片描述
  • 这个在MDN上面有给出解释：
  • 其他模块与标准脚本的不同
  • 你需要注意本地测试——如果你通过本地加载 HTML 文件（比如一个 file:// 路径的文件），你将会遇到 CORS 错误，因为 JavaScript 模块安全性需要。
  • 你需要通过一个服务器来测试。
  • 这里使用的VSCode插件：Live Server

3、export关键字

3.1、导出方式一——直接导出

export {name,age,sayHello
}

3.2、导出方式二——通过as起别名

export {// 导出时给标识符起一个别名，不过实际开发中不怎么用这个方式name as fname,age,sayHello
}

3.3、导出方式三——定义的时候就直接导出

export const name = 'lisi'
export const age = 18
export function sayHello() {console.log("sayHello");
}

4、import关键字

4.1、导入方式一——直接导入

import { name, age, sayHello } from './foo.js'

4.2、导入方式二——通过as起别名

一般在导入的时候起别名，而不是在导出的时候

import { name as fname, age, sayHello } from './foo.js'

4.3、导入方式三——可以给整个模块起别名

import * as foo from './foo.js'console.log(foo.name);
console.log(foo.age);
foo.sayHello()

5、export和import结合使用

这是一种开发思想。

  • 补充：export和import可以结合使用
  • 为什么要这样做呢？
  • 在开发和封装一个功能库时，通常我们希望将暴露的所有接口放到一个文件中；
  • 这样方便指定统一的接口规范，也方便阅读；
  • 这个时候，我们就可以使用export 和import结合使用
  • 示例代码：

工具类库：

// utils/format.js
export function formatCount() {console.log('formatCount');
}export function formatDate() {console.log('formatDate');
}// utils/parse.js
export function parseLyric() {console.log('parseLyric');
}

工具类统一导出出口（export和import结合使用）：

// utils/index.js
// 默认方式
// import {formatCount, formatDate} from './format.js'
// import {parseLyric} from 'parse.js'// export {
//     formatCount,
//     formatDate,
//     parseLyric
// }// 优化一：推荐使用这种，便于阅读
// export {formatCount, formatDate} from './format.js'
// export {parseLyric} from './parse.js'// 优化二：
export * from './format.js'
export * from './parse.js'

使用工具类中的方法：

// main.js
import * as utils from './utils/index.js'utils.formatCount()
utils.parseLyric()<!--index.html-->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script src="./main.js"  type="module"></script>
</body>
</html>

6、default默认导出

  • 前面我们学习的导出都是有名字的导出（named exports）；
  • 在导出export时指定了名字；
  • 在导入import时需要知道具体的名字；
  • 还有一种导出叫做默认导出（default export）；
  • 默认导出export时可以不需要指定名字；
  • 在导入时不需要使用{}，并且可以自己来知道名字；
  • 它也方便我们和现有的CommonJS等规范互相操作；
  • 注意：在一个模块中，只能有一个默认导出（export default）；

6.1、导出方式一——默认导出

  • 导出一个常量

    const name = ‘foo’
    const age = 18

    export default name

  • 导出一个对象

    const name = ‘foo’
    const age = 18

    export default {
    fname:name,
    age,
    }

可以看出export default后面的{}表示导出为一个对象。

6.2、导出方式二——定义时直接导出

export default name = 'foo1'

7、import函数

  • 通过import加载一个模块，是不可以把它放到逻辑代码中的，比如：
    在这里插入图片描述

  • 为什么会出现这个情况呢？

  • 这是因为ES Module在被JS引擎解析时，就必须知道它的依赖关系；
  • 由于这个时候js代码没有任何的运行，所以无法在进行类似于if判断的逻辑代码中，根据代码的执行情况来获取模块是否加载；
  • 甚至拼接路径的写法也是错误的：因为我们必须到运行时才能确定path的值；
  • 但是某些情况下，我们确确实实希望动态的来加载某一个模块：
  • 如果根据不同的条件，动态来选择加载模块的路径；
  • 这个时候我们需要使用import()函数来动态加载；
    √ import函数返回一个Promise，可以通过then获取结果；
let flag = true
if(flag) {import('./foo.js').then(res => {console.log(res.name); // 后打印})console.log('----'); // 先打印
}

8、import meta（了解）

  • import.meta是一个给 JavaScript 模块暴露特定上下文的元数据属性的对象。
  • 它包含了这个模块的信息，比如说这个模块的 URL。
  • 在ES11（ES2020）中新增的特性；
// {url: 'http://127.0.0.1:5500/07_ESModule/main.js', resolve: ?}
console.log(import.meta,'meta');

9、ES Module的解析流程

  • ES Module是如何被浏览器解析并且让模块之间可以互相引用的呢？
  • ES modules: A cartoon deep-dive
  • ES Module的解析过程可以划分为三个阶段：
  • 阶段一：构建（Construction），根据地址查找js文件，并且下载，将其解析成模块记录（Module Record）；
  • 阶段二：实例化（Instantiation），对模块记录进行实例化，并且分配内存空间，解析模块的导入和导出语句，把模块指向对应的内存地址；（备注：阶段二生成模块环境记录（类似于函数解析时生成的环境记录）。）
  • 阶段三：运行（Evaluation），运行代码，计算值并且将值填充到内存地址中；
    在这里插入图片描述

9.1、阶段一：构建阶段

在这里插入图片描述

9.2、阶段二和三——实例化阶段-求值阶段

在这里插入图片描述

相关文章：

2024-05-18 前端模块化开发——ESModule模块化

目录 1、认识 ES Module2、ES Module基本使用3、export关键字 3.1、导出方式一——直接导出3.2、导出方式二——通过as起别名3.3、导出方式三——定义的时候就直接导出 4、import关键字 4.1、导入方式一——直接导入4.2、导入方式二——通过as起别名4.3、导入方式三——可以给…...

编程日记 2024/12/24 8:30:20

Linux IPV6 地址配置 | IPv6 禁用 | ping6 过程细节剖析 | IPv6 排障

注&#xff1a; 本文为 “Linux IPV6 地址配置 | IPv6 禁用 | ping6 过程细节剖析 | IPv6 排障” 相关文章合辑。 Linux 服务器设备上配置 IPV6 地址方法 aischang 于 2018-08-25 12:56:25 发布 1. 手动执行命令配置&#xff1a; ifconfig em1 inet6 add 8888::a7/96 up2. 删…...

编程日记 2024/12/24 8:29:18

【YashanDB知识库】XMLAGG方法的兼容

本文内容来自YashanDB官网&#xff0c;原文内容请见 https://www.yashandb.com/newsinfo/7802943.html?templateId1718516 【关键字】 XMLAGG方法的兼容 【问题描述】 崖山数据库不支持将XMLAGG相关的函数内容&#xff0c;需要替换成支持的功能函数WM_CONCAT(T.COLUMN_NAME…...

编程日记 2024/12/24 8:27:16

echarts加载区域地图，并标注点

效果如下&#xff0c;加载了南海区域的地图&#xff0c;并标注几个气象站点&#xff1b; 1、下载区域地图的JSON&#xff1a;DataV.GeoAtlas地理小工具系列 新建nanhai.json&#xff0c;把下载的JSON数据放进来 说明&#xff1a;如果第二步不打勾&#xff0c;只显示省的名字&a…...

编程日记 2024/12/24 8:22:10

echarts画风向杆

1.安装echarts 2.引入echarts 4.获取数据&#xff0c;转换数据格式 windProfile.title.text ${moment(time.searchTime[0], ‘YYYY-MM-DD HH:mm:ss’).format( ‘YYYY-MM-DD HH:mm’ )}-${moment(time.searchTime[1], ‘YYYY-MM-DD HH:mm:ss’).format(‘YYYY-MM-DD HH:mm’)…...

编程日记 2024/12/24 8:19:06

【LeetCode每日一题】LeetCode 345.反转字符串中的元音字母

LeetCode 345.反转字符串中的元音字母 题目描述 给定一个字符串 s&#xff0c;你需要反转字符串中所有的元音字母&#xff0c;并返回新的字符串。 元音字母是 a, e, i, o, u&#xff0c;这些字母的大小写都会被考虑。 示例 1: 输入: s "hello" 输出: "holle…...

编程日记 2024/12/24 8:18:05

蓝桥杯练习生第四天

小蓝每天都锻炼身体。 正常情况下&#xff0c;小蓝每天跑 11 千米。如果某天是周一或者月初&#xff08;11 日&#xff09;&#xff0c;为了激励自己&#xff0c;小蓝要跑 22 千米。如果同时是周一或月初&#xff0c;小蓝也是跑 22 千米。 小蓝跑步已经坚持了很长时间&#x…...

编程日记 2024/12/24 8:14:00

cesium 常见的 entity 列表

Cesium 是一个用于创建3D地球和地图的开源JavaScript库。它允许开发者在Web浏览器中展示地理空间数据，并且支持多种类型的空间实体（entities）。 Entities是Cesium中用于表示地面上或空中的对象的一种高层次、易于使用的接口。它们可以用来表示点、线、多边形、模型等，并且可…...

编程日记 2024/12/24 8:11:58

Java旅程（五）Spring 框架与微服务架构 了解 JVM 内部原理和调优

在现代企业级应用中&#xff0c;Spring 框架和微服务架构已经成为主流技术&#xff0c;而 Java 虚拟机&#xff08;JVM&#xff09;的理解和调优对于保证应用的高性能和稳定性也至关重要。本篇博客将深入讲解 Spring 框架与微服务架构&#xff0c;并进一步探讨 JVM 内部原理和调…...

编程日记 2024/12/24 8:10:57

Niushop-master靶场漏洞

靶场搭建 将 niushop-master.zip 压缩包放到网站的根目录&#xff0c;解压后访问 浏览器访问 install.php &#xff0c;根据提示安装即可 1.SQL注入漏洞 随便选择一种商品分类&#xff0c;发现有参数&#xff0c;测试注入 测试闭合发现页面报错有sql注入 应该是环境的问题&am…...

编程日记 2024/12/24 8:09:56

35道面向初中级前端的基础面试题

新鲜出炉的8月前端面试题 跨域资源共享 CORS 阮一峰 3. JSONP 是什么&#xff1f; 这是我认为写得比较通俗易懂的一篇文章jsonp原理详解——终于搞清楚jsonp是啥了。 4. 事件绑定的方式 嵌入dom 按钮 直接绑定 btn.onclick function(){} 事件监听 btn.addEventList…...

编程日记 2024/12/24 8:02:50

MFC用List Control 和Picture控件实现界面切换效果

添加List Control 和Picture控件 添加 3个子窗体 把子窗体边框设置为None, 样式设为Child 声明 CListCtrl m_listPageForm;void ShowForm(int nIndex);void CreatFormList();void CMFCApplication3Dlg::DoDataExchange(CDataExchange* pDX) {CDialogEx::DoDataExchange(pDX);DD…...

编程日记 2024/12/24 8:01:49

1. 解决前端vue项目 vite打包内存溢出问题

探索问题原因&#xff1a; 项目开发时正常运行不影响&#xff0c;打包出现上图错误&#xff0c;意味着打包过程中消耗了太多的内存导致的。 解决方法&#xff1a; 在 package.json中的打包命令替换如下&#xff1a; 解决前&#xff1a; "build:dev": "vite…...

编程日记 2024/12/24 7:58:45

Springboot高并发乐观锁

Spring Boot分布式锁的主要缺点包括但不限于以下几点&#xff1a; 性能开销&#xff1a;使用分布式锁通常涉及到网络通信&#xff0c;这会引入额外的延迟和性能开销。例如&#xff0c;当使用Redis或Zookeeper实现分布式锁时&#xff0c;每次获取或释放锁都需要与这些服务进行交…...

编程日记 2024/12/24 7:55:43

【WPS安装】WPS编译错误总结：WPS编译失败+仅编译成功ungrib等

WPS编译错误总结&#xff1a;WPS编译失败仅编译成功ungrib等 WPS编译过程问题1&#xff1a;WPS编译失败错误1&#xff1a;gfortran: error: unrecognized command-line option ‘-convert’; did you mean ‘-fconvert’?解决方案 问题2&#xff1a;WPS编译三个exe文件只出现u…...

编程日记 2024/12/24 7:49:36

pytorch MoE（专家混合网络）的简单实现。

专家混合&#xff08;Mixture of Experts, MoE&#xff09;是一种深度学习模型架构&#xff0c;通常用于处理大规模数据和复杂任务。它通过将输入分配给多个专家网络&#xff08;即子模型&#xff09;&#xff0c;然后根据门控网络&#xff08;gating network&#xff09;的输出…...

编程日记 2024/12/24 7:48:34

虚拟机VMware的安装问题ip错误，虚拟网卡

要么没有虚拟网卡、有网卡远程连不上等 一般出现在win11 家庭版 1、是否IP错误 ip addr 2、 重置虚拟网卡 3、查看是否有虚拟网卡 4、如果以上检查都解决不了问题 如果你之前有vmware 后来卸载了&#xff0c;又重新安装&#xff0c;一般都会有问题 卸载重装vmware: 第一…...

编程日记 2024/12/24 7:41:28

Linux下基于最新稳定版ESP-IDF5.3.2开发esp32s3入门hello world输出【入门一】

开发环境搭建&#xff1a;Linux-Ubuntu下搭建ESP32的开发环境的步骤&#xff0c;使用乐鑫最新稳定版的esp-idf-CSDN博客 一、安装好开发环境后&#xff0c;在esp目录下再创建一个esp32的目录【用于编程测试demo】 二、进入esp32目录&#xff0c;打开终端【拷贝esp-idf的hello工…...

编程日记 2024/12/24 7:40:27

重温设计模式--命令模式

文章目录 命令模式的详细介绍C 代码示例C代码示例2 命令模式的详细介绍 定义与概念 命令模式属于行为型设计模式&#xff0c;它旨在将一个请求封装成一个对象&#xff0c;从而让你可以用不同的请求对客户端进行参数化&#xff0c;将请求的发送者和接收者解耦&#xff0c;并且能…...

编程日记 2024/12/24 7:36:23

电力通信规约-104实战

电力通信规约-104实战 概述 104规约在广泛应用于电力系统远动过程中&#xff0c;主要用来进行数据传输和转发&#xff0c;本文将结合实际开发实例来讲解104规约的真实使用情况。 实例讲解 因为个人技术栈是Java&#xff0c;所以本篇将采用Java实例来进行讲解。首先我们搭建一…...

编程日记 2024/12/24 7:33:21

【大模型RAG】拍照搜题技术架构速览：三层管道、两级检索、兜底大模型

摘要 拍照搜题系统采用“三层管道&#xff08;多模态 OCR → 语义检索 → 答案渲染&#xff09;、两级检索&#xff08;倒排 BM25 向量 HNSW&#xff09;并以大语言模型兜底”的整体框架&#xff1a; 多模态 OCR 层 将题目图片经过超分、去噪、倾斜校正后&#xff0c;分别用…...

编程新知 2025/11/20 1:58:32

基于FPGA的PID算法学习———实现PID比例控制算法

基于FPGA的PID算法学习 前言一、PID算法分析二、PID仿真分析1. PID代码2.PI代码3.P代码4.顶层5.测试文件6.仿真波形 总结 前言 学习内容&#xff1a;参考网站&#xff1a; PID算法控制 PID即&#xff1a;Proportional&#xff08;比例&#xff09;、Integral&#xff08;积分&…...

编程新知 2025/11/21 5:26:03

树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法

树莓派摄像头高级使用方法 配置通过调谐文件来调整相机行为 使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 配置 大多数用例自动工作&#xff0c;无需更改相机配置。但是&#xff0c;一…...

编程新知 2025/11/21 6:09:16

全球首个30米分辨率湿地数据集(2000—2022)

数据简介 今天我们分享的数据是全球30米分辨率湿地数据集&#xff0c;包含8种湿地亚类&#xff0c;该数据以0.5X0.5的瓦片存储&#xff0c;我们整理了所有属于中国的瓦片名称与其对应省份&#xff0c;方便大家研究使用。 该数据集作为全球首个30米分辨率、覆盖2000–2022年时间…...

编程新知 2025/11/18 4:42:18

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个生活电费的缴纳和查询小程序

一、项目初始化与配置 1. 创建项目 ohpm init harmony/utility-payment-app 2. 配置权限 // module.json5 {"requestPermissions": [{"name": "ohos.permission.INTERNET"},{"name": "ohos.permission.GET_NETWORK_INFO"…...

编程新知 2025/9/30 12:05:28

【python异步多线程】异步多线程爬虫代码示例

claude生成的python多线程、异步代码示例&#xff0c;模拟20个网页的爬取&#xff0c;每个网页假设要0.5-2秒完成。 代码 Python多线程爬虫教程 核心概念 多线程&#xff1a;允许程序同时执行多个任务&#xff0c;提高IO密集型任务&#xff08;如网络请求&#xff09;的效率…...

编程新知 2025/10/24 7:04:27

微信小程序云开发平台MySQL的连接方式

注&#xff1a;微信小程序云开发平台指的是腾讯云开发 先给结论&#xff1a;微信小程序云开发平台的MySQL&#xff0c;无法通过获取数据库连接信息的方式进行连接&#xff0c;连接只能通过云开发的SDK连接&#xff0c;具体要参考官方文档&#xff1a; 为什么&#xff1f; 因为…...

编程新知 2025/11/17 9:13:40

SAP学习笔记 - 开发26 - 前端Fiori开发 OData V2 和 V4 的差异 (Deepseek整理）

上一章用到了V2 的概念&#xff0c;其实 Fiori当中还有 V4&#xff0c;咱们这一章来总结一下 V2 和 V4。 SAP学习笔记 - 开发25 - 前端Fiori开发 Remote OData Service(使用远端Odata服务)&#xff0c;代理中间件&#xff08;ui5-middleware-simpleproxy&#xff09;-CSDN博客…...

编程新知 2025/11/17 0:42:32

【分享】推荐一些办公小工具

1、PDF 在线转换 https://smallpdf.com/cn/pdf-tools 推荐理由&#xff1a;大部分的转换软件需要收费&#xff0c;要么功能不齐全&#xff0c;而开会员又用不了几次浪费钱&#xff0c;借用别人的又不安全。 这个网站它不需要登录或下载安装。而且提供的免费功能就能满足日常…...

编程新知 2025/11/17 3:07:55

排序算法总结（C++）

目录 一、稳定性二、排序算法选择、冒泡、插入排序归并排序随机快速排序堆排序基数排序计数排序 三、总结 一、稳定性 排序算法的稳定性是指&#xff1a;同样大小的样本 **&#xff08;同样大小的数据&#xff09;**在排序之后不会改变原始的相对次序。 稳定性对基础类型对象…...

编程新知 2025/11/17 9:00:04