深入理解模块化

一.为什么会出现模块化，模块化的由来
1.一个函数，只需要考虑函数内作用域
2.然后把把变量往上提，就出现变量容易污染，就出现模块化解决变量的作用域
3.给一个合理的方式管理函数的变量和作用域，可以将关联的函数和变量聚集在一块
4.用闭包自执行

5.CommonJs，同步的，常用在node服务器，因为可以直接读磁盘

6.AMD是异步，因为浏览器是需要网速支持，要是等待执行的话，必须要采用异步加载的模式，不然会出现阻塞假死

7.webpack其实就是模拟一个node服务器来搭建一个本地服务

8.babel本质是做语法转换的

9.循环引言因为引用的拷贝的值

10.common 输出一个值后，后面的值影响不好

11.amd是老外提的

12，尽量静态化，使得编译时就能确定模块的依赖关系，提前预制好出来的

13.CommonJS 模块是运行时加载，ES6 模块是编译时输出接口

ESM工作流程

1.先生成依赖关系图，并暴露字段名
2.将模块的记录存储起来
3.模块的实例包括模块的源码和模块状态，状态是指我们将变量和函数存储在内存中的，从而提高了引用的效率，其实就是搭了内存的光，吃内存模式，吃内存赋予一种本地服务化的能力，现代的前端就是利用偷取服务端的能力，服务端的能力就是存储变量的能力

三个阶段怎么执行，esm只定义标准

变量其实只先标记没有赋值，只是先产生索引

esm是异步的，因为构建，实例化和求值，他是在分别的时机完成的

commonJs，他的模块和他的依赖一次性构建，随时使用，随时销毁，不做滞留，代表一种执行动作多一些，服务端的职能是一种动态指令的结合

esm是用来描述不同的文件状态，赋予前端多态的能力

浏览器下载文件可能需要很长时间，像这样阻塞主线程会使使用模块的应用程序使用起来太慢。这也是ES模块规范为什么将算法分成多个阶段的原因

esm才用模块化规范将算法分成多个阶段，

commonjs 只有在运行是知道有没有模块

esmodule 不允许直接命令变量 是一个求值阶段

静态解析？

ESM动态import采用import()去实现动态调用，返回一个promise，即动态导入的模块可以再进行另外的动态的导入

.mjs扩展名来标识这个文件是一个ESM

设计哪些是异步等待回调

哪些是等一个东西强制完成再完成另外一个的同步

esm是一种预制菜，提前暴露好

comomjs是直接炒菜直接吃

后缀名mjs对应ESM，那么cjs就对应了CommonJS

require、__dirname 、 __filename将无法使用，因为这是node环境注入的

1.引用化模块解析成模块记录，都是有映射关系

2.实例化，存在内存上的，实例化就是把方法，就是变量与内存的链接，描述各种值在内存中记录，而且是以二进制的方式读写的

JS引擎会创建一个模块环境记录（上下文）来管理模块记录中的变量

commonJS后面的值是改变不了前面的值，导致他不是动态的，因为他的内存地址不同

求值是代码的真实值

上下级模块的export和import都指向同一个内存地址

commonjs指向是同一个值

连接就是关系，就是指向同一个内存地址，来做模块之间的关联

求值就是赋值出结果，就是是内存中有真实的值，求值只运行一次，因为他有缓存，如果有，就直接去取，

求值多次会产生多个值会有副作用

工厂模式是什么

commonjs 是运行时，有requie会直接进去，直到他可以导出

计数器模块视图访问导出对象，但是因为该对象在主模块中并未求值，所以返回的是undefined

求值是在什么时候，

动态绑定就是解决循环依赖的方法。因此相比CommonJS，ESM最终不会有这个问题

b引用a,a为什么是undefined,是因为a没有求值吗？commonJs的求值是在哪一步，是在导出那一步吗？因为没导出就引用了

esm导出的值可以在任何时候改变值

esm导入值模块不能更改，但能更改对象上的属性

UMD是一种通用模块化定义规范

commom为什么会出现循环引用的错误的问题？
其中a引用b,b又引用a,a为什么是undefined,是因为a没有求值吗？commonJs的求值是在哪一步，是在导出那一步吗？因为没导出就引用原因吗？

common运行就是求值，是一口气做掉，是一部到位的

import语句中不能有变量，因为这些变量还没有值

require 是可以有变量的，因为他的变量存在全局中是node的一种特性，但是import引用时是先在构建阶段，这个时候他的变量是没有值的

其中esm的核心三步
● 构建（Construction）：查找，下载并解析所有的文件到模块记录
● 实例化（Instantiation）：分配内存空间来存放模块所有导出的变量，但这时候内存中并没有分配变量的值。然后将对应导出与导入指向同一内存空间
● 求值（Evaluation）：运行代码，将内存中的之前未分配值的变量赋为真实的值