AMD、CMD、ESModule和CommonJS是JavaScript中最常用的模块化规范。在这篇文章中,我将会深入探讨这些规范的区别,以及它们在实际开发中的应用。

  1. AMD规范

AMD规范(Asynchronous Module Definition,异步模块定义)是RequireJS在推广模块化开发的过程中提出的一种规范。该规范的主要特点是异步加载模块,这样可以在需要时才去加载模块,提高页面加载速度。AMD规范的代码示例如下:

//定义模块
define(['module1', 'module2'], function(m1, m2) {//...return module;
});//使用模块
require(['module'], function(module) {//...
});

在AMD规范中,使用define函数来定义一个模块,require函数来加载一个模块。在define函数中,第一个参数是一个数组,表示该模块依赖的其他模块;第二个参数是一个回调函数,表示该模块的代码。在回调函数中,我们可以使用依赖的模块,并将模块作为返回值。在require函数中,第一个参数也是一个数组,表示需要加载的模块;第二个参数是一个回调函数,在该函数中可以使用已加载的模块。

  1. CMD规范

CMD规范(Common Module Definition,通用模块定义)是SeaJS在推广模块化开发的过程中提出的一种规范。该规范与AMD规范类似,也是异步加载模块,但是它的代码风格更加简洁。CMD规范的代码示例如下:

//定义模块
define(function(require, exports, module) {var m1 = require('module1');var m2 = require('module2');//...module.exports = module;
});//使用模块
var module = require('module');

在CMD规范中,使用define函数来定义一个模块,require函数来加载一个模块。在define函数中,回调函数的参数可以自定义,但是一般情况下第一个参数是require,表示依赖其他模块的方法;第二个参数是exports,表示该模块对外输出的方法和属性;第三个参数是module,表示该模块自身。在回调函数中,我们可以使用require函数来加载其他模块,并将需要输出的方法和属性添加到exports对象上。在require函数中,只需要传入需要加载的模块名称即可。

  1. ESModule规范

ESModule规范(ES6 Module,ES6模块)是ECMAScript 6在语言层面上提供的模块化规范。该规范采用静态编译的方式来进行模块化,也就像前面两种规范,ESModule也支持异步加载模块。但是它的语法与前两种规范有很大的不同。ESModule规范的代码示例如下:

//定义模块
export function module() {//...
}//使用模块
import { module } from 'module';

在ESModule规范中,使用export关键字来将模块的方法和属性输出,使用import关键字来加载其他模块。在export关键字后面,可以跟着一个函数或者变量名,表示需要输出的方法或属性。在import关键字后面,可以跟着需要加载的模块名称和需要导入的方法或属性。

ESModule的语法比较简洁,而且具有很好的可读性,这是因为ESModule采用了语言层面上的支持。与前两种规范不同,ESModule规范不需要使用额外的库来实现模块化,而是使用了标准的语法来支持。

  1. CommonJS规范

CommonJS规范是Node.js在推广模块化开发的过程中提出的一种规范。该规范与前三种规范的最大区别在于它采用同步加载模块的方式。CommonJS规范的代码示例如下:

//定义模块
var module1 = require('module1');
var module2 = require('module2');//使用模块
var module = require('module');

在CommonJS规范中,使用require函数来加载其他模块,并将需要使用的模块赋值给变量。在使用模块时,只需要使用require函数来加载即可。

由于CommonJS规范是Node.js在推广模块化开发的过程中提出的一种规范,因此它在服务器端的应用非常广泛。但是在浏览器端的应用中,CommonJS规范的同步加载方式可能会导致页面加载速度变慢,因此在浏览器端的应用中,更多地使用异步加载模块的规范,比如AMD和CMD。

总结

在实际开发中,我们可以根据项目需求和团队开发习惯来选择使用适合自己的模块化规范。如果需要异步加载模块,可以选择AMD或CMD规范;如果在语言层面上支持模块化,则可以选择ESModule规范;如果需要在Node.js中使用模块化,则可以选择CommonJS规范。无论使用哪种规范,模块化开发的目的都是为了提高代码的可维护性和可重用性,使代码更加清晰明了,从而提高开发效率。

amd、cmd、esmodule、commonjs区别相关推荐

  1. 模块化(AMD、CMD、CommonJS、ES6)

    1,CommonJS 服务器,同步加载模块,加载机制是:输出拷贝 模块导出:module.exports 导入模块:require 2,AMD(异步模块定义) 用于浏览器,防止js加载阻塞页面渲染,异 ...

  2. CommonJS,AMD,CMD,ES6,require 和 import 详解

    CommonJS,AMD,CMD,ES6 commonJS用同步的方式加载模块.在服务端,模块文件都存在本地磁盘,读取非常快,所以这样做不会有问题.但是在浏览器端,限于网络原因,更合理的方案是使用异步 ...

  3. commonjs是什么_JavaScript模块化标准CommonJS/AMD/CMD/UMD/ES6Module的区别

    JS-模块化进程 随着js技术的不断发展,途中会遇到各种问题,比如模块化. 那什么是模块化呢,他们的目的是什么? 定义:如何把一段代码封装成一个有用的单元,以及如何注册此模块的能力.输出的值依赖引用: ...

  4. AMD/CMD/CommonJs到底是什么?它们有什么区别?

    这篇文章总结的很好. 知道JS有模块化开发的说法,也偶尔听过requireJs,AMD,CMD等等名字,甚至使用node的时候,还用过require之类的方法,但是对这些一直没有一个明确的认识和概念. ...

  5. 03.06 随手记(AMD、CMD、CommonJS、ES6 Module的区别)

    ***当前阶段的笔记 *** 「面向实习生阶段」https://www.aliyundrive.com/s/VTME123M4T9 提取码: 8s6v 点击链接保存,或者复制本段内容,打开「阿里云盘」 ...

  6. 模块化开发:AMD、CMD、CommonJs和Es6的区别

    什么是AMD.CMD.CommonJs? 他们之间有什么区别? 项目当中都是如何运用的? AMD即Asynchronous Module Definition,是RequireJS在推广过程中对模块定 ...

  7. 理解AMD ,CMD,CommonJS规范

    https://blog.csdn.net/xcymorningsun/article/details/52709608 理解AMD ,CMD,CommonJS规范 2016年09月30日 10:33 ...

  8. JS JavaScript模块化(ES Module/CommonJS/AMD/CMD)

    前言 前端开发中,起初只要在script标签中嵌入几十上百行代码就能实现一些基本的交互效果,后来js得到重视,应用也广泛起来了, jQuery,Ajax,Node.Js,MVC,MVVM等的助力也使得 ...

  9. 关于 CommonJS AMD CMD UMD 规范的差异总结

    根据CommonJS规范,一个单独的文件就是一个模块.每一个模块都是一个单独的作用域,也就是说,在一个文件定义的变量(还包括函数和类),都是私有的,对其他文件是不可见的. // foo.js var ...

  10. 前端开发 AMD 和 CMD 的规范区别

    AMD 规范在这里:https://github.com/amdjs/amdjs-api/wiki/AMD CMD 规范在这里:https://github.com/seajs/seajs/issue ...

最新文章

  1. requests payload_python+Requests接口自动化测试之传递 URL 参数
  2. POJ3461 Oulipo ——KMP算法——Pku3461
  3. R语言实战应用精讲50篇(十九)-R语言gganimate函数应用案例:静态图变成动态,让你的图表更酷炫
  4. CVPR 2019 | 基于骨架表达的单张图片三维物体重建方法
  5. 使用 vue-i18n 切换中英文
  6. leetcode127. 单词接龙(bfs)
  7. Python输出LOGO图标
  8. 动态规划入门——第N个泰波那契数(Leetcode 1137)
  9. 正则翻译工具_PythonBasics 中文系列教程 · 翻译完成
  10. MySQL中的DATE_SUB()函数和DATE_ADD()函数
  11. 用ASP.NET MVC自己管理自己的View:ASP.NET MVC File Management 【转】
  12. 【Sublime Text3 】——代码片段
  13. 容器技术Docker K8s 11 容器服务Kubernetes版ACK详解-集群查看及管理
  14. 王师傅c语言游戏,炉石王师傅斗鱼首播!旭旭宝宝都送了10发超火,只有他没来...
  15. A granted authority textual representation is required
  16. Twitter、Google背后的“卖水人”,力盟科技也来港股分一杯羹?
  17. MathType怎样在字母上方加一横表示均值
  18. System.Windows.Freezable 在未被引用的程序集中定义
  19. ListContainer教程
  20. 为什么我从PR里面导出来的视频,在电脑上可以正常播放,但是上传到天猫、淘宝、抖音、微信等平台后就变的模糊,类似于重影的效果

热门文章

  1. java微信摇一摇_微信摇一摇功能实现
  2. 考研【真题】一些名校的部分真题(侵权请通知我删除)
  3. VC++图形平移功能的实现
  4. 手机数字雨_cmd命令如何实现数字雨的效果
  5. MATLAB中快捷注释方法和使用“%%”将代码分块运行方法
  6. 【论文笔记】基于范围的有障碍最近邻查询(RONN)
  7. ionic字符串截取数字
  8. 网络安全关于Windows下BAT脚本使用
  9. Java农历(阴历)工具类
  10. 有n个人围成一圈,从第1个人开始,1、2、3报数,报至3出局,余下的人继续从1、2、3报数,问:最后剩下的一人是原来的第几号?同时求出被淘汰编号的序列。(要求:用循环队列解决该问题。)