前端模块化

什么是模块化

1. 事实上模块化开发最终目的是将程序划分成一个个小的结构
2. 在这个结构中编写属于自己的逻辑代码，有自己的作用域，不会影响到其他的结构
3. 这个结构可以将自己希望暴露的变量、函数、对象等导出给其他结构使用。
4. 可以通过某种方式，导入另外结构中的变量、函数、对象等；

组件化和模块化的特点

1. 低耦合
2. 热插拔，需要的时候使用，不需要的时候去掉

模块化特点

1. 独立性
   可以针对一个模块单独进行设计、研发，相对工作量和难度变小。
2. 复用性
   一些通用模块(例如登录或注册)可以被重复使用，而不用每次重新开发。
3. 解偶性
   模块与模块之间，将相互影响降到最低，使得更换、升级或添加某个模块，不影响其他模块的工作。
4. 灵活性
   通过选择和组合不同的模块，可以快速构建一个 新的产品。

目前流行的模块化规范

AMD

1. AMD主要是应用于浏览器的一种代码规范。
2. 它采用的是异步加载模块。
3. 事实上AMD的规范还要早于CommonJS，但是CommonJS目前依然在被使用，而AMD使用的较少了;
4. AMD实现的比较常用的库是require.js和curl.js

CMD

1. CMD规范也是应用于浏览器的一种模块化规范:
2. 它也采用了异步加载模块，但是目前CMD使用也非常少了;
3. CMD也有自己比较优秀的实现方案: SeaJS

CommonJS

介绍
CommonJS是一个规范，最初提出来是在浏览器以外的地方使用

1. Node是CommonJS在服务器端一个具有代表性的实现，Node中对CommonJS进行了支持和实现，Node中每一个js文件都是一个单独的模块。
2. Browserify是CommonJS在浏览器中的一种实现。
3. webpack打包工具具备对CommonJS的支持和转换。

使用

1. exports和module.exports负责对模块中的内容进行导出
2. require函数可以帮助我们导入其他模块中的内容

require 加载标识符原则

exports和module.exports

1. CommonJS是没有module.exports的概念的
2. 但是为了实现模块导出，Node中使用的是Module类，每一个模块都是Module类的一个实例，也就是module
3. 在Node中真正用于导出的根本不是exports，而是module.exports；
4. exports是module.exports对象地址的一个引用

模块的加载过程

1. 模块在被第一次引用时，模块中的js代码会被运行一次
2. 模块被多次引用时，会缓存，最终只加载一次，因为每个模块对象module都有一个属性：loaded，为false表示还没有加载，为true表示已经加载
3. 如果有循环引用，Node采用的是深度优先算法。

缺点

1. CommonJS加载模块是同步的
   同步意味着只有等到对应的模块加载完毕，当前模块中的内容才能被运行。
   这个在服务器不会有什么问题，因为服务器加载的js文件都是本地文件，加载速度非常快
2. 如果他应用于浏览器
   浏览器加载js文件需要先从服务器下载下来，之后再加载运行
   那么采用同步就意味着后续的js代码都无法正常运行，即使是一些简单的DOM操作
3. 所以在浏览器中，通常不使用CommonJS规范
   当然我们可以用webpack将其转化为浏览器可以直接执行的代码。

ES Module

从 ES6 开始， JavaScript 才真正意义上有自己的模块化规范。
ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。CommonJS 和 AMD 模块，都只能在运行时确定这些东西。

使用

export负责将模块内的内容导出;
import负责从其他模块导入内容;

1. export { }导出的成员并不是对象字面量，import { } 导入的时候并不是使用解构语法，都只是固定的语法。
2. export导出的成员并不是导出成员的值，而是成员的引用关系，所以外部拿到的值会受模块内部值的变化所影响。
3. 外部导入一个模块中的成员，导入的是一个只读的成员，并不能去修改
4. 动态导入模块返回的是promise
5. Node v12 之后的版本，可以通过package.json 中添加type字段为module， 将默认模块系统修改为 ES Module 此时就不需要修改文件扩展名为 .mjs 了

特性

1. 通过给script标签上一个type=‘module’的属性，就可以在ES Module的标准执行其中的js代码了
   

2. ES Module自动采用严格模式，忽略 'use strict’

   • 变量必须声明后再使用
   • 函数的参数不能有同名属性，否则报错
   • 不能使用with语句
   • 不能对只读属性赋值，否则报错
   • 不能使用前缀 0 表示八进制数，否则报错
   • 不能删除不可删除的属性，否则报错
   • 不能删除变量delete prop，会报错，只能删除属性delete global[prop]
   • eval不会在它的外层作用域引入变量
   • eval和arguments不能被重新赋值
   • arguments不会自动反映函数参数的变化
   • 不能使用arguments.callee
   • 不能使用arguments.caller
   • 禁止this指向全局对象
   • 不能使用fn.caller和fn.arguments获取函数调用的堆栈
   • 增加了保留字（比如protected、static和interface）

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

4. ES Module是通过 CORS 的方式请求外部JS模块的
   请求的服务端需要支持CORS，否则会报一个跨域的错误，而且在Nerwork中可以看到这样一个请求被浏览器终止了

5. ES Module会延迟执行脚本，类似于defer的效果

ES Module的解析流程

1. 阶段一:构建(Construction)，根据地址查找js文件，并且下载，将其解析成模块记录(Module Record);
2. 阶段二:实例化(Instantiation)，对模块记录进行实例化，并且分配内存空间，解析模块的导入和导出语句，把模块指向 对应的内存地址。
3. 阶段三:运行(Evaluation)，运行代码，计算值，并且将值填充到内存地址中
   

ES Modules 和 CommonJS的一些区别

1. 使用语法层面，CommonJs是通过module.exports，exports导出，require导入；ESModule则是export导出，import导入
2. CommonJs是运行时加载模块，ESModule是在静态编译期间就确定模块的依赖
3. ESModule在编译期间会将所有import提升到顶部，CommonJs不会提升require
4. CommonJs导出的是一个值拷贝，会对加载结果进行缓存，一旦内部再修改这个值，则不会同步到外部。ESModule是导出的一个引用，内部修改可以同步到外部
5. CommonJs中顶层的this指向这个模块本身，而ESModule中顶层this指向undefined
6. CommonJS加载的是整个模块，将所有的接口全部加载进来，ESModule可以单独加载其中的某个接口

参考文档

https://blog.csdn.net/Lyb__/article/details/109382975?ops_request_misc=&request_id=&biz_id=102&utm_term=web%E5%89%8D%E6%AE%B5%E6%A8%A1%E5%9D%97%E5%8C%96&utm_medium=distribute.pc_search_result.none-task-blog-2_allsobaiduweb~default-1-109382975.142^v73control_1,201^v4add_ask,239^v2insert_chatgpt&spm=1018.2226.3001.4187

https://blog.csdn.net/qq_39221436/article/details/119531017?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522167836248416800184119552%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=167836248416800184119552&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2_allfirst_rank_ecpm_v1~rank_v31_ecpm-3-119531017-null-null.142^v73control_1,201^v4add_ask,239^v2insert_chatgpt&utm_term=ESMoudle&spm=1018.2226.3001.4187

https://juejin.cn/post/7193887403570888765

https://juejin.cn/post/7053823393539293191
https://blog.csdn.net/weixin_45047039/article/details/109985949