1.浏览器加载

1.1传统方法：

在 HTML 网页中，浏览器通过<script>标签加载 JavaScript 脚本

默认情况下，浏览器是同步加载 JavaScript 脚本，即渲染引擎遇到`<script>`标签就会停下来，等到执行完脚本，再继续向下渲染。如果是外部脚本，还必须加入脚本下载的时间

如果脚本体积很大，下载和执行的时间就会很长，因此造成浏览器堵塞，用户会感觉到浏览器“卡死”了，没有任何响应。这显然是很不好的体验，所以浏览器允许脚本异步加载，下面就是两种异步加载的语法

上面代码中，<script>标签打开defer或async属性，脚本就会异步加载。渲染引擎遇到这一行命令，就会开始下载外部脚本，但不会等它下载和执行，而是直接执行后面的命令

defer与async的区别是：前者要等到整个页面正常渲染结束，才会执行；后者一旦下载完，渲染引擎就会中断渲染，执行这个脚本以后，再继续渲染。一句话，defer是“渲染完再执行”，async是“下载完就执行”。另外，如果有多个defer脚本，会按照它们在页面出现的顺序加载，而多个async脚本是不能保证加载顺序的

1.2加载规则：

浏览器加载 ES6 模块，也使用<script>标签，但是要加入type=”module”属性

上面代码在网页中插入一个模块foo.js，由于type属性设为module，所以浏览器知道这是一个 ES6 模块

浏览器对于带有type=”module”的<script>，都是异步加载，不会造成堵塞浏览器，即等到整个页面渲染完，再执行模块脚本，等同于打开了<script>标签的defer属性

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

ES6 模块也允许内嵌在网页中，语法行为与加载外部脚本完全一致

对于外部的模块脚本（上例是foo.js），有几点需要注意
- 代码是在模块作用域之中运行，而不是在全局作用域运行。模块内部的顶层变量，外部不可见
- 模块脚本自动采用严格模式，不管有没有声明use strict
- 模块之中，可以使用import命令加载其他模块（.js后缀不可省略，需要提供绝对 URL 或相对 URL），也可以使用export命令输出对外接口
- 模块之中，顶层的this关键字返回undefined，而不是指向window。也就是说，在模块顶层使用this关键字，是无意义的
- 同一个模块如果加载多次，将只执行一次

下面是一个示例模块

利用顶层的this等于undefined这个语法点，可以侦测当前代码是否在 ES6 模块之中

2.ES6 模块与 CommonJS 模块的差异

CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用
CommonJS 模块是运行时加载，ES6 模块是编译时输出接口

第二个差异是因为 CommonJS 加载的是一个对象（即module.exports属性），该对象只有在脚本运行完才会生成。而 ES6 模块不是对象，它的对外接口export只是一种静态定义，在代码静态解析阶段就会生成

下面重点解释第一个差异

CommonJS 模块输出的是值的拷贝，也就是说，一旦输出一个值，模块内部的变化就影响不到这个值。请看下面这个模块文件lib.js的例子

ES6 模块的运行机制与 CommonJS 不一样。JS 引擎对脚本静态分析的时候，遇到模块加载命令import，就会生成一个对输出模块的只读引用，等到脚本真正要用到模块输出的方法时，再根据这个只读引用，到被加载的那个模块里面去取值。换句话说，ES6 的import有点像 Unix 系统的“符号连接”，原始值变了，import加载的值也会跟着变。因此，ES6 模块是动态引用，并且不会缓存值，模块里面的变量绑定其所在的模块

上面代码说明，ES6 模块输入的变量counter是活的，完全反应其所在模块lib.js内部的变化

上面代码表明，ES6 模块不会缓存运行结果，而是动态地去被加载的模块取值，并且变量总是绑定其所在的模块

由于 ES6 输入的模块变量，只是一个“符号连接”，所以这个变量是只读的，对它进行重新赋值会报错

上面代码中，main.js从lib.js输入变量obj，可以对obj添加属性，但是重新赋值就会报错。因为变量obj指向的地址是只读的，不能重新赋值，这就好比main.js创造了一个名为obj的const变量

最后，export通过接口，输出的是同一个值。不同的脚本加载这个接口，得到的都是同样的实例

这就证明了x.js和y.js加载的都是C的同一个实例

ES6之Module 的加载实现(1)相关推荐

ES6之Module 的加载实现(3)
4.循环加载 "循环加载"(circular dependency)指的是,a脚本的执行依赖b脚本,而b脚本的执行又依赖a脚本通常,"循环加载"表示存在强耦合 ...
ES6之Module 的加载实现(2)
3.Node 加载 Node 对 ES6 模块的处理比较麻烦,因为它有自己的 CommonJS 模块格式,与 ES6 模块格式是不兼容的.目前的解决方案是,将两者分开,ES6 模块和 CommonJS ...
【ES6】阮一峰ES6学习之Module的加载实现
Module的加载实现 1. 浏览器加载传统方法加载规则 ES6 模块与 CommonJS 模块的差异 1. CommonJS 模块输出的是一个值的拷贝,ES6 模块输出的是值的引用. 2. Co ...
ES6 系列之模块加载方案
前言本篇我们重点介绍以下四种模块加载规范: AMD CMD CommonJS ES6 模块最后再延伸讲下 Babel 的编译和 webpack 的打包原理. require.js 在了解 AMD ...
21.Module 的加载实现
Module 的加载实现 Module 的加载实现上一章介绍了模块的语法,本章介绍如何在浏览器和 Node 之中加载 ES6 模块,以及实际开发中经常遇到的一些问题(比如循环加载). 浏览器加载传 ...
Chromium插件（Plugin）模块（Module）加载过程分析
在Chromium中,每一个Plugin都对应一个Module,称为Plugin Module.一个Plugin Module可创建多个Plugin Instance.每一个Plugin Instan ...
Module的加载实现
烂笔头开始记录小知识点啦- 浏览器要加载 ES6模块,: <script type="module" src="./foo.js"></scr ...
java loadjs_Javarscript中模块(module)、加载(load)与捆绑(bundle)详解
JS模块简介 js模块化,简单说就是将系统或者功能分隔成单独的.互不影响的代码片段,经过严格定义接口,使各模块间互不影响,且可以为其他所用. 常见的模块化有,C中的include (.h)文件.jav ...
Angular项目中核心模块core Module只加载一次的实现
核心模块CoreModule在整个系统中只加载一次,如何实现? 创建core Modele:ng g m core 既然CoreModule是类,就有构造函数,在构造函数中进行依赖注入. export ...

ES6之Module 的加载实现(1)

1.浏览器加载

1.1传统方法：

默认情况下，浏览器是同步加载 JavaScript 脚本，即渲染引擎遇到`<script>`标签就会停下来，等到执行完脚本，再继续向下渲染。如果是外部脚本，还必须加入脚本下载的时间

如果脚本体积很大，下载和执行的时间就会很长，因此造成浏览器堵塞，用户会感觉到浏览器“卡死”了，没有任何响应。这显然是很不好的体验，所以浏览器允许脚本异步加载，下面就是两种异步加载的语法

1.2加载规则：

2.ES6 模块与 CommonJS 模块的差异

第二个差异是因为 CommonJS 加载的是一个对象（即module.exports属性），该对象只有在脚本运行完才会生成。而 ES6 模块不是对象，它的对外接口export只是一种静态定义，在代码静态解析阶段就会生成

ES6之Module 的加载实现(1)相关推荐

最新文章

热门文章

ES6之Module 的加载实现(1)

1.浏览器加载

1.1传统方法：

默认情况下，浏览器是同步加载 JavaScript 脚本，即渲染引擎遇到<script>标签就会停下来，等到执行完脚本，再继续向下渲染。如果是外部脚本，还必须加入脚本下载的时间

如果脚本体积很大，下载和执行的时间就会很长，因此造成浏览器堵塞，用户会感觉到浏览器“卡死”了，没有任何响应。这显然是很不好的体验，所以浏览器允许脚本异步加载，下面就是两种异步加载的语法

1.2加载规则：

2.ES6 模块与 CommonJS 模块的差异

第二个差异是因为 CommonJS 加载的是一个对象（即module.exports属性），该对象只有在脚本运行完才会生成。而 ES6 模块不是对象，它的对外接口export只是一种静态定义，在代码静态解析阶段就会生成

ES6之Module 的加载实现(1)相关推荐

最新文章

热门文章

默认情况下，浏览器是同步加载 JavaScript 脚本，即渲染引擎遇到`<script>`标签就会停下来，等到执行完脚本，再继续向下渲染。如果是外部脚本，还必须加入脚本下载的时间