了解AMD、CMD、CommonJs

本文详细介绍了JS模块化开发标准AMD、CMD及CommonJs的区别与联系,并对比了它们各自的优缺点,适合希望深入了解JS模块化开发的技术人员阅读。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

知识点1:AMD/CMD/CommonJs是JS模块化开发的标准,目前对应的实现是RequireJs/SeaJs/nodeJs.

AMD:全称(Asynchronous Module Definition),异步模块加载

CMD:全称(Common Module Definition) 通用模块加载

1.模块依赖策略
提前执行,假设依赖列表里面存在依赖['a', 'b'],谁先加载完毕,谁先实例化,实例化的顺序因为异步的关系所以是乱序,当然,执行的时候,还是会保证顺序的关系。

延迟执行,a和b存在依赖列表内,a和b不会马上进行实例化,会等到a和b同时加载完毕才会实例化。

2.代码风格
依赖前置
define(['dep1','dep2'],function(dep1,dep2){ //内部只能使用制定的模块 
    return function(){};
});
提前告诉加载器模块依赖的情况。


就近依赖
//CMD
define(function(require,exports,module){ //此处如果需要某XX模块,可以引入 
    var xx=require('XX');
});
通过正则分析require,来收集依赖情况


知识点2:CommonJs主要针对服务端,AMD/CMD主要针对浏览器端,所以最容易混淆的是AMD/CMD。(顺便提一下,针对服务器端和针对浏览器端有什么本质的区别呢?服务器端一般采用同步加载文件,也就是说需要某个模块,服务器端便停下来,等待它加载再执行。这里如果有其他后端语言,如java。而浏览器端要保证效率,需要采用异步加载,这就需要一个预处理,提前将所需要的模块文件并行加载好。)


知识点3 : AMD/CMD区别,虽然都是并行加载js文件,但还是有所区别,AMD是预加载,在并行加载js文件同时,还会解析执行该模块(因为还需要执行,所以在加载某个模块前,这个模块的依赖模块需要先加载完成);而CMD是懒加载,虽然会一开始就并行加载js文件,但是不会执行,而是在需要的时候才执行。


知识点4:AMD/CMD的优缺点.一个的优点就是另一个的缺点, 可以对照浏览。
                AMD优点:加载快速,尤其遇到多个大文件,因为并行异步解析,所以同一时间可以解析多个文件。
                AMD缺点:并行加载,异步处理,加载顺序不一定,可能会造成一些困扰,甚至为程序埋下大坑。


                CMD优点:因为只有在使用的时候才会解析执行js文件,因此,每个JS文件的执行顺序在代码中是有体现的,是可控的。

                CMD缺点:执行等待时间会叠加。因为每个文件执行时是同步执行(串行执行),因此时间是所有文件解析执行时间之和,尤其在文件较多较大时,这种缺点尤为明显。


知识点5:如何使用CommonJs的话,因为nodeJs就是它的实现,所以使用node就行,也不用引入其他包。AMD则是通过<script>标签引入RequireJs,具体语法还是去看官方文档或者百度一下吧。CMD则是引入SeaJs。



模块化是一种将程序中的代码按照一定的规则拆分成独立的模块,使得代码的维护和复用更加方便的技术。在 JavaScript 中,有三种常见的模块化规范:CommonJSAMD(Asynchronous Module Definition)和CMD(Common Module Definition)。 CommonJS 是 Node.js 默认的模块化规范,它主要用于服务器端的 JavaScript 开发。它定义了一个 require 函数来加载模块,一个 exports 对象来导出接口,并支持模块的循环依赖。CommonJS 规范的代码示例: ```javascript // 导出模块 exports.add = function (num1, num2) { return num1 + num2; } // 加载模块 var math = require('math'); console.log(math.add(2, 3)); ``` AMD 是一种异步加载模块的规范,主要用于浏览器端的 JavaScript 开发。它需要使用一个专门的模块加载器来异步加载模块,比如 requirejs。 ```javascript // 定义模块 define(['jquery'], function ($) { function add(num1, num2) { return num1 + num2; } return { add: add } }); // 加载模块 require(['math'], function (math) { console.log(math.add(2, 3)); }); ``` CMD 是另一种异步加载模块的规范,与 AMD 类似,也需要使用一个专门的模块加载器来异步加载模块,比如 sea.js。 ```javascript // 定义模块 define(function (require, exports, module) { var $ = require('jquery'); function add(num1, num2) { return num1 + num2; } exports.add = add; }); // 加载模块 seajs.use('math', function (math) { console.log(math.add(2, 3)); }); ``` 总的来说,CommonJS 主要用于服务器端的 JavaScript 开发,AMDCMD 主要用于浏览器端的 JavaScript 开发,它们都帮助我们更好地组织和复用代码。同时,由于 ECMAScript 6 以后原生支持模块化,使用 import 和 export 关键字即可实现模块化编程,更加简洁方便。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

KunQian_smile

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值