CMD、AMD、commonJs 规范的写法

本文详细介绍了三种主流的模块加载规范:AMD、CMD 和 CommonJS 的语法及使用方式,并提供了一个兼容多种环境的示例。

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

比较好的文章: http://www.jianshu.com/p/d67b...
AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。
CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。

//AMD 规范
/**
 * define(id?, dependencies?, factory); id 和 dependencies 是可选的。
 *
 * define(['dep1', 'dep2'], function(dep1, dep2){
 *  return funciton() {};
 * });
 */
 
 define(['./a', './b'], function(a, b) {  // 依赖必须一开始就写好
    a.doSomething()
    // 此处略去 100 行
    b.doSomething()
    ...
 }) 

define(function () {
    var exports = {};
    exprots.sayHello = function () {
        alert('Hello from module:' + module.id);
    };
    return exports;
});


//CMD 规范
/**
 * define(function(require, exports, module){
 *      return funciton() {};
 * });
 * require、exprots 和module 通过形参传递给模块,在需要依赖模块是,随时调用require() 引入即可
 */
 
 define(function(require, exports, module) {   
     var a = require('./a')  
     a.doSomething()   
     // 此处略去 100 行   
     var b = require('./b') 
     // 依赖可以就近书写   b.doSomething()   
     // ... 
})


//commonJs 规范
/**
 * 在模块中,通过require()方法来引入外部的模块。
 * 上下文提供了exports 对象用于到处当前模块的方法和变量, 并且它是唯一导出的出口。
 * 在模块中还存在一个module对象,它代表模块自身,而exports是module的属性。
 * math.js
 */
exports.math = function () {
    var sum = 0, i = 0, args = arguments, len = args.length;
    while(i < 1) {
        sum += args[i];
    }
    return sum;
};

//另外一个文件
var math = require('math');
exports.increment = function (val) {
    return math.add(val, 1);
};

//兼容Node、AMD、CMD以及浏览器常见的浏览器环境
(function(name, definition){
    //检测上下文环境是否为AMD 或 CMD
    var hasDefine = typeof define === 'function',
        //检查上下文环境是否为Node
        hasExports = typeof module !== 'undefined' && module.exports;

    if(hasDefine) {
        //AMD或CMD环境
        define(definition);
    } else if (hasExports) {
        //定义为普通Node 模块
        module.exports == definition();
    } else {
        //将模块的执行结果挂在window变量中,在浏览器中this指向window对象
        this[name] = definition();
    }
}('hello', function () {
    var hello = function () {

    };
    return hello;
}));
<think>我们被要求解释CommonJSAMDCMD这三种前端模块化规范。需要分别说明它们的定义、特点、使用场景和代码示例,并在最后提出相关问题。 注意:回答必须包含3-5个相关问题,且以“§§相关问题§§”开头。 结构安排: 1. 分别介绍CommonJSAMDCMD,包括它们的背景、特点、代码示例和适用环境。 2. 对比它们的差异(同步/异步,服务端/浏览器端等)。 3. 最后提出相关问题。 注意:由于用户要求用中文,且需要按照示例格式,末尾必须有问题部分。</think>### CommonJSAMDCMD 模块化规范详解 #### 核心概念对比 ```mermaid graph LR A[模块化规范] --> B[CommonJS] A --> C[AMD] A --> D[CMD] B --> E[同步加载] C --> F[异步加载] D --> G[延迟执行] ``` #### 规范特性对比表 | **特性** | **CommonJS** | **AMD (RequireJS)** | **CMD (SeaJS)** | |------------------|----------------------------|---------------------------|---------------------------| | **适用环境** | Node.js 服务端 | 浏览器环境 | 浏览器环境 | | **加载方式** | 同步加载 | 异步加载 | 异步加载 | | **执行时机** | 运行时加载 | 提前执行 | 延迟执行(按需执行) | | **代表库** | Node.js 原生支持 | RequireJS | SeaJS | | **依赖声明** | 运行时解析 | 依赖前置 | 依赖就近 | | **代码示例** | ```js<br>const fs = require('fs');<br>module.exports = {...};``` | ```js<br>define(['dep1','dep2'],<br>function(d1,d2){<br> return {...};<br>});``` | ```js<br>define(function(require, exports, module){<br> const dep1 = require('./dep1');<br> module.exports = {...};<br>});``` | #### CommonJS 深度解析 **核心机制:** ```javascript // 模块定义 (math.js) function add(a, b) { return a + b; } module.exports = { add }; // 模块使用 (main.js) const math = require('./math'); console.log(math.add(2, 3)); // 5 ``` **特点:** - 同步加载导致阻塞(不适合浏览器) - 模块缓存机制(避免重复加载) - `module.exports` 和 `exports` 区别: ```javascript exports = module.exports = {}; // 初始指向同一对象 exports.name = 'test'; // 有效 exports = { value: 1 }; // 无效!切断了引用关系 ``` #### AMD (Asynchronous Module Definition) **RequireJS 实现:** ```html <!-- 浏览器引入 --> <script data-main="scripts/main" src="require.js"></script> ``` **模块定义:** ```javascript // 定义依赖前置的模块 define(['jquery', 'lodash'], function($, _) { const filterData = (arr) => _.filter(arr, item => item.active); return { render: function(data) { $('#list').html(filterData(data).join(',')); } }; }); // 动态加载 require(['math'], function(math) { alert(math.add(10, 20)); }); ``` **核心特点:** - 并行加载所有依赖 - 执行顺序不保证(依赖回调顺序) - 配置路径别名: ```javascript require.config({ paths: { 'jquery': 'https://cdn.example/jquery.min' } }); ``` #### CMD (Common Module Definition) **SeaJS 实现:** ```javascript // 模块定义 (兼容写法) define(function(require, exports, module) { // 依赖就近声明 const dep1 = require('./dep1'); const dep2 = require('./dep2'); // 导出接口 exports.action = function() { return dep1.process() + dep2.format(); }; // 完整导出替换 module.exports = { ... }; }); ``` **核心优势:** 1. **按需执行**:依赖模块使用时才执行 ```javascript if (condition) { const optional = require('./optional'); // 条件加载 } ``` 2. **依赖就近**:提升代码可读性 3. **同步写法**:保持编码习惯 #### 规范演进与现状 ```mermaid timeline title 模块化规范演进时间线 2009 : CommonJS 诞生(Node.js) 2011 : AMD 规范发布(RequireJS) 2011 : CMD 规范发布(SeaJS) 2015 : ES Modules 成为标准 2020+: ESM 原生浏览器支持普及 ``` **现代工程化方案:** - Webpack/Rollup 支持混合打包 - 兼容方案: ```javascript // 同时支持 CommonJS 和 ES Module import ES from './esm.js'; const Common = require('./cjs.js'); ``` **最佳实践建议:** 1. 新项目首选 ES Modules 2. 老项目改造: ```javascript // 从 CMD/AMD 迁移到 ESM import { func } from './old-module.js'; ``` 3. 工具库提供多格式输出: ```json // package.json { "main": "dist/common.js", // CommonJS "module": "dist/esm.js" // ES Module } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值