模块化开发-ES Modules 基本特性

学习 ES Modules 可以从两个维度入手：

了解 ES Modules 作为一个规范或者说标准，约定了哪些特性和语法。
如何通过一些工具或者方案去解决 ES Modules 在运行环境当中兼容性所带来的问题。接下来我们梳理下 ES Modules 的语法特性(通过给 script 标签添加 type = module 的属性，可以直接去使用 ES Modules 的标准去执行引入 JS 文件当中的 JS 代码)：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>ES Module - 模块的特性</title>
</head>
<body>
  <script type="module">
    console.log('this is es module')
  </script>
</body>
</html>

// demo.js
alert('hello')

ESM 自动采用严格模式，忽略 'use strict'。严格模式的代表特征就是不能在全局范围使用 this，在非严格模式下 this 的指向是全局对象。

<script type="module">
  console.log(this)
</script>

每个 ES Module 都是运行在单独的私有作用域中。

<script type="module">
  var foo = 100
  console.log(foo)
</script>
<script type="module">
  console.log(foo)
</script>

ESM 是通过 CORS 的方式请求外部 JS 模块的，这就意味着模块如果不在同源地址下面的话，就需要请求的服务端地址它在相应的相应头当中必须要提供有效的 CORS 目标头。另外 CORS 不允许通过文件的方式去访问，所以必须使用 HTTP Serve 的方式让页面工作起来。

<script type="module" src="https://unpkg.com/jquery@3.4.1/dist/jquery.min.js"></script>

ESM 的 script 标签会自动的延迟执行脚本，这点等同于 script 标签的 defer 属性。也就是说添加 type = "module" 属性，就相当于添加了一个 defer 属性。网页的加载过程默认的对 script 标签是采用立即执行的机制，页面的渲染会等待脚本的执行完成才会继续去往下渲染。添加 type = "module" 属性相当于让脚本启用延迟执行的机制，延迟执行会等待网页的渲染完成过后再去执行脚本这个时候就不会阻碍页面当中元素的显示，这一点和添加 defer 属性是一样的。所以这个小特点也是 ES Modules 当中实际上对 script 标签做了一个小小的改进。

<!-- 等同于 defer --->
<script type="module" src="demo.js">
</script>
<p>需要显示的内容</p>

总结 ES Modules 包含下面四个特性：

自动采用严格模式，忽略 ‘use strict’
每个 ESM 模块都是单独的私有作用域
ESM 是通过 CORS 去请求外部的 JS 模块的
ESM 的 script 标签会延迟执行脚本