CommonJs、AMD、CMD、ESModule介绍

已于 2022-03-06 18:02:08 修改
阅读量720 收藏 1
点赞数
分类专栏： 工程化 文章标签： 前端 javascript
于 2022-03-06 17:37:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_25436827/article/details/123312186
版权

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解决页面性能问题

前端模块化：AMD, CMD, CommonJS, ES6 Module
若水弹丸之地
08-27 621
模块化就是将一个大的功能拆分为多个块，每一个块都是独立的，你不需要去担心污染全局变量，命名冲突什么的，它们只是向外暴露特定的变量和函数。 模块化的好处：①解决命名冲突 ②依赖管理 ③代码更加可读 ④提高复用性 目前流行的js模块化规范有AMD、CMD、CommonJS以及ES6的模块系统。 本文重点掌握AMD与CMD的区别、CommonJS与ES6 Module的区别 一、AMD A...
模块化开发 -ES Module&&CMD&&AMD
qt的博客
12-22 668
概述 主流的前端开发范式之一 主流的代码组织方式，划分模块，单独维护，降低成本 模块化规范 模块化标准 + 模块化加载器 CommonJS规范 node提出的一种约定 一个文件是一个模块 每个模块都有单独的作用域 通过module.exports导出成员 通过require函数载入模块 CommonJS是以同步模式加载模块，浏览器端支持不好 AMD(Asynchronous Module Definition) 异步的模块定义规范 Require.js 实现了AMD规范，是一种模块加载
CommonJS、AMD、CMD、ES Module
weixin_42910765的博客
01-10 1156
依赖前置和依赖就近 RequireJS采用依赖前置，举个例子就是炒菜前一次性把所有食材洗好，切好，根据内部逻辑把有些酱料拌好，最后开始炒菜，前面任何一个步骤出现问题都能较早发现错误；SeaJS的依赖就近就是要炒青椒了去切青椒要炒肉了去切肉 cmd：例如seajs amd：例如requirejs commonjs模块规范 node采用的就是该规范 导入 -，导出：require module.export es6模块规范 esModule es6原生支持的规范（目前需要使用babel来兼容） 导入 - i.
JavaScript模块化开发：CommonJS、AMD到ES模块
m0_62364592的博客
04-17 873
JavaScript模块化发展历程从早期的模块模式、CommonJS、AMD到现代ES模块，反映了Web开发复杂性不断提高的需求。如今，ES模块已成为JavaScript生态系统的标准部分，被现代浏览器和Node.js原生支持。代码组织：将功能分解为独立、可管理的块封装：隐藏实现细节，只暴露必要的接口依赖管理：明确模块间的依赖关系可重用性：模块可在不同项目中重复使用可维护性：独立模块易于测试和维护按需加载：支持懒加载和代码分割。
说说你对模块化的理解(CommonJS、AMD、CMD、ES Module)
weixin_45313351的博客
10-21 989
记录js模块化规范理解
JS模块化——AMD、CommonJS和ESModules
cherry__yu的博客
04-07 1921
在模块化概念出现之前，JS 的脚本通常是通过 script 标签直接嵌入 HTML 中的，但是不同 js 文件里申明的变量都会存在于全局作用域中。不同的开发者维护不同的 js 文件，很难保证不和其它 js 文件冲突。全局变量污染开始成为开发者的噩梦。AMD是"Asynchronous Module Definition"，意思就是"异步模块定义"。它采用异步方式加载模块，模块的加载不影响它后面语句的运行。所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。
前端Javascript模块化 CommonJS与ES Module区别
最新发布
警警的博客
04-21 1064
ES Module 的静态结构支持编译时删除未使用代码（如 Webpack 的 Tree Shaking），而 CommonJS 因动态加载无法实现此优化。ES Module的普及促使npm生态向ESM迁移，工具链（如Webpack、Rollup、Vite）全面支持ESM，形成从开发到构建的完整解决方案。从“脚本堆砌”到“工程化设计”，模块化推动了组件化开发、Monorepo架构和微前端实践，例如通过Webpack和Vite实现模块联邦与即时编译。模块化通过独立作用域隔离变量，避免全局命名冲突。
[JS高级]ESModule和commonJS的原理和执行过程
qq_42425551的博客
06-23 1286
ESModule和commonJS的原理和执行过程
前端模块化（iife CommonJs AMD UMD CMD） 如有错漏请诸位多多指正 十分感谢
weixin_42181341的博客
07-07 412
之前学习笔记 整理上传分享出来 希望大家能多多指正其中错漏
AMD、CMD、CommonJS、UMD和ES Module的写法
weixin_43758377的博客
09-13 787
相信大家经常看到AMD、CMD、CommonJS、UMD和ES Module这几个js模块化名词，但是对这些名词都是一知半解，今天就跟大家梳理一下这些名词和对应的技术细节。之所以出现这些js模块化规范是因为早期的js语言是没有模块化体系的，开发者为了方便代码组织，逐渐形成AMD和CMD规范，后来出现了主要在nodejs中使用的CommonJS规范，这么多的规范出来后，为了代码复用，又提出了UMD规范来统一兼容AMD、CMD、CommonJS，随着js语言的发展，规范的制定者也意识到模块化的重要性，于是增加了
common js、AMD、ES Module规范
SuperJane_123的博客
04-19 3309
有看过我前面文章的同学应该已经有了解前端模块化的发展过程，以及在这个过程当中出现过的一些标准，那尽管这些方式和标准也都实现了模块化，但是这些都多多少少存在着一些让开发者难以接受的问题。随着技术的发展，JavaScript的标准也在逐渐完善，而我们在模块化的实现方式相对以往已经有了很多的变化，现如今的前端模块化已经算是非常成熟了，而且目前大家针对于前端模块化的最佳实现方式也都基本统一了。 在node.js环境中回去遵循common.js的规范去组织模块，而浏览器环境中则采取ES Modules的规范，当然也
再次梳理AMD、CMD、CommonJS、ES6 Module的区别
雾空
10-30 1143
回想起上一次面试，第一轮面试官问我CMD和AMD的区别，我只回答说CMD是按需加载，AMD是提前加载，第二轮面试官又问了我CommonJs和ES6 Module的区别，emmm…，我回答说新的比旧的好~~，虽然面试官并没有说什么，不过显然这样的答案并不是有助于面试，有助于自己的积累的。 所以有必要进行一次梳理，能够更清晰的了解它们的优点及差异。 ...
Commonjs，AMD，CMD和ES6module的实现及差异
baobaisui1314的博客
03-20 267
为什么要模块化 1. 降低复杂度，降低耦合度 2. 部署方便，功能点明确 模块化的好处 1. 避免命名冲突 2. 更好的分离，按需加载 3. 提高复用性 4. 高可维护性 CommonJS 规范： 1. 每个文件都可以当做一个模块 2. 在服务器端：模块的加载是运行时同步加载的 3. 在浏览器端：模块需要提前编译打包处理 基本语法： 1. 暴...
AMD / CMD 模块化开发
m0_61382303的博客
01-10 336
AMD 先下载 require AMD开发模块包 同一文件夹下有 a.js b.js c.js index.html require.js包 a.js // 文件名 : a.js let a = 10; define('moduleA',function(){ return a }) // 语法 // define('模块名',执行函数) // 执行函数中使用对应的逻辑语法 ，最后函数中使用return 抛出变量 b.js //b .js let b = 20...
快速了解AMD、CMD、CommonJS、ES Module
weixin_30849403的博客
09-18 266
CommonJS 是一个应用于服务器端的（nodeJS）的同步模块加载规范； AMD和CMD都是浏览器端的异步模块加载规范； AMD是RequireJS输出的规范； CMD是seaJS输出的规范； ES Module是从JS语言层面出发的模块加载方式。同时支持服务器端和浏览器端。 转载于:https://www.cnblogs.com/lyraLee/p/11540695.ht...
Commonjs,AMD,CMD,es6
宋大王的博客
05-05 644
Commonjs,AMD,CMD,es6模块 学习js模块化Commonjs（服务器环境，不适应浏览器）AMD(Asynchronous Module Definition),异步模块定义（适用浏览器环境）CMD（Common Module Definition）（适用浏览器环境）es6 js模块化 开始js是没有模块化的说法，js代码就一个一个重上到下执行 模块化的优点，方便开发维护，解耦，只需...
ES module和Common JS的区别
每天都记录一点点！
06-08 3757
ES module 和 CommonJS 是两种不同的模块系统，它们有一些区别如下
深入理解前端中的模块化体系：ESM、CommonJS、AMD 对比与应用场景
一名热衷于技术的全栈开发者，专注于前端与后端的全面技术探索。在这里，我将分享我在技术领域的学习与成长，助力更多开发者的进步。
04-11 1181
技术选型场景推荐模块体系现代前端项目（React/Vue）ESM微前端架构后端 Node 项目纯 ESM（推荐）或 CommonJS（兼容旧项目）npm 组件开发UMD + ESM + CJS 打包统一模块系统 = 提升团队协作效率 + 提高打包性能 + 减少模块混乱问题。
Common、AMD,CMD,esmodule区别
04-07
CommonJS、AMD、CMD、ES Module都是用于JavaScript模块化的规范，下面是它们的区别： 1. CommonJS规范：主要用于服务器端，因为它采用同步加载模块的方式，所以适合在服务器环境中使用。在Node.js中，使用的就是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值