amd,cmd,umd,commonjs,esmodule

JavaScript模块类型及使用场景

各个模块使用场景及其导入导出基本语法,让你看一眼代码就知道这是什么类型模块。

AMD

使用场景:require.js,浏览器端,异步加载模块
导入语句:

require(['module-name'], function (module) { 
// 使用module 
});

导出语句:

define(['dependency1', 'dependency2'], function (dep1, dep2) {
  return {
    export1: value1,
    export2: value2
  };
});

CMD

使用场景:sea.js,服务器端,同步加载模块
导入语句:

const module = require('module-name');

导出语句:

define(function (require, exports, module) {
  const export1 = value1;
  const export2 = value2;
}

UMD

使用场景:commonjs+amd+环境变量,既可以跑在node环境,也可以浏览器环境
环境判断语句:

(function(global,factory) {
  typeof module!=='undefined'&& typeof exports==='object'?module.exports=factory():
  typeof define==='function' && define.amd ? define(factory):
  (global = global || self,global.Sortable = factory())
}(this,(function(){'use strict'}))
)

commonJs

使用场景:常用于node.js后台开发
导入语句:

const a = require('lodash');

​​​导出语句

module.exports = 变量名;

esMoudle

使用场景:前端日常开发(react,vue)
导入语句:

import a from 'A';

导出语句

export default A;
export {
  A,
  b
}

<think>嗯,用户这次明确要求了解CommonJSAMDCMD的定义,并且提供了三篇站内引用作为参考资料。从引用内容看,这些资料已经涵盖了三大模块化规范的核心定义和区别,特别是引用[2]的历史背景部分和引用[3]的对比很清晰。 用户可能是前端开发者或学习者,正在系统梳理模块化知识。考虑到之前对话没有历史上下文,用户应该是首次提出这个问题。ta特意强调“定义”,说明需要最基础的概念解释,而非深入的技术实现。 在组织回答时要注意: 1. 严格按规范分类说明,每个定义包含提出时间、设计目标、核心特点 2. 突出关键差异点,比如AMD/CMD的依赖声明方式差异 3. 补充典型实现库(Node.js/RequireJS/Sea.js)增强理解 4. 避免术语堆砌,用“同步/异步”“依赖前置/就近”等对比语言 特别注意引用[3]提到的细微区别:AMD模块作为依赖时立即初始化,CMD则是引用时才初始化,这个技术细节值得包含在定义中。另外玉伯作为CMD提出者的信息也来自引用[1],需要保留。 最后生成的对比表格很有必要,能直观呈现三者在加载方式、应用场景等维度的区别。用户后续可能会追问UMD或ES Module,但当前只需聚焦ta明确要求的三个规范。 </think>以下是 CommonJSAMDCMD 三大模块化规范的核心定义与技术特点: --- ### **1. CommonJS** **定义**:2009 年提出的**服务端模块化规范**,最初为 Node.js 设计,采用**同步加载**方式。 **核心特点**: - **模块定义**:使用 `module.exports` 导出模块,`require()` 导入模块。 - **加载机制**:模块在运行时同步加载,依赖顺序执行(适用于本地文件系统)。 - **适用场景**:Node.js 等服务器环境,**不直接兼容浏览器**(因浏览器需异步加载)。 **示例**: ```javascript // 导出模块 module.exports = { add: (a, b) => a + b }; // 导入模块 const math = require('./math.js'); ``` --- ### **2. AMD (Asynchronous Module Definition)** **定义**:2011 年由 RequireJS 提出,专为解决**浏览器端异步加载**而设计。 **核心特点**: - **依赖前置**:模块依赖需在定义时提前声明。 - **异步加载**:并行下载模块,通过回调函数执行逻辑。 - **API 设计**:全局 `define()` 定义模块,`require()` 异步加载。 **示例**: ```javascript define(['dep1', 'dep2'], (dep1, dep2) => { return { execute: () => dep1.run() + dep2.run() }; }); ``` --- ### **3. CMD (Common Module Definition)** **定义**:2011 年由 **玉伯(蚂蚁金服)** 提出,基于 Sea.js 实现,强调**按需加载**。 **核心特点**: - **就近依赖**:依赖在代码执行处就近声明(非提前声明)。 - **按需初始化**:模块仅在被引用时初始化,否则仅加载不执行。 - **职责单一**:无全局 `require`,使用 `seajs.use()` 启动模块系统。 **示例**: ```javascript define((require, exports) => { // 执行到此处才加载依赖 const dep = require('./dep.js'); exports.run = () => dep.action(); }); ``` --- ### **关键区别总结** | 特性 | CommonJS | AMD | CMD | |---------------|----------------|---------------------|-------------------| | **加载方式** | 同步 | 异步 | 异步 | | **依赖声明** | 运行时解析 | 定义时前置声明 | 执行处就近声明 | | **初始化时机**| 加载后立即初始化 | 依赖全部加载后初始化 | 被引用时才初始化 | | **适用环境** | 服务端(Node.js)| 浏览器 | 浏览器 | | **典型实现** | Node.js | RequireJS | Sea.js | > 引用说明: > - CommonJS 设计初衷为服务端同步场景[^2]; > - AMD 通过依赖前置解决浏览器异步问题[^2]; > - CMD 的按需加载特性由 Sea.js 实现,优化了初始化性能[^1][^3]。 --- ### 相关问题 1. **为什么 CommonJS 不能在浏览器直接使用?如何解决?** 2. **AMDCMD 在性能优化上有哪些具体差异?** 3. **Sea.js 如何实现模块的按需加载?** 4. **现代前端项目为何逐渐转向 ESM(ES6 Module)?**
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值