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 这个全局变量,故不使用这个变量来进行检测. 如果 ...
随机推荐
- BAT批处理(五)
批处理程序 一.交互界面设计 没啥说的,看看设计的菜单界面吧:@echo offclstitle 终极多功能修复:menuclscolor 0Aecho.echo ================== ...
- C语言中printf直接打出2进制数是%什么?16进制是什么?
#include <iostream> #include <stdio.h> #include <stdlib.h> #include <string.h&g ...
- CSS3 边框 圆角 背景
CSS3用于控制网页的样式布局. CSS3是最新的CSS标准. 关于transform: transform:rotate(10deg);//顺时针方向旋转10° 浏览器支持情况:低版本的IE浏览 ...
- 《转》玩转图片Base64编码
引言 图片处理在前端工作中可谓占据了很重要的一壁江山.而图片的 base64 编码可能相对一些人而言比较陌生,本文不是从纯技术的角度去讨论图片的 base64 编码.标题略大,不过只是希望通过一些浅显 ...
- 【题解】CF#855 G-Harry Vs Voldemort
个人感觉挺有意思的,然而被颜神D无聊惹(- ̄▽ ̄)- 这题我们可以首先试图去统计以每一个点作为 w 点所能对答案造成的贡献是多少.不难发现,当且仅当 u 和 v 都在 w 所在边双的一侧的时候不能构成 ...
- NOIP 2018 -The Wound-
"一招不慎,满盘皆输" 如果这个盘是整整一年的OI生涯的话 那么"一招"一定就是NOIP了 Update 2019/4/6 剧变的一年 noip这个成绩意味着我 ...
- POJ3347:Kadj Squares——题解
http://poj.org/problem?id=3347 题目大意:给定一些正方形的边长,让他们尽可能向左以45°角排列(不能互相重合),求在上面看只能看到哪几个正方形. ———————————— ...
- BZOJ2286:[SDOI2011]消耗战——题解
+++++++++++++++++++++++++++++++++++++++++++ +本文作者:luyouqi233. + +欢迎访问我的博客:http://www.cnblogs.com/luy ...
- LOJ2351:[JOI2017/2018决赛]毒蛇越狱——题解
https://loj.ac/problem/2351 参考:https://www.cnblogs.com/ivorysi/p/9144676.html 但是参考博客讲解太吓人了,我们换一种通俗易懂 ...
- 使用JavaScript OOP特性搭建Web应用
最近,我面试了一个有五年 Web 应用程序开发经验的软件开发人员.四年半来她一直在从事 JavaScript 相关的工作,她自认为 JavaScript 技能非常好,但在不久之后我就发现实际上她对 J ...