JS模块化(2)

认 识 ESModule

JavaScript 没有模块化一直是 它的痛点 ，所以才会产生我们前面学习的社区规范： CommonJ S 、 AMD 、 CMD 等，

所以在 ES 推出自己的模块化系统时，大家也是兴奋异常。

  ES Module 和 CommonJS 的模块化有一些不同之处：

 

一方面它使用了 import 和 export 关键字；

 

另一方面它采用编译期的静态分析，并且也加入了动态引用的方式；

  ES Module 模块采用 export 和 import 关键字来实现模块化：

 

export 负责将模块内的内容导出；

 

import 负责从其他模块导入内容；

  了解：采用 ES Module 将自动采用严格模式： use strict

 

如果你不熟悉严格模式可以简单看一下 MDN 上的解析；

 

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Strict_mode

 

案例代码结构组件

这里我在浏览器中演示ES6的模块化开发

如果直接在浏览器中运行代码，会报如下错误：

这个在 MDN 上面有给出解释：

 

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Modules

 

你需要注意本地测试 — 如果你通过本地加载 Html 文件 ( 比如一个 file:// 路径的文件 ), 你将会遇到 CORS 错误，因

为 Javascript 模块安全性需要。

 

你需要通过一个服务器来测试。

  我这里使用的 VSCode ， VSCode 中有一个插件： Live Server

export关键字

export 关键字将一个模块中的变量、函数、类等导出；

  我们希望将其他中内容全部导出，它可以有如下的方式：

  方式一：在语句声明的前面直接加上 export 关键字

  方式二：将所有需要导出的标识符，放到 export 后面的 {} 中

 

注意：这里的 {} 里面不是 ES6 的对象字面量的增强写法， {} 也不是表示一个对象的；

 

所以： export {name: name} ，是错误的写法；

  方式三：导出时给标识符起一个别名

import关键字

import 关键字负责从另外一个模块中导入内容

  导入内容的方式也有多种：

  方式一： import { 标识符列表 } from ' 模块 ' ；

  注意：这里的 {} 也不是一个对象，里面只是存放导入的标识符列表内容；

  方式二：导入时给标识符起别名

  方式三：通过 * 将模块功能放到一个模块功能对象（ a module object ）上

Export和import结合使用

补充： export 和 import 可以结合使用

为什么要这样做呢？

 

在开发和封装一个功能库时，通常我们希望将暴露的所有接口放到一个文件中；

 

这样方便指定统一的接口规范，也方便阅读；

 

这个时候，我们就可以使用 export 和 import 结合使用；

 

default用法

前面我们学习的导出功能都是有名字的导出（ named exports ）：

 

在导出 export 时指定了名字；

 

在导入 import 时需要知道具体的名字；

  还有一种导出叫做默认导出（ default export ）

 

默认导出 export 时可以不需要指定名字；

 

在导入时不需要使用 {} ，并且可以自己来指定名字；

 

它也方便我们和现有的 CommonJS 等规范相互操作；

  注意：在一个模块中，只能有一个默认导出（ default export ）；

import函数

通过 import 加载一个模块，是不可以在其放到逻辑代码中的，比如：

 

为什么会出现这个情况呢？

 

这是因为 ES Module 在被 JS 引擎解析时，就必须知道它的依赖关系；

 

由于这个时候 js 代码没有任何的运行，所以无法在进行类似于 if 判断中根据代码的执行情况；

 

甚至下面的这种写法也是错误的：因为我们必须到运行时能确定 path 的值；

 

但是某些情况下，我们确确实实希望动态的来加载某一个模块：

 

如果根据不懂的条件，动态来选择加载模块的路径；

 

这个时候我们需要使用 import() 函数来动态加载；

 

                                   

CommonJS的加载过程

CommonJS 模块加载 js 文件的过程是运行时加载的，并且是同步的：

 

运行时加载意味着是 js 引擎在执行 js 代码的过程中加载 模块；

 

同步的就意味着一个文件没有加载结束之前，后面的代码都不会执行；

CommonJS 通过 module.exports 导出的是一个对象：

 

导出的是一个对象意味着可以将这个对象的引用在其他模块中赋值给其他变量；

 

但是最终他们指向的都是同一个对象，那么一个变量修改了对象的属性，所有的地方都会被修改；

 

ES Module加载过程

ES Module 加载 js 文件的过程是编译（解析）时加载的，并且是异步的：

 

编译时（解析）时加载，意味着 import 不能和运行时相关的内容放在一起使用：

 

比如 from 后面的路径需要动态获取；

 

比如不能将 import 放到 if 等语句的代码块中；

 

所以我们有时候也称 ES Module 是静态解析的，而不是动态或者运行时解析的；

  异步的意味着： JS 引擎在遇到 import 时会去获取这个 js 文件，但是这个获取的过程是异步的，并不会阻塞主线程继

续执行；

 

也就是说设置了 type=module 的代码，相当于在 script 标签上也加上了 async 属性；

 

如果我们后面有普通的 script 标签以及对应的代码，那么 ES Module 对应的 js 文件和代码不会阻塞它们的执行；

 

 

<script src="./modules/foo.js" type="module"></script>
<script src="main.js" type="module"></script>