一篇文章图文并茂地带你学习 JavaScript 模块

JavaScript 模块

一个模块仅仅就是一个文件。模块之间可以通过一些特殊的库等来引用或导出。

为何要模块化？

由于大部分的代码是关于修改变量的，如何组织变量会影响编码的质量，以及维护他们的成本。

如果只有少数变量，完全可以通过函数作用域解决。但是这也让我们很难在各个函数之间共享变量。

例如在曾经的 jQuery 时代，在加载任何 jQuery 插件之前，我们必须先保证引入了 jQuery，这个时候所有的

而不适用于非模块的内嵌 script

一旦所需资源加载完毕，代码就会立刻运行。

<script async type="module">
	import {
       counter } from './count.js' // 这个加载完毕，马上运行代码
    counter.count();
script>

异步模块和 html 与其他 script 是独立的。

8. 外部模块脚本只会执行一次

<script type="module" src="./index.js">script>
<script type="module" src="./index.js">script>

9. 只能用相对路径或者绝对路径

import {
      count } from 'count.js'; 		// no
import {
      count } from './count.js'; 	// yes

总结:

1. 非异步模块会被延迟执行
2. 异步标签可以用在除了非模块的行内

参考文献

1. https://javascript.info/modules-intro
2. https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/