Loading [MathJax]/jax/input/TeX/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >module_ES6笔记13

module_ES6笔记13

作者头像
ayqy贾杰
发布于 2023-03-15 10:52:35
发布于 2023-03-15 10:52:35
35800
代码可运行
举报
文章被收录于专栏:黯羽轻扬黯羽轻扬
运行总次数:0
代码可运行

写在前面

这是ES6笔记的最后一篇内容,也是唯一一个将来才能使用的特性

将来是什么时候?

或许是HTTP2普及的时候。但更大的可能是将来也“不能用”(还是只能在构建工具中用,仅存在于“编译期”)

一.AMD,CMD与CommonJS

AMD/CMD,一点扩展知识如下: CommonJS是一套理论规范(比如js的理论规范是ES),而SeaJS, RequireJS都是对CommonJS的Modules部分的具体实现 CommonJS是面向浏览器外(server端)的js制定的,所以是同步模块加载,SeaJS是CommonJS的一个实现,而RequireJS虽然也是对CommonJS的一个实现,但它是异步模块加载,算是更贴近浏览器的单线程环境 总结:CommonJS的Modules部分提出了模块化代码管理的理论,为了让js可以模块化加载,而RequireJS, SeaJS等各种实现可以称为模块化脚本加载器 CMD:Common模块定义,例如SeaJS AMD:异步模块定义,例如RequireJS 都是用来定义代码模块的一套规范,便于模块化加载脚本,提高响应速度 CMD与AMD的区别: CMD依赖就近。便于使用,在模块内部可以随用随取,不需要提前声明依赖项,所以性能方面存在些许降低(需要遍历整个模块寻找依赖项目) AMD依赖前置。必须严格声明依赖项,对于逻辑内部的依赖项(软依赖),以异步加载,回调处理的方式解决

(引自JS编程常识)

如果关注过JS模块化,应该清楚这三者混乱的关系,ES6模块希望通过标准来结束这种混乱

二.ES6模块语法

1.模块作用域

module引入了模块作用域,特点如下:

  • 目前(2016/1/312016/10/29)没有浏览器支持ES6模块(可能这样的模块加载机制不适合浏览器环境),利用webpack等工具可以把import的所有内容整合到一个文件中
  • ES6模块默认严格模式,无论加不加'use strict';
  • 支持引入/导出时重命名,import/export {api as newApi},引入时重命名主要解决命名冲突,导出时重命名可以实现别名($jQuery
  • 支持默认引入/导出,能够引入CommonJS和AMD模块
  • 只可以在模块的最外层作用域使用import/export,且不能再条件语句中使用

总结:推进严格模式;兼容CommonJS和AMD;只是单纯的静态模块机制,没有解决按需加载之类的问题

引入/导出时重命名,示例如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 引入时重命名,解决命名冲突
import {flip as flipOmelet} from "eggs.js";
import {flip as flipHouse} from "real-estate.js";// 导出时重命名,实现别名
function v1() { ... }
function v2() { ... }
export {
 v1 as streamV1,
 v2 as streamV2,
 v2 as streamLatestVersion
};

2.import

import {api1, api2...} from 'xxx.js'语法,特点如下:

  • 支持api部分引入(不引入不需要的功能接口,当然,xxx.js是完整加载的,部分引入只是作用域控制)
  • 如果xxx.js还有import语句,会深度优先加载执行
  • 已执行模块会被忽略,避免形成循环引用
  • 支持默认引入,用来支持引入CommonJS和AMD包(default就是export对象),import api from 'xxx.js'等价于import {default as api} from 'xxx.js'
  • 支持引入模块对象,import * as apis from 'xxx.js'*表示xxx.jsexport的所有东西,把xxx.js中导出的所有东西整合到apis对象中,通过apis.xx访问

总结:加载机制类似于CSS@import,处理循环依赖的方式也类似;同样兼容CommonJS和AMD

作用域层面支持部分引入,有用,但意义不大,配合构建工具编译时“剪枝”(tree shaking)更好一些

3.export

export {api1, api2...}语法,特点如下:

  • 不需要在首行声明,可以在模块内外层作用域任何位置export
  • 可以声明多个export,但要保证api名称无重复,名称重复可能会出错
  • 支持默认导出,export default api或者export {api as default}
  • 支持聚合导出,export {api1, api2...} from 'xxx.js'等价于import + export,但export from不会在当前模块作用域引入各个api变量(引入后直接导出,无法引用
  • export导出的api列表必须是字面量形式,不能遍历数组导出数组元素

总结:加载时整理export列表,所以可以在外层任何位置export;支持聚合,从各个第三方模块抽出一部分整合起来;静态限制,不允许动态导出

示例如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 默认导出
let myObject = {
 field1: value1,
 field2: value2
};
export {myObject as default};
// 等价于
export default {
 field1: value1,
 field2: value2
};// 聚合导出
// 导入"sri-lanka"并将它导出的内容的一部分重新导出
export {Tea, Cinnamon} from "sri-lanka";
// 导入"equatorial-guinea"并将它导出的内容的一部分重新导出
export {Coffee, Cocoa} from "equatorial-guinea";
// 导入"singapore"并将它导出的内容全部导出
export * from "singapore";

三.模块执行机制

ES6标准没有写明具体模块加载机制,交由最终实现来定,但明确规定了模块执行机制,分为4个步骤

  1. 语法解析 检查语法错误
  2. 加载

递归加载所有被import的东西,具体怎么加载,没有写明,完全交由最终实现来定

  1. 连接

创建模块作用域,并把所有被import进来的东西塞进作用域

如果import出错,就会触发错误,具体行为未知(因为还没有浏览器已经走过了第2步)

  1. 运行时

执行每一个模块的所有语句,此时遇到import/export就忽略掉,因为模块相关的处理已经结束了

静态限制

  • 只能在模块最外层作用域使用import/export,不能在条件语句中使用,也不能在函数作用域用
  • export的标识符必须是字面量形式(要在源码中有对应的声明),不能遍历数组再导出一堆东西
  • 模块对象被冻结了,不能通过hack模块对象来添加polyfill风格的新特性
  • 模块的所有依赖必须在模块代码执行前加载、解析并连接完毕,不存在一种通过import来按需懒加载的语法
  • import模块产生的错误没有对应的恢复机制。如果有一个模块无法加载或连接,所有的模块都不会执行,而且无法捕获import错误
  • 无法在模块加载依赖前执行其它代码,这意味着无法控制模块的依赖加载过程

因为存在这些限制,所以可能在HTTP2普及后,ES6模块机制还是不能在浏览器兴起,像CSS的@import一样,能用,但都不愿意用

四.HTTP2与模块化

在HTTP1.1的环境下,为了减少HTTP请求数量,所有模块化方案最终都依赖构建工具整合出单一文件

但HTTP2带来了一些变革,也许能够改变这种工程化流程,比如多路复用流(Multiplexed stream)和服务器端推送:

Http2连接可以承载数十或数百个流的复用,多路复用意味著来自很多流的数据包能够混合在一起通过同样连接传输,两列不同火车被混合在一起传输,当到达终点时,它们又被拆开组成两列不同的火车。 客户端请求一个资源X,服务器端判断也许客户端还需要资源Z,在无需事先询问客户端情况下将资源Z推送到客户端,客户端接受到后,可以缓存起来以备后用。

(引自Http 2.0协议简介)

多路复用流抹平了文件合并的优势,服务端推送有助于解决深度import问题,所以ES6模块可能会在浏览器环境兴起

HTTP2对于模块化进程有重要意义,为在生产环境保持模块化提供了机会,JS、CSS甚至其它资源都可能迎来真正的模块化

P.S.关于HTTP2的更多细节,请查看https://github.com/bagder/http2-explained

五.ES6模块现状

As the various milestones of the roadmap are completed, browsers will be able to implement them. See the following trackers for the current status of the main browsers: IE/Edge: Under Consideration Firefox: In progress Chrome: In progress Webkit: Meta Bug

(引自https://github.com/whatwg/loader)

关于ES6模块加载器的更多信息请关注这个repo,ES6规范没有说明加载的具体实现,所以浏览器都卡在了加载器的实现上

参考资料

  • 《ES6 in Depth》:InfoQ中文站提供的免费电子书
本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2016-10-29,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 前端问问 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
30分钟学会前端模块化开发
早期的javascript版本没有块级作用域、没有类、没有包、也没有模块,这样会带来一些问题,如复用、依赖、冲突、代码组织混乱等,随着前端的膨胀,模块化显得非常迫切。
张果
2018/12/24
4K0
CommonJS,AMD,CMD和ES6的对比
CommonJS的核心思想就是通过 require 方法来同步加载所要依赖的其他模块,然后通过 exports 或者 module.exports 来导出需要暴露的接口。
码客说
2019/10/22
1.2K0
一文彻底搞懂ES6 Module
模块,(Module),是能够单独命名并独立地完成一定功能的程序语句的集合(即程序代码和数据结构的集合体)。
@超人
2021/07/29
4810
一文彻底搞懂ES6 Module
【THE LAST TIME】深入浅出 JavaScript 模块化
随着互联网的发展,前端开发也变的越来越复杂,从一开始的表单验证到现在动不动上千上万行代码的项目开发,团队协作就是我们不可避免的工作方式,为了更好地管理功能逻辑,模块化的概念也就渐渐产生了。
Nealyang
2020/01/14
7050
【THE LAST TIME】深入浅出 JavaScript 模块化
一文搞懂 JavaScript 模块化规范:CommonJS、AMD、ES6 Module
在前端开发的历史中,模块化一直是一个核心的问题。随着 JavaScript 应用程序变得越来越复杂,代码的可维护性、复用性和模块化的需求也越来越迫切。
空白诗
2024/09/09
5630
一文搞懂 JavaScript 模块化规范:CommonJS、AMD、ES6 Module
ES Module
惟一作用是让浏览代码变得容易一些,迅速找到指定模块,根本原因是单文件内容太长,已经遇到了维护的麻烦,所以手动插入一些锚点供快速跳转
ayqy贾杰
2019/06/12
9550
ES Module
「前端工程四部曲」模块化的前世今生(上)
在日益复杂和多元的Web业务背景下,前端工程化这个概念经常被提及。“说说你对Web工程化的理解?” 相信很多初学者在面试时会经常遇到,而大多数人脑子会直接浮现出 Webpack,认为工程化就是 Webpack 做的那些事情儿,当然也不能说不对,准确说 Webpack 只是工程化背景下产生的工具。
isboyjc
2022/03/28
4600
JS MODULE 大战
JS本身是一个多才多艺的语言,一个可以用自己编译自己的自由度极高的语言。正因为这份自由,出现了天花乱坠的规范与框架们,其中最基础的一块便是Module。
小美娜娜
2019/04/25
6930
五分钟带你回顾前端模块化发展史
CSS 早在 2.1 的版本就提出了 @import 来实现模块化,但是 JavaScript 直到 ES6 才出现官方的模块化方案 ES Module。尽管早期 JavaScript 语言规范上不支持模块化,但这并没有阻止 JavaScript 的发展。官方没有模块化标准,那么我们就自己动手创建标准。社区里的前辈们创建并实现了规范,这些规范便是前端模块化发展之路上智慧的结晶。
童欧巴
2020/03/30
8850
五分钟带你回顾前端模块化发展史
Js模块化开发的理解
模块化是一个语言发展的必经之路,其能够帮助开发者拆分和组织代码,随着前端技术的发展,前端编写的代码量也越来越大,就需要对代码有很好的管理,而模块化能够帮助开发者解决命名冲突、管理依赖、提高代码的可读性、代码解耦以及提高代码的复用性。
WindRunnerMax
2020/11/12
2.1K0
AMD && CMD
随着web2.0时代的到来,Ajax技术得到广泛应用,jQuery等前端库层出不穷,前端代码日益膨胀
超然
2018/08/03
1.9K0
JavaScript——请列出目前主流的 JavaScript 模块化实现的技术有哪些?说出它们的区别?
CommonJS的出发点: JS没有完善的模块系统,标准库较少,缺少包管理工具。伴随着NodeJS的兴起,能让JS在任何地方运行,特别是服务端,也达到了具备开发大型项目的能力,所以CommonJS营运而生。
思索
2024/08/16
1900
收藏 | JavaScript 模块全面剖析
前端爱好者的知识盛宴 模块通常是指编程语言所提供的代码组织机制,利用此机制可将程序拆解为独立且通用的代码单元。 所谓模块化主要是解决代码分割、作用域隔离、模块之间的依赖管理以及发布到生产环境时的自动化打包与处理等多个方面。 模块的优点 可维护性。 因为模块是独立的,一个设计良好的模块会让外面的代码对自己的依赖越少越好,这样自己就可以独立去更新和改进。 命名空间。 在 JavaScript 里面,如果一个变量在最顶级的函数之外声明,它就直接变成全局可用。因此,常常不小心出现命名冲突的情况。使用模块化开发来封
用户1097444
2022/06/29
5000
收藏 | JavaScript 模块全面剖析
ES6之Module
技术的诞生是为了解决某个问题,模块化也是。 随着前端的发展,web技术日趋成熟,js功能越来越多,代码量也越来越大。之前一个项目通常各个页面公用一个js,但是js逐渐拆分,项目中引入的js越来越多. 在js模块化诞生之前,开发者面临很多问题:
19组清风
2021/11/15
2840
简单的复习下前端模块化相关的知识
作为前端开发,模块化我们已经耳熟能详,我们平时接触到的 ES6 的 import,nodejs中的require他们有啥区别?
前端达人
2022/04/18
4240
commonjs与es6 module
当前最主流的两个模块化方案:nodejs使用的是commonjs规范、前台浏览器端主要使用的是es6 Module nodejs当前就是commonjs规范的代表实践者,因此用的是require。 import是es6新增的api,在语言标准层面上,实现了模块功能。旨在成为浏览器和服务器端的通用模块解决方案。
epoos
2022/06/06
2980
前端模块化
文章地址:https://cloud.tencent.com/developer/article/2470901
用户7194327
2024/12/03
1160
module.exports、exports、export、export default之间的关系和区别
对于module.exports、exports和export、export default之间的关系以及他们的区别一直处于懵逼状态的小伙伴,本篇文章带你走进新大陆。 首先我们要明白一个前提,CommonJS模块规范和ES6模块规范完全是两种不同的概念。此处会产生一个疑问,为什么会出现模块化这种东西,模块化规范又是指的什么? :很久以前,开发网页要通过命名空间的方式来组织代码,例如 jQuery 库将它的 API 都放在了 window.$ 下,在加载完 jQuery 后,其他模块再通过 window
stys35
2019/11/04
8950
10分钟带你了解JavaScript模块化的前世今生!
导语:本文带你去了解一下JavaScript模块化的前世今生,包括但不限于JavaScript模块化、模块化规范、模块加载器和模块打包工具等。本文不是一个深度剖析JavaScript模块相关话题的文章,仅是一个能够让你10分钟快速了解JavaScript模块化相关知识的介绍。 作者:徐江伟--腾讯前端工程师 @IMWeb前端社区 现在JavaScript技术的发展可能会让你应接不暇。身为一线搬砖工的你对雨后春笋般的前端工具和框架越来越疲于学习和暇接。有时候,你可能不自主的问,webpack是什么玩意?bro
用户1097444
2022/06/29
3650
10分钟带你了解JavaScript模块化的前世今生!
前端模块化详解(完整版)
在JavaScript发展初期就是为了实现简单的页面交互逻辑,寥寥数语即可;如今CPU、浏览器性能得到了极大的提升,很多页面逻辑迁移到了客户端(表单验证等),随着web2.0时代的到来,Ajax技术得到广泛应用,jQuery等前端库层出不穷,前端代码日益膨胀,此时在JS方面就会考虑使用模块化规范去管理。 本文内容主要有理解模块化,为什么要模块化,模块化的优缺点以及模块化规范,并且介绍下开发中最流行的CommonJS, AMD, ES6、CMD规范。本文试图站在小白的角度,用通俗易懂的笔调介绍这些枯燥无味的概念,希望诸君阅读后,对模块化编程有个全新的认识和理解!
Nealyang
2019/09/29
1.3K0
前端模块化详解(完整版)
相关推荐
30分钟学会前端模块化开发
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档