javascript七基础学习系列一千九百一十四:模 块

本章内容
 理解模块模式
 凑合的模块系统
 使用前ES6 模块加载器
 使用ES6 模块
现代JavaScript 开发毋庸置疑会遇到代码量大和广泛使用第三方库的问题。解决这个问题的方案通
常需要把代码拆分成很多部分,然后再通过某种方式将它们连接起来。
在ECMAScript 6 模块规范出现之前,虽然浏览器原生不支持模块的行为,但迫切需要这样的行为。
ECMAScript 同样不支持模块,因此希望使用模块模式的库或代码库必须基于JavaScript 的语法和词法特
性“伪造”出类似模块的行为。
因为JavaScript 是异步加载的解释型语言,所以得到广泛应用的各种模块实现也表现出不同的形态。
这些不同的形态决定了不同的结果,但最终它们都实现了经典的模块模式。
理解模块模式
将代码拆分成独立的块,然后再把这些块连接起来可以通过模块模式来实现。这种模式背后的思想
很简单:把逻辑分块,各自封装,相互独立,每个块自行决定对外暴露什么,同时自行决定引入执行哪
些外部代码。不同的实现和特性让这些基本的概念变得有点复杂,但这个基本的思想是所有JavaScript
模块系统的基础。
模块标识符
模块标识符是所有模块系统通用的概念。模块系统本质上是键/值实体,其中每个模块都有个可用
于引用它的标识符。这个标识符在模拟模块的系统中可能是字符串,在原生实现的模块系统中可能是模
块文件的实际路径。
有的模块系统支持明确声明模块的标识,还有的模块系统会隐式地使用文件名作为模块标识符。不
管怎样,完善的模块系统一定不会存在模块标识冲突的问题,且系统中的任何模块都应该能够无歧义地
引用其他模块。
将模块标识符解析为实际模块的过程要根据模块系统对标识符的实现。原生浏览器模块标识符必须
提供实际JavaScript 文件的路径。除了文件路径,Node.js 还会搜索node_modules 目录,用标识符去匹配
包含index.js 的目录。
模块依赖
模块系统的核心是管理依赖。指定依赖的模块与周围的环境会达成一种契约。本地模块向模块系统
声明一组外部模块(依赖),这些外部模块对于当前模块正常运行是必需的。模块系统检视这些依赖,
进而保证这些外部模块能够被加载并在本地模块运行时初始化所有依赖。
每个模块都会与某个唯一的标识符关联,该标识符可用于检索模块。这个标识符通常是JavaScript
文件的路径,但在某些模块系统中,这个标识符也可以是在模块本身内部声明的命名空间路径字符串。
模块加载
加载模块的概念派生自依赖契约。当一个外部模块被指定为依赖时,本地模块期望在执行它时,依
赖已准备好并已初始化。
在浏览器中,加载模块涉及几个步骤。加载模块涉及执行其中的代码,但必须是在所有依赖都加载
并执行之后。如果浏览器没有收到依赖模块的代码,则必须发送请求并等待网络返回。收到模块代码之
后,浏览器必须确定刚收到的模块是否也有依赖。然后递归地评估并加载所有依赖,直到所有依赖模块
都加载完成。只有整个依赖图都加载完成,才可以执行入口模块。
入口
相互依赖的模块必须指定一个模块作为入口(entry point),这也是代码执行的起点。这是理所当然
的,因为JavaScript 是顺序执行的,并且是单线程的,所以代码必须有执行的起点。入口模块也可能依
赖其他模块,其他模块同样可能有自己的依赖。于是模块化JavaScript 应用程序的所有模块会构成依赖
图。
可以通过有向图来表示应用程序中各模块的依赖关系。
在JavaScript 中,“加载”的概念可以有多种实现方式。因为模块是作为包含将立即执行的JavaScript
代码的文件实现的,所以一种可能是按照依赖图的要求依次请求各个脚本。对于前面的应用程序来说,下面的脚本请求顺序能够满足依赖图的要求:

模块加载是“阻塞的”,这意味着前置操作必须完成才能执行后续操作。每个模块在自己的代码到达
浏览器之后完成加载,此时其依赖已经加载并初始化。不过,这个策略存在一些性能和复杂性问题。为
一个应用程序而按顺序加载五个JavaScript 文件并不理想,并且手动管理正确的加载顺序也颇为棘手。

  • 4
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值