CommonJs、AMD、CMD、ESModule介绍

CommonJs

CommonJs规范介绍

• NodeJs默认模块化规范，每个文件是一个模块，有自己的作用域
• CommonJs规范采用同步加载方式
• 通过require加载模块，module.exports和exports输出模块

CommonJs规范特点

• 所有代码都运行在模块作用域，不会污染全局作用域
• 模块可以加载多次，第一次加载时会运行模块，模块输出结果会被缓存，再次加载时，会从缓存结果中直接读取模块输出结果
• 模块按出现顺序加载

browserify打包原理

• 通过自执行函数实现模块化
• 将每个模块编号，存入一个对象，每个模块标记依赖模块
• 实现了require方法，核心是通过call方法调用模块，并传入requrie、module、exports方法，通过module存储模块信息，通过exports存储模块输出信息

AMD（针对CommonJs同步加载方式）

AMD规范介绍

• AMD规范采用异步加载模块，允许指定回调函数
• Node模块加载速度快，所以适用于同步加载
• 浏览器环境下，模块需要请求获取，所以适用于异步加载
• requireJs是AMD的一个具体实现库

CMD

CMD规范介绍

• CMD整合了CommonJs和AMD的优点，模块加载是异步的
• CMD专门用于浏览器端，seaJS是CMD规范的一个实现
• AMD和CMD最大的问题是没有通过语法升级解决模块化

AMD和CMD目前开发过程中很少使用了，主要使用CommonJs和ESModule

ESModule（目前应用最为广泛的模块化规范）

** ESModule规范介绍**

• ESModule设计理念是希望在编译时就确定模块依赖关系及输入输出
• CommonJs和AMD必须在运行时才能确定依赖和输入输出
• ESM通过import加载模块，通过export输出模块

模块化开发，如果使用浏览器默认标准：
所有依赖的模块文件需要单独引入
所有的依赖需要加上.js后缀

CommonJs和ESModule规范对比

1. CommonJs输出的是值的拷贝，ESM输出的是值的引用
2. CJs模块是运行时加载，ESM是编译时输出接口
3. CJs是单个值导出，ESM可以导出多个
4. CJS模块是同步加载，ESM支持异步加载
5. CJS的this指向当前模块的module.exports，ESM的this指向undefined
6. 语法不同

NodeJs 14后默认支持ESM

脚本和模块的对比

• 模块具备更高的开发效率（可读性强、复用高效）
• 脚本具有更高的页面性能（模块文件多，加载速度慢）
• 模块在浏览器中运行会存在兼容性问题

浏览器模块化的局限

• 缺乏模块管理能力，模块分散在各个项目中
• 性能加载慢，无法大型项目中直接使用
• 以上两个问题是npm和webpack核心解决的问题

npm解决模块化项目之间不能复用的问题
webpack解决页面性能问题

最后

以上就是含糊煎蛋为你收集整理的CommonJs、AMD、CMD、ESModule介绍的全部内容，希望文章能够帮你解决CommonJs、AMD、CMD、ESModule介绍所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。