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

于 2024-06-02 11:09:45 发布
阅读量710 收藏 27
点赞数 27
分类专栏： node.js学习 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41068717/article/details/139042195
版权

目录

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 Module的解析过程可以划分为三个阶段：
  • 阶段一：构建（Construction），根据地址查找js文件，并且下载，将其解析成模块记录（Module Record）；
  • 阶段二：实例化（Instantiation），对模块记录进行实例化，并且分配内存空间，解析模块的导入和导出语句，把模块指向对应的内存地址；（备注：阶段二生成模块环境记录（类似于函数解析时生成的环境记录）。）
  • 阶段三：运行（Evaluation），运行代码，计算值并且将值填充到内存地址中；
    在这里插入图片描述

9.1、阶段一：构建阶段

在这里插入图片描述

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

在这里插入图片描述

长乐呀
关注
  • 27
    点赞
  • 踩
  • 27
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
模块化之ESM
weixin_44811288的博客
08-09 4041
模块化 CommonJS规范 一个文件就是一个模块 每个模块都有单独的作用域 通过module.exports导出成员 通过require函数载入模块 CommonJS是以同步模式加载模块 模块化的最佳实现 在Node.js环境中采用CommonJS的规范 在浏览器环境采用ES Modules规范 那么这里我们主要介绍ES Modules的使用 ES Modules 的特性 首先介绍一下ES Modules都有哪些特性 Tips: 以下ES Module 将简称为ESM 通过给script添加
es--module模块
小白小白从不日别的博客
06-11 546
一、 二、 三、
ES6中的模块化编程
2401_84092574的博客
04-07 896
给大家分享一些关于HTML的面试题，有需要的朋友可以戳这里获取，先到先得哦。由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）给大家分享一些关于HTML的面试题，有需要的朋友可以戳这里获取，先到先得哦。[外链图片转存中…(img-NLTeH1cJ-1712446253943)][外链图片转存中…(img-dxVvIzJY-1712446253943)]
前端模块化开发-ESModules
徐亦快的踩坑记录
08-10 600
【注】本文为来自CSDN博主「Bal炎魔」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。原文链接在此 并做了一些细节上的改进~ 目录 模块化的演变 1、文件划分 2、命名空间方式 3、函数包裹 模块化规范 1. CommonJS 规范 2. AMD(Asynchronous Module Definition)规范 3. CMD(Sea.js) 4. ES Modules 1、基本特性 2、导入与导出 3、关于导入一些用法 4、ESModu.
探索高效模块语法解析器：ES Module Lexer
最新发布
gitblog_00051的博客
05-16 337
探索高效模块语法解析器：ES Module Lexer 项目地址:https://gitcode.com/guybedford/es-module-lexer 项目介绍 在JavaScript的现代开发中，ES Modules（ESM）已经成为标准的代码组织方式。为了帮助开发者更高效地处理和解析模块语法，es-module-lexer应运而生。这是一个轻量级的JavaScript库，专门用于提取模...
Node.js-browserify-handbook-如何利用browserify构建模块化应用程序
08-09
**Node.js浏览器化手册——利用Browserify构建模块化应用程序** 在现代前端开发中，JavaScript的模块化变得至关重要，尤其是在Node.js环境中。`browserify`是一个非常实用的工具，它允许我们在浏览器环境中使用Node...
前端开源库-cello-loader
08-30
1. **模块化加载**：cello-loader支持CommonJS、ES6模块的加载，使得前端代码能够按照模块化的思路进行组织，便于维护和复用。 2. **预处理器集成**：它可以集成如Babel这样的预处理器，将ES6+的语法转换为浏览器可...
ppt课件-第10章 使用webpack.zip
03-22
1. **Webpack基本概念**：Webpack 是如何理解模块化的，它的核心概念包括Entry（入口）、Output（输出）、Loaders（加载器）和Plugins（插件）。 2. **Webpack工作流程**：Webpack 接收源代码，通过Loader转换模块...
webpack&vite 前端构建工具源码
05-04
1. **即时重载（Hot Module Replacement，HMR）**：Vite在开发模式下利用ES模块的动态导入特性，实现快速热更新，无需完整编译即可看到更改。 2. **按需编译**：Vite在首次访问时才编译所需模块，减少了初始构建时间...
browserify-adventure
04-28
通过这个"browserify-adventure"的学习，你不仅会熟悉Browserify的基本操作，还能深入理解前端模块化开发的重要性，以及如何优雅地解决浏览器环境下的模块化问题。这将对你的JavaScript开发技能有显著提升，让你在...
ES Module原理详解
goodloving的博客
05-15 4995
ES Module执行分为两个阶段：构造阶段、实例化阶段、求值阶段···
前端模块化(CMJ和ESM)
darabiuz的博客
01-18 2754
12 es6模块化 在ES6出现之前，JS不像其他语言拥有“模块化”这一概念，比如python的import，就连css也有@import，于是为了支持JS模块化，我们使用类、立即执行函数或者第三方插件(RequireJS、seaJS)来实现模块化，在 ES6 之前，社区制定了一些模块加载方案，最主要的有 CommonJS 和 AMD 两种。前者用于服务器，后者用于浏览器。es6成为浏览器和服务器通用的模块解决方案。 一个文件就是一个模块, 模块中的数据都是私有的，ES6模块化模块和NodeJS中一样, 可
javascript模块化之ESM
qubes的专栏
11-07 452
[toc]]
模块化开发
weixin_53800968的博客
04-30 197
模块化概述 最主流的代码组织方式 模块化只是思想 模块化的演进过程 基于文件划分 缺点：污染全局作用域、命名冲突、无法管理模块依赖关系、完全依靠约定 命名空间方式 将模块包装成一个全局对象、减小命名冲突、仍然没有私有空间、变量可以被修改、依赖关系无法管理 使用立即执行函数为模块提供私有空间 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZHDKGgoH-1651320618136)(模块化开发/image-20220412214127261.png)] 使
【JavaScript】ESModule（esm）
Superman_H的博客
09-06 1554
# ESModule - ESModule (esm) 是 ES6 的模块化方案，使用 **`import`** & **`export`** 进行导入导出 - **Node** 及**浏览器**均支持 esm - 在 .html 文件中应用模块化，需要给 script 标签设置 `type="module"` - Node 默认支持 cjs 模块化规范。若想 Node 支持 esm，需要： ① 确保 Node 版本 >= 14.15.1 ② 在 package.json 的根节
JS模块化，ESM模块规范的 导入、导出、引用、调用详解
沐枫
11-03 2727
在之前的JS模块化的各种规范 之 CJS、AMD、CMD、UMD、ESM文章中，介绍了关于JS模块化的各种规范的区别和简单使用。由于ESM模块规范也是 ECMAScript2015（ES6）中的规范标准，在日常的Web项目开发、小程序开发、APP开发等都是很常用的，所以本文重点将 ESM模块规范中的 导出、导入、导出、引用、调用等，结合日常开发需求做进一步的介绍。
模块化 —— CommonJS、AMD、UMD、ESM（上）
小白菜的博客
04-11 460
模块化 —— CommonJS、AMD、UMD、ESM（上） CommonJS、AMD、UMD、ESM 无论是那种模块化规范，重点关注 独立模块作用域 导出模块内部数据 导入外部模块数据 CommonJS 在早起前端对于模块化并没有什么规范，反而是偏向服务端的应用有更强烈的需求，CommonJS 规范就是一套偏向服务端的模块化规范，NodeJS 就采用了这个规范。 独立模块作用域 一个文件就是...
es6新特性之模块化开发
Sumshine12.5
03-27 1528
以往我们是直接引入一些外部的js文件，有多少引多少，这样会造成一个js文件夹很多js文件，而且要一个一个的引入，影响浏览速度 在es6中支持了模块化开发，即你只需要引入一个入口的js文件，并不需要输入script标签引入 这一点有点像python 但是现在的浏览器是不支持es6的模块化的，我们能需要通过webpack这个工具进行打包已实现模块化开发 模块化基本语法 导出 export name导...
web前端模块化开发教程pdf
05-16
web前端模块化开发教程pdf是一份非常有价值的学习资料，它主要介绍了web前端模块化开发的基本概念、原理、应用以及具体的实现方法等方面内容，适合广大前端工程师、学生等进行学习和参考。 首先，这份教程pdf详细介绍了web前端模块化开发的背景和意义，指出了传统开发方式所存在的问题，并通过引入模块化开发的概念，解决了这些问题。其次，教程探讨了模块化开发的原理，让读者了解到了模块化开发的核心思想和优点，从而更好地理解和应用其相关的技术和工具。 此外，教程pdf还探讨了具体的模块化开发方案，比如AMD、CMD等，讲解了它们的运用场景、优缺点，并详细讲解了如何在项目中使用这些方案进行模块化开发。在介绍具体方案的同时，教程还深入分析了各种模块化工具的使用方法，如Require.js、Sea.js等，让读者能够更加靠近实战应用。 总之，web前端模块化开发教程pdf是一份非常精彩的资料，可以让读者在开展实际项目开发过程中更加高效、规范、方便。如果你想提升自己的web前端开发能力，建议认真阅读和研究此份教程，相信你会有许多收获和启发。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值