值
commonJS
1. 基本类型：值复制，不共享
2. 引用类型：浅拷贝，共享
3. 工作空间可以修改引入的值
ES Module
1. 只读导入，动态读取
2. 不可在外部修改引用，但可以调用引用中包含的的方法

执行顺序
commonJS
1. 检查是否有该模块的缓存
2. 如果有，则使用缓存
3. 如果没有，则执行该模块代码，并缓存
ES Module
1. 检查该模块是否引入过？
2. 是，暂时认该模块为 {}
3. 否，进入该模块并执行其代码（不做缓存）
⚠️import 会被提升到最先执行

1. 对导入值的验证

commonJS

  1. // mod.js
  2. let count = 1;
  3. let friends = ['夏洛'];
  5. function plusCount() {
  6.     count++
  7. };
  9. function plusYuanhua() {
  10.     friends.push('袁华');
  11. }
  13. setInterval(() => {
  14.     console.log('mod.js 每秒打印 - count', count);
  15.     console.log('mod.js 每秒打印 - friends', friends);
  16. }, 1000);
  18. module.exports = {
  19.     count,
  20.     friends,
  21.     plusCount,
  22.     plusYuanhua,
  23. }
  26. // index.js
  27. const mod = require('./mod.js');
  29. console.log('index.js 初次导入 - mod.count', mod.count);
  30. console.log('index.js 初次导入 - mod.friends', mod.friends);
  32. mod.plusCount();
  33. mod.plusYuanhua();
  35. console.log('index.js 执行 mod.plusCount/plusYuanhua 后 - mod.count', mod.count);
  36. console.log('index.js 执行 mod.plusCount/plusYuanhua 后 - mod.friends', mod.friends);
  38. setTimeout(() => {
  39.     mod.count = 3;
  40.     console.log('index.js 延时2s - mod.count', mod.count);
  41.     console.log('index.js 延时2s - mod.friends', mod.friends);
  42. }, 2000)
  44. /*
  45. index.js 初次导入 - mod.count 1
  46. index.js 初次导入 - mod.friends [ '夏洛' ]
  48. index.js 执行 mod.plusCount/plusYuanhua 后 - mod.count 1
  49. index.js 执行 mod.plusCount/plusYuanhua 后 - mod.friends [ '夏洛', '袁华' ]
  51. mod.js 每秒打印 - count 2
  52. mod.js 每秒打印 - friends [ '夏洛', '袁华' ]
  54. mod.js 每秒打印 - count 2
  55. mod.js 每秒打印 - friends [ '夏洛', '袁华' ]
  57. index.js 延时2s - mod.count 3
  58. index.js 延时2s - mod.friends [ '夏洛', '袁华' ]
  60. mod.js 每秒打印 - count 2
  61. mod.js 每秒打印 - friends [ '夏洛', '袁华' ]
  62. */

ES Module

Node 13.2 增加了对 ES Module 的支持，为使 node 识别 ES Module，你需要做如下之一

  1. 更改 .js 为 .mjs，并使用 node index.mjs
  2. package.json添加字段"type": "module"，如此所有 .js 均被识别为 ES Module
  1. // index.mjs
  2. import { counter } from './mod.mjs'
  3. counter = {}; // TypeError: Assignment to constant variable.
  4. console.log('a.js-1', counter)
  6. // mod.mjs
  7. export let counter = {
  8.     count: 1
  9. }
  10. setInterval(() => {
  11.     console.log('modB.js-1', counter.count)
  12. }, 1000)

可见 import 为只读引入，如此，mod.mjs 中 count 变化会及时的反应在 index.mjs 中

2. 模块导入，它们做了什么？

commonJS

  1. // index.js
  2. let a = require('./modA.js')
  3. let b = require('./modB.js')
  4. console.log('index.js-1', '执行完毕', a.done, b.done)
  6. // modA.js
  7. exports.done = false
  8. let b = require('./modB.js')
  9. console.log('modA.js-1', b.done)
  10. exports.done = true
  11. console.log('modB.js-2', '执行完毕')
  13. // modB.js
  14. exports.done = false
  15. let a = require('./modA.js')
  16. console.log('modB.js-1', a.done)
  17. exports.done = true
  18. console.log('modB.js-2', '执行完毕')
  20. /*
  21. modB.js-1 false
  22. modB.js-2 执行完毕
  23. modA.js-1 true
  24. modB.js-2 执行完毕
  25. index.js-1 执行完毕 true true
  26. */

执行顺序是这样的：

  1. node 执行 index.js 文件，发现 require('./modA.js')，暂停 index.js 代码执行，进入 modA 模块
  2. 在 modA 中发现 require('./modB.js')，暂停 modA 代码执行，将已执行的部分 modA 代码缓存，随后进入 modB 模块
  3. 在 modB 中发现require('./modA.js')，提取已缓存的部分 modA (因为 modA 代码全部执行完)，执行所有的 modB 代码，完毕后，缓存 modB 执行结果，执行栈返回至 modA
  4. 执行 modA 剩余代码，完毕后，缓存 modA，执行栈返回 index.js
  5. 在 index.js 发现 require('./modBjs')，提取已有的 modB 缓存，执行剩余代码

ES Module

  1. // index.mjs
  2. console.log("before import mod")
  3. import { b } from "./mod.mjs"
  4. console.log("b is " + b)
  5. export let a = b + 1;
  7. // mod.mjs
  8. console.log("before import index")
  9. import { b } from "./index.mjs"
  10. console.log("b is " + b)
  11. export let a = b + 1;
  13. /*
  14. before import a
  15. a is undefined
  16. before import b
  17. b is NAN
  18. */

这里的顺序也很简单，

  1. 进入 index.mjs ，提升 import(‘./modB.mjs’) 语句至顶部，最先执行，进入 modB
  2. 提升 提升 import(‘./index.mjs’) 语句至顶部，发现已经执行过 index.mjs，此处将从 index 导入的内容当作 { }，执行剩余代码。完毕后，执行栈返回 index.mjs
  3. 执行剩余代码

3.AMD

历史上，js一直没有模块(module)体系，无法将一个项目拆分成多个模块文件。针对这一情况，社区出现了一些统一的规范：CommonJs和AMD，前者是针对服务端的js，也就是nodejs，后者是针对浏览器的

  1. 两者的模块导入导出语法不同：commonjs是module.exports，exports导出，require导入；ES6则是export导出，import导入。
  2. commonjs是运行时加载模块，ES6是在静态编译期间就确定模块的依赖。
  3. ES6在编译期间会将所有import提升到顶部，commonjs不会提升require。
  4. commonjs导出的是一个值拷贝，会对加载结果进行缓存，一旦内部再修改这个值，则不会同步到外部。ES6是导出的一个引用，内部修改可以同步到外部。
  5. 两者的循环导入的实现原理不同，commonjs是当模块遇到循环加载时，返回的是当前已经执行的部分的值，而不是代码全部执行后的值，两者可能会有差异。所以，输入变量的时候，必须非常小心。ES6 模块是动态引用，如果使用import从一个模块加载变量（即import foo from 'foo'），那些变量不会被缓存，而是成为一个指向被加载模块的引用，需要开发者自己保证，真正取值的时候能够取到值。
  6. commonjs中顶层的this指向这个模块本身，而ES6中顶层this指向undefined。