Commonjs,AMD,CMD和UMD的差异
CommonJS
一种服务器端模块化的规范,Nodejs实现了这种规范,所以就说Nodejs支持CommonJS。
- CommonJS分为三部分:
- require 模块加载
- exports 模块导出
- module 模块本身
根据规范一个单独的JS文件就是一个module,每个单独的module是一个单独的作用域。也就是说在一个文件里定义的变量和函数都是私有,对其他文件不可见,除非用exports导出了。
AMD
Asynchronous Module Definition 的缩写,意思是异步模块定义,是一种异步模块加载的规范,主要用于浏览器端的JS加载,为了不造成网络阻塞。只有当依赖的模块加载完毕,才会执行回调。
AMD使用define来定义模块,require来加载模块。
define(id?,dependencies?,factory);
require([module],callback);
Note: AMD允许输出的模块兼容CommonJS。
RequireJS是AMD的一种实现。
CMD
Common Module Definition的缩写,也是一种异步模块定义规范,它和AMD的主要区别有两点:
1.对于模块的依赖,AMD是提前执行,CMD是延时执行。
2.AMD推崇依赖前置,CMD推崇就近依赖。
//AMD
define(['./a','./b'], function (a, b) {
//依赖一开始就写好
a.test();
b.test();
});
//CMD
define(function (requie, exports, module) {
//依赖就近书写
var a = require('./a');
a.test();
});
当然还其他区别这里就不详细讲了。
SeaJS是CMD的一种实现。
UMD
Universal Module Definition。从名字就可以看出来UMD做的是大一统的工作,把前后端加载糅合在了一起,提供了一个前后端统一的解决方案。支持AMD和CommonJS模式。
UMD的实现很简单:
1.先判断是否支持Node.js模块格式(exports是否存在),存在则使用Node.js模块格式。
2.再判断是否支持AMD(define是否存在),存在则使用AMD方式加载模块。
3.前两个都不存在,则将模块公开到全局(window或global)。
各种具体的实现方式,可以查看UMD的github。下面是Jquery的例子
// if the module has no dependencies, the above pattern can be simplified to
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define([], factory);
} else if (typeof exports === 'object') {
// Node. Does not work with strict CommonJS, but
// only CommonJS-like environments that support module.exports,
// like Node.
module.exports = factory();
} else {
// Browser globals (root is window)
root.returnExports = factory();
}
}(this, function () {
// Just return a value to define the module export.
// This example returns an object, but the module
// can return a function as the exported value.
return {};
}));
Commonjs,AMD,CMD和UMD的差异的更多相关文章
- JavaScript模块化CommonJS/AMD/CMD/UMD/ES6Module的区别
目录 JS-模块化进程 原始的开发方式 CommonJS && node.js AMD && Require.js CMD && Sea.js UMD ...
- CommonJS, AMD, CMD是什么及区别--简单易懂有实例
CommonJS, AMD, CMD都是JS模块化的规范. CommonJS是服务器端js模块化的规范,NodeJS是这种规范的实现. AMD(异步模块定义)和CMD(通用模块定义)都是浏览器端js模 ...
- 关于 CommonJS AMD CMD UMD 规范的差异总结
一.CommonJS 主要是用于服务器端的规范,比如目前的nodeJS. 根据CommonJS规范,一个单独的文件就是一个模块.每一个模块都是一个单独的作用域,也就是说,在一个文件定义的变量(还包括函 ...
- 关于 CommonJS AMD CMD UMD 规范的差异总结(转)
根据CommonJS规范,一个单独的文件就是一个模块.每一个模块都是一个单独的作用域,也就是说,在一个文件定义的变量(还包括函数和类),都是私有的,对其他文件是不可见的. // foo.js var ...
- Javascript模块化编程之CommonJS,AMD,CMD,UMD模块加载规范详解
JavaSript模块化 在了解AMD,CMD规范前,还是需要先来简单地了解下什么是模块化,模块化开发? 模块化是指在解决某一个复杂问题或者一系列的杂糅问题时,依照一种分类的思维把问 题进行系 ...
- JavaScript模块化演变 CommonJs,AMD, CMD, UMD(一)
原文链接:https://www.jianshu.com/p/33d53cce8237 原文系列2链接:https://www.jianshu.com/p/ad427d8879cb 前端完全手册: h ...
- 关于 CommonJS AMD CMD UMD
1. CommonJS CommonJS 原来叫 ServerJS, 是服务器端模块的规范,Node.js采用了这个规范. 根据CommonJS规范,一个单独的文件就是一个模块.加载模块使用requi ...
- 研究一下javascript的模块规范(CommonJs/AMD/CMD)
最近写react需要使用nodejs作为开发环境,需要通过npm安装一些第三方的依赖库,因此慢慢感觉到nodejs基础薄弱对我带来了一些不安全感,尤其是javascript模块这一块听到了很多概念,比 ...
- 插件兼容CommonJS, AMD, CMD 和 原生 JS
模块标准 CommonJS CommonJS 有三个全局变量 module.exports 和 require.但是由于 AMD 也有 require 这个全局变量,故不使用这个变量来进行检测. 如果 ...
随机推荐
- Spring Boot(二)配置分析
回顾一下采用SSM开发项目时,项目中会存在多个配置文件,比如web.xml,配置Spring相关的applicationContext-springmvc.xml, applicationContex ...
- Vue脚手架开发使用sass
vue默认采用的是原生的css,如果想要使用css预编译工具,比如sass,需要下载对应的scss的loader, 具体是 npm install --save-dev sass-loader npm ...
- 【Redis】- 缓存击穿
什么是缓存击穿 在谈论缓存击穿之前,我们先来回忆下从缓存中加载数据的逻辑,如下图所示 因此,如果黑客每次故意查询一个在缓存内必然不存在的数据,导致每次请求都要去存储层去查询,这样缓存就失去了意义.如果 ...
- BZOJ 1004 Cards(Burnside引理+DP)
因为有着色数的限制,故使用Burnside引理. 添加一个元置换(1,2,,,n)形成m+1种置换,对于每个置换求出循环节的个数, 每个循环节的长度. 则ans=sigma(f(i))/(m+1) % ...
- BZOJ1934:[SHOI2007]善意的投票 & BZOJ2768:[JLOI2010]冠军调查——题解
https://www.lydsy.com/JudgeOnline/problem.php?id=1934 https://www.lydsy.com/JudgeOnline/problem.php? ...
- BZOJ1047:[HAOI2007]理想的正方形——题解
http://www.lydsy.com/JudgeOnline/problem.php?id=1047 https://www.luogu.org/problemnew/show/P2216#sub ...
- 数据治理(Data Governance)
今天看到一篇数据治理的论文,以下为论文内容的记录与学习. 数据治理是指将数据作为企业资产而展开的一系列的具体化工作,是对数据的全生命周期管理.数据治理的目标是提高数据质量(准确性和完整性),保证数据的 ...
- Redux的应该注意的问题
1. Store中的State修改不能直接修改原有的State,若直接修改State,则redux中的所有操作都将指向 内存中的同一个state,将无法获取每一次操作前后的state,就无法追溯sta ...
- react事件机制
1. react的事件是合成事件((Synethic event),不是原生事件 <button onClick={this.handleClick}></button> &l ...
- 两年Java的面试经验
前言:从过年前就萌生出要跳槽的想法,到过年来公司从3月初提出离职到23号正式离职,上班的时间也出去面试过几家公司,后来总觉的在职找工作总是得请假,便决心离职后找工作.到4月10号找到了一家互联网公司成 ...