浅谈AMD和CMD

AMD(Asynchronous Module Definition)规范
CMD(Common Module Definition)规范

AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。
CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。

这些规范的目的都是为了 JavaScript 的模块化开发,特别是在浏览器端的。

对于依赖的模块,AMD 是提前执行,CMD 是延迟执行

依赖方式

AMD 推崇依赖前置,CMD 推崇依赖就近

例:

// AMD 默认推荐
define([‘./a’, ‘./b’], function(a, b) { // 依赖必须一开始就写好
a.doSomething()
……
……
b.doSomething()

})

// CMD 默认推荐
define(function(require, exports, module) {
var a = require(‘./a’)
a.doSomething()
……
……
var b = require(‘./b’) // 依赖可以就近书写
b.doSomething()

})

PS: AMD 也支持 CMD 的写法,同时也支持将 require 作为依赖项传递,但 RequireJS 的作者默认是推荐上面的写法,也是官方文档里默认的模块定义写法。

### AMD CMD 模块化规范的区别 AMD(Asynchronous Module Definition) CMD(Common Module Definition)是两种常用的 JavaScript 模块化规范,它们在设计理念实现方式上存在显著差异。以下是两者的主要区别: #### 1. **模块加载方式** - **AMD**:强调依赖前置,在模块定义时就需要明确列出所有的依赖项,并且这些依赖项会在模块执行之前全部加载完成[^3]。这意味着即使某些依赖项可能不会被实际使用,也会被提前加载。 - **CMD**:采用按需加载的方式,依赖可以延迟到真正需要的时候再加载。这种方式更加灵活,能够避免不必要的模块加载,从而提升性能[^4]。 #### 2. **API 设计哲学** - **AMD**:API 设计较为复杂,`require` 同时作为全局方法局部方法使用,这可能导致一定的混淆。例如,AMD 中的 `require` 可以用于同步或异步加载模块[^1]。 - **CMD**:推崇职责单一原则,每个 API 的功能明确且简单。例如,`seajs.use` 专门用于启动模块系统,而 `require` 则专注于模块加载[^1]。 #### 3. **代码组织结构** - **AMD**:模块定义通常采用 `define` 函数,依赖项以数组形式列出,回调函数接收这些依赖项作为参数。例如: ```javascript define(['moduleA', 'moduleB'], function(A, B) { // 模块逻辑 }); ``` - **CMD**:模块定义也使用 `define` 函数,但依赖项可以在需要时通过 `require` 动态加载。例如: ```javascript define(function(require, exports, module) { if (condition) { var A = require('moduleA'); } else { var B = require('moduleB'); } }); ``` #### 4. **适用场景** - **AMD**:更适合需要提前加载所有依赖的场景,例如大型应用的初始化阶段[^3]。 - **CMD**:更适合动态加载按需加载的场景,能够更好地支持模块的懒加载条件加载[^4]。 #### 5. **实现工具** - **AMD**:主要由 RequireJS 实现,适合浏览器端 Node.js 环境下的模块管理[^2]。 - **CMD**:主要由 SeaJS 实现,强调简单、直观的模块化开发体验[^5]。 ### 示例代码对比 #### AMD 示例 ```javascript // 定义模块 define(['moduleA', 'moduleB'], function(A, B) { return function() { A.doSomething(); B.doSomethingElse(); }; }); // 使用模块 require(['myModule'], function(myModule) { myModule(); }); ``` #### CMD 示例 ```javascript // 定义模块 define(function(require, exports, module) { var A = require('moduleA'); exports.doSomething = function() { A.doSomething(); }; }); // 使用模块 seajs.use(['myModule'], function(myModule) { myModule.doSomething(); }); ``` ### 总结 AMD CMD 的核心区别在于模块加载策略 API 设计理念。AMD 更加注重依赖的提前加载全局统一性,而 CMD 则强调按需加载职责单一性。开发者可以根据具体需求选择合适的模块化规范。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值