首页
学习
活动
专区
圈层
工具
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

彻底弄懂CommonJS和AMD/CMD!

CommonJS和AMD/CMD的概述

在构建和部署Web应用程序时,处理JavaScript模块是非常重要的一环。CommonJS和AMD/CMD是用于管理JavaScript模块和依赖关系的两种常用方法。

  1. CommonJS:
代码语言:txt
复制
CommonJS是一种同步加载模块的JavaScript应用结构,其核心概念包括**模块**(module)和**依赖**(dependency)。模块是独立的代码片段,可以导出和导入其他模块提供的功能。依赖是指一个模块需要另一个模块作为其代码的一部分。
代码语言:txt
复制
特点:
代码语言:txt
复制
* 同步加载,执行顺序由代码在文件中的书写顺序决定。
* 模块作为全局变量存在于内存中,模块实例作为单独的变量存在。
* 阻塞加载,模块的导入只有在需要它时才执行。
* 模块缓存,除非通过`require.cache`重新加载。
代码语言:txt
复制
示例代码:
代码语言:txt
复制
```javascript
代码语言:txt
复制
// 使用CommonJS导入模块'calculator'并获取其calculate函数
代码语言:txt
复制
var calculator = require('calculator');
代码语言:txt
复制
var result = calculator.calculate(5); // 从模块中调用calculate函数
代码语言:txt
复制
```
  1. AMD/CMD:
代码语言:txt
复制
AMD(Asynchronous Module Definition,异步模块定义)/CMD(Common Module Definition,通用模块定义)是异步加载模块的另一种方式。AMD/CMD基于`require.js`,遵循以下语法:
代码语言:txt
复制
特点:
代码语言:txt
复制
* 异步加载,执行顺序独立于代码书写顺序。
* 可以在代码中一次性导入所有依赖,而无需等到需要时使用`require()`。
* 模块缓存,除非通过`define()`或`require()`重新加载。
代码语言:txt
复制
示例代码(使用AMD/CMD方式导入模块):
代码语言:txt
复制
```javascript
代码语言:txt
复制
// 使用AMD/CMD导入模块'directives'
代码语言:txt
复制
define(['directives'], function(directives) );
代码语言:txt
复制
```

总结

CommonJS和AMD/CMD是两种处理JavaScript模块和依赖的常用方法。对于需要同步模块加载、阻塞加载且希望缓存导入的应用程序,CommonJS是更佳选择。而对于在需要异步加载模块并希望避免全局变量以及实现简洁API的同时能够按需加载函数和模块的应用场景,AMD/CMD是更优选择。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

彻底理清 AMD,CommonJS,CMD,UMD,ES6 modules

本文你将学到: 1.Rollup 是什么2.CommonJS、AMD、CMD、UMD、ES6 分别的介绍3.ES6 模块与 CommonJS 模块的区别4.模块演进的产物 —— Tree Shaking5...查阅资料后发现 Rollup 并不支持 CommonJS 和 AMD 的打包方式,想要成功引入 commonJS 的模块,必须要加载插件 https://github.com/rollup/plugins...它与AMD很类似,不同点在于:AMD 推崇依赖前置、提前执行,CMD推崇依赖就近、延迟执行。 不懂 依赖就近、延迟执行 的可以比较下面和上面的例子。...总结: 对比和 AMD 的写法就可以看出 AMD 和 CMD 的区别。...虽然现在 CMD 已经凉了。但是 CMD 更加接近于 CommonJS 的写法,但是 AMD 更加接近于浏览器的异步的执行方式。

2.4K22

模块化-CommonJs、AMD、CMD

在了解AMD,CMD规范前,还是需要先来简单地了解下什么是模块化,模块化开发?模块化是指在解决某一个复杂问题或者一系列的杂糅问题时,依照一种分类的思维把问题进行系统性的分解以之处理。...CMD (Common Module Definition) CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。CMD规范和 AMD 很相似,解决同样问题,只是运行机制不同。...CommonJS 和 AMD 模块,都只能在运行时确定这些东西。 export命令用于规定模块的对外接口,import命令用于输入其他模块提供的功能。...总结 CommonJS 模块输出的是一个值的拷贝,CommonJS 模块是运行时加载,CommonJS规范主要用于服务端编程,加载模块是同步的,同步意味着阻塞加载,浏览器资源是异步加载的,因此有了AMD...AMD 的 API 默认是一个当多个用,对于依赖的模块,AMD 推崇提前执行(依赖前置) CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。

41230
  • CommonJS,AMD,CMD和ES6的对比

    AMD 浏览器端的模块,不能采用后端使用的CommonJS的”同步加载”(synchronous),只能采用”异步加载”(asynchronous),这就是AMD规范诞生的背景。.../App.vue' export default { props: ['num'] } 使用注意点 AMD和CMD区别 规范 AMD 规范在这里:https://github.com/amdjs/...CMD 是 SeaJS 在推广过程中对模块定义的规范化产s出。 类似的还有 CommonJS Modules/2.0 规范,是 BravoJS 在推广过程中对模块定义的规范化产出。...Sea.js 更贴近 CommonJS Modules/1.1 和 Node Modules 规范。 CMD 推崇依赖就近,AMD 推崇依赖前置。...CMD 推崇 as lazy as possible. API差异。 AMD 的 API 默认是一个当多个用,CMD 的 API 严格区分,推崇职责单一。

    1.2K10

    模块化之AMD、CMD、UMD、commonJS

    、AMD、CMD、UMD CommonJS: 这应该是最早的JavaScript模块化编程,主要是用于服务端,nodeJS就是使用commonJS,我们最常用的webpack也是使用commonJS。...CMD(Cmomon Module Definition): CMD是大神玉伯提出的,然后根据这个规范写了个seaJS。因为AMD想兼容浏览器和后台,所以大神就搞了个专注于浏览器的CMD。...UMD(Universal Module Definition): 通用模块定义,兼容AMD和commonJS的规范,也就是AMD和commonJS的一个糅合。...最后总结一下: CommonJS:同步加载,适用于服务器,node、webpack使用; AMD:异步加载,浏览器使用,实现的requireJS想兼容服务器和浏览器,预加载。...CMD:异步加载,专注于浏览器,实现的是seaJS,玉伯大神提出的,使用时加载。 UMD:AMD和commonJS的结合,可以服务端使用也可以浏览器使用。

    70840

    前端模块化:CommonJS,AMD,CMD,ES6

    前端模块化:CommonJS,AMD,CMD,ES6 模块化的开发方式可以提高代码复用率,方便进行代码的管理。通常一个文件就是一个模块,有自己的作用域,只向外暴露特定的变量和函数。...目前流行的js模块化规范有CommonJS、AMD、CMD以及ES6的模块系统。参见阮一峰老师的文章 module-loader 。...二、AMD和require.js AMD规范采用异步方式加载模块,模块的加载不影响它后面语句的运行。所有依赖这个模块的语句,都定义在一个回调函数中,等到加载完成之后,这个回调函数才会运行。...是另一种js模块化方案,它与AMD很类似,不同点在于:AMD 推崇依赖前置、提前执行,CMD推崇依赖就近、延迟执行。...五、 ES6 模块与 CommonJS 模块的差异 1. CommonJS 模块输出的是一个值的拷贝,ES6 模块输出的是值的引用。

    52220

    前端模块化:CommonJS,AMD,CMD,ES6

    通常一个文件就是一个模块,有自己的作用域,只向外暴露特定的变量和函数。目前流行的js模块化规范有CommonJS、AMD、CMD以及ES6的模块系统。...一、CommonJS Node.js是commonJS规范的主要实践者,它有四个重要的环境变量为模块化的实现提供支持:module、exports、require、global。...二、AMD和require.js AMD规范采用异步方式加载模块,模块的加载不影响它后面语句的运行。所有依赖这个模块的语句,都定义在一个回调函数中,等到加载完成之后,这个回调函数才会运行。...是另一种js模块化方案,它与AMD很类似,不同点在于:AMD 推崇依赖前置、提前执行,CMD推崇依赖就近、延迟执行。...五、 ES6 模块与 CommonJS 模块的差异 1. CommonJS 模块输出的是一个值的拷贝,ES6 模块输出的是值的引用。

    1.3K40

    js模块化编程之彻底弄懂CommonJS和AMDCMD!(转)

    JS中的模块规范(CommonJS,AMD,CMD),如果你听过js模块化这个东西,那么你就应该听过或CommonJS或AMD甚至是CMD这些规范咯,我也听过,但之前也真的是听听而已。 ...二、AMD 基于commonJS规范的nodeJS出来以后,服务端的模块概念已经形成,很自然地,大家就想要客户端模块。而且最好两者能够兼容,一个模块不用修改,在服务器和浏览器都可以运行。...这有AMD的WIKI中文版,讲了很多蛮详细的东西,用到的时候可以查看:AMD的WIKI中文版 三、CMD 大名远扬的玉伯写了seajs,就是遵循他提出的CMD规范,与AMD蛮相近的,不过用起来感觉更加方便些...前面说AMD,说RequireJS实现了AMD,CMD看起来与AMD好像呀,那RequireJS与SeaJS像不像呢?...虽然CMD与AMD蛮像的,但区别还是挺明显的,官方非官方都有阐述和理解,我觉得吧,说的都挺好: 官方阐述SeaJS与RequireJS异同 SeaJS与RequireJS的最大异同(这个说的也挺好)

    1.7K30

    nodejs学习一CommonJS和AMD

    CommonJS CommonJS本质上就是一个规范,它并不提供默认实现,而是要求一些JavaScript库、框架、环境……去实现它的这些API定义。 那么,都有哪些API层面的定义呢?...var math = require('math'); //然后,就可以调用模块提供的方法: var math = require('math'); math.add(2,3); // 5 AMD CommonJS...这就是AMD规范诞生的背景。 AMD是”Asynchronous Module Definition”的缩写,意思就是”异步模块定义”。它采用异步方式加载模块,模块的加载不影响它后面语句的运行。...AMD也采用require()语句加载模块,但是不同于CommonJS,它要求两个参数:   require([module], callback); 第一个参数[module],是一个数组,里面的成员就是要加载的模块...所以很显然,AMD比较适合浏览器环境。 目前,主要有两个Javascript库实现了AMD规范:require.js和curl.js。 参考文档: 1.wiki-CommonJS

    69720

    JavaScript中的三种模块化规范AMD CMD CommonJS

    CMD规范和AMD相似,尽量保持简单,并且与CommonJS和NodeJS的Modules规范保持了很大的兼容性。...CommonJS是在浏览器环境之外构建JavaScript生态系统为目标产生的项目,比如服务器和桌面环境中。...服务器端模块化规范 -- CommonJS 老实说,在浏览器环境下,没有模块也不是特别大的问题,毕竟网页程序的复杂性有限;但是在服务器端,一定要有模块,与操作系统和其他应用程序互动,否则根本没法编程。...在CommonJS中,有一个全局性方法require(),用于加载模块 浏览器端 -- AMD(requirejs) CMD(Seajs) 因为服务器与APP都是加载的本地的资源,所以,不用回调这种操作...因为上面这个原因,浏览器端,只能选择 AMD - CMD 两种规范,异步执行,不阻塞线程。 了解SeaJS,以及Seajs与requirejs之间的区别?

    38900

    彻底弄懂Python中单星号和双星号的使用

    公众号:尤而小屋编辑:Peter作者:Peter大家好,我是Peter~在Python中有两个重要的符号:*和**,本文通过实际案例来详细讲解它们的用法。...1,2,3,4,5]x,y,*z = lst # 使用一个星号print("x:",x)print("y:",y)print("z:",z)x: 1y: 2z: [3, 4, 5]从结果中我们看到,x和y...print(y)print(z)py['t', 'h', 'o', 'n']星号除了在末尾,还可以在其他任意位置:x,*y,z = (1,2,3,4,5) print(x)print(y) # x和z...各占一个元素,其他全部给yprint(z)1[2, 3, 4]5*x,y,z = (1,2,3,4,5) print(x) # y和z各占一个元素,其他全部给xprint(y)print(z)[1,...1, 2, 3, 4, 5[0,*numbers1,4] # 列表和其他元素合并0, 1, 2, 3, 4上面合并生成的是列表形式,也可以是元组的形式:(*numbers1, *numbers2)

    29710

    Go语言学习——彻底弄懂return和defer的微妙关系

    所以想弄清楚这个return和defer到底是什么关系,它们谁先谁后,对于最后返回值又有什么影响呢?...真正返回之前还要执行defer函数部分,两个defer函数分别针对i进行自增操作,i的值依次为1001和1002 f2函数:   进入该函数,因为已经定义好了返回值变量即为i,然后直接赋值i=1000,...同样的,也要在真正返回i前,执行两个defer函数,同样i依次自增得到1001和1002。   ...~r0+48(SP),这就是和f1不一样的地方。对应前面结论,我们在这里找到了验证。...(因为没有研究过汇编,有些细节可能有待考证) 结论 到此,我们算是搞明白了Go语言里面return和defer之间的微妙关系,从汇编层面看清了在无名返回值和有名返回值return返回的差异。

    1.5K20

    JavaScript中的各种模块化规范

    前端发展到今天,已经有不少模块化的方案,比如AMD、CMD、UMD、CommonJS等,当然了,还有es6带来的模块系统,这些模块化规范的核心价值都是让 JavaScript 的模块化开发变得简单和自然...CMD和AMD的区别有以下几点: 1、对于依赖的模块AMD是提前执行,CMD是延迟执行。(require2.0貌似有变化) 2、CMD推崇依赖就近,AMD推崇依赖前置。...推荐一篇文章:SeaJS与RequireJS最大的区别 UMD: 通用模块规范 UMD是AMD和CommonJS两者的结合,AMD 浏览器第一的原则发展,异步加载模块。...拓展阅读 模块系统 前端模块化开发的价值 前端模块化开发那点历史 CMD模块定义规范 SeaJS API快速参考 从CommonJS到Sea.js RequireJS和AMD规范 CommonJS规范...Javascript模块化编程 Javascript模块化编程 知乎AMD和CMD的区别有哪些?

    86090
    领券