模块加载

模块加载

1.web浏览器中使用模块

es6之前(脚本加载)：

1.在script元素中通过src属性指定一个加载代码的地址来加载js文件
2.将js代码内嵌到没有src属性的script元素中
3.通过web worker 或者Service Worker方法加载执行js文件

<!-- 页面内嵌的脚本 -->
<script type="application/javascript">
// module code
</script>

<!-- 外部脚本 -->
<script type="application/javascript" src="path/to/myModule.js">
</script>

 

在script中，type='module'时，支持加载模块；将type设置为module可以让浏览器将所有内联代码或包含在src指定的文件中的代码按照模块而非脚本的方式加载。

如demo
<!--加载一个js模块文件-->
<script type='module' src='module.js'></script>

<!--内联引入一个模块,嵌入在网页中的模块-->
<script type='module'>

import { sum } from '../example.js'

let result = sum(1,2)

</script>

// 变量result没有暴露到全局作用域，只是存在于模块中
// 浏览器对于带有type="module"的<script>，都是异步加载，不会造成堵塞浏览器，即等到整个页面渲染完，再执行模块脚本，等同于打开了<script>标签的defer属性

什么是defer属性？defer要等到整个页面在内存中正常渲染结束（DOM 结构完全生成，以及其他脚本执行完成），才会执行
延伸: 什么是async属性？ async一旦下载完，渲染引擎就会中断渲染，执行这个脚本以后，再继续渲染。

defer：渲染完再执行 （如果有多个defer脚本，会按照它们在页面出现的顺序加载）
async：下载完就执行 （而多个async脚本是不能保证加载顺序的）

 

2. web浏览器中模块加载顺序
<!--先执行这个标签-->
<script type='module' src='module1.js'></script>

<!--再执行这个标签-->
<script type='module'>
import { sum } from '../example.js'

let result = sum(1,2)
</script>

<!--最后执行这个标签-->
<script type='module' src='module2.js'></script>

注意：如果网页有多个<script type="module">，它们会按照在页面出现的顺序依次执行

**加载脚本文件时，defer是可选属性;
**加载模块时，defer是必须属性

总之，每个模块都可以从一个或多个其他的模块导入，虽然会使得问题复杂化，首先解析模块以识别所有导入的语句；然后每个导入语句都会触发一次获取过程（网络或缓存），
并且在所有导入资源都被加载和执行后才会执行当前模块。

我们再来看，用script type='module' 显示引入和用import隐式导入所有模块都是按需加载并执行的。分析上述加载顺序看看

1. 下载并解析module1.js
2. 递归下载并解析module1.js中导入的资源
3. 解析内联模块
4. 递归下载并解析内联模块中导入的资源
5. 下载并解析module2.js
6. 递归下载并解析module2.js中导入的资源

加载完成后，只有当文档完全被解析（dom渲染完）之后才会执行其他操作。而当dom渲染完之后，发生的动作：

1.递归执行module1.js中导入的资源
2.执行module1.js
3.递归执行内联模块中导入的资源
4.执行内联模块
5.递归执行module2.js中导入的资源
6.执行module2.js

3. web浏览器异步模块加载

<script>标签的async属性也可以打开，这时只要加载完成，渲染引擎就会中断渲染立即执行。执行完成后，再恢复渲染

<script type="module" src="./foo1.js" async></script>
<script type="module" src="./foo2.js" async></script>

注意：无法保证这两个哪个先执行
一旦使用了async属性，<script type="module">就不会按照在页面出现的顺序执行，而是只要该模块加载完成（包含所有导入的资源），就执行该模块

ecmacript 6中：http://es6.ruanyifeng.com/#docs/module-loader

4.将模块作为worker加载

web worker
Service worker

可以在网页上下文之外执行js代码。创建一个worker实例

// 按照脚本的方式加载script.js
// @params: 传入js文件的地址
// 默认的加载机制是按照脚本的方式加载文件
let worker = new Worker('script.js')

// 按照模块的方式加载module.js
let worker = new Worker('module.js', {type: 'module'})

给第二个参数传入一个对象，type属性为 module

使用worker要注意：

1.worker脚本只能从与引用的网页相同的源加载，worker模块不会完全受限
2.worker模块具有相同的默认限制，但是他们还是可以加载并访问具有适当的跨域资源共享cors头的文件
3.worker脚本可以使用self.importScripts()方法将其他脚本加载到worker中；而worker模块使用的是import进行导入

5. 浏览器模块说明符解析

模块说明符 module specifier 使用的都是相对路径 （'./index.js'）

浏览器要求模块说明符具有的几种格式：

1. 以 / 开头的解析为根目录开始
2. 以./开头的解析为从当前目录开始
3. 以../开头的解析为从父目录开始
4. URL格式