CommonJS

CommonJS是服务器端模块的规范,Node.js采用了这个规范。

根据CommonJS规范,一个单独的文件就是一个模块。加载模块使用require方法,该方法读取一个文件并执行,最后返回文件内部的exports对象。

例如:

// foobar.js

//私有变量
var test = 123; //公有方法
function foobar () { this.foo = function () {
// do someing ...
}
this.bar = function () {
//do someing ...
}
} //exports对象上的方法和变量是公有的
var foobar = new foobar();
exports.foobar = foobar;

AMD  CMD

AMD规范的实现代表是require.js

amd是异步加载规范

CMD规范的实现代表是sea.js

  • 对于依赖的模块AMD是提前执行,CMD是延迟执行。不过RequireJS从2.0开始,也改成可以延迟执行(根据写法不同,处理方式不通过)。

  • CMD推崇依赖就近,AMD推崇依赖前置。

//AMD
define(['./a','./b'], function (a, b) { //依赖一开始就写好
a.test();
b.test();
}); //CMD
define(function (requie, exports, module) { //依赖可以就近书写
var a = require('./a');
a.test(); ...
//软依赖
if (status) { var b = requie('./b');
b.test();
}
});

虽然 AMD也支持CMD写法,但依赖前置是官方文档的默认模块定义写法。

  • AMD的API默认是一个当多个用,CMD严格的区分推崇职责单一。例如:AMD里require分全局的和局部的。CMD里面没有全局的 require,提供 seajs.use()来实现模块系统的加载启动。CMD里每个API都简单纯粹。

简单来说,就是sea.js属于懒加载,require.js属于预加载.

在这里,顺便扩展一下预加载和懒加载的优缺点

预加载:当第一次访问时将所有的文件加载出来

优点:第一次访问完成以后, 再次访问的速度会很快

缺点:第一次加载页面要等待很久.

懒加载:使用的时候才会加载对应的文件.

优点:第一次访问速度相对快点

缺点:再访问其他新的模块时速度会变慢.

UMD

UMD是AMD和CommonJS的糅合

AMD模块以浏览器第一的原则发展,异步加载模块。
CommonJS模块以服务器第一原则发展,选择同步加载,它的模块无需包装(unwrapped modules)。
这迫使人们又想出另一个更通用的模式UMD (Universal Module Definition)。希望解决跨平台的解决方案。

UMD先判断是否支持Node.js的模块(exports)是否存在,存在则使用Node.js模块模式。
在判断是否支持AMD(define是否存在),存在则使用AMD方式加载模块。

(function (window, factory) {
if (typeof exports === 'object') { module.exports = factory();
} else if (typeof define === 'function' && define.amd) { define(factory);
} else { window.eventUtil = factory();
}
})(this, function () {
//module ...
});
 

AMD,CMD.CommonJs和UMD还有es6的模块化对比的更多相关文章

  1. JS模块之AMD, CMD, CommonJS、UMD和ES6模块

    CommonJS 传送门 同步加载,适合服务器开发,node实现了commonJS.module.exports和require 判断commonJS环境的方式是(参考jquery源码): if ( ...

  2. FW: AMD, CMD, CommonJS和UMD

    javascript 我是豆腐不是渣 4月5日发布 推荐 2 推荐 收藏 32 收藏,486 浏览 今天由于项目中引入的echarts的文件太大,requirejs经常加载超时,不得不分开来加载ech ...

  3. AMD, CMD, CommonJS和UMD

    我的Github(https://github.com/tonyzheng1990/tonyzheng1990.github.io/issues),欢迎star 今天由于项目中引入的echarts的文 ...

  4. js模块系统 - amd|cmd|commonjs|esm|umd

    写过前端代码大概率听说过amd cmd umd commonjs esm这些名词, 想当初我第一次看到这些的时候, 人都麻了, 都是些啥啊. 后来我知道了, 这些都是js的模块规范. amd - 浏览 ...

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

    知识点1:AMD/CMD/CommonJs是JS模块化开发的标准,目前对应的实现是RequireJs/SeaJs/nodeJs.   知识点2:CommonJs主要针对服务端,AMD/CMD主要针对浏 ...

  6. js模块化开发 AMD CMD Commonjs

    在es6全面实行开来之前  js实现模块开发方案有: 1.AMD 异步模块开发定义  依赖前置,requireJs应用了这一规范 require([module], callback); 加载完后回调 ...

  7. 深度扫盲JavaScript的模块化(AMD , CMD , CommonJs 和 ES6)

    原文地址 https://blog.csdn.net/haochangdi123/article/details/80408874 一.commonJS 1.内存情况 对于基本数据类型,属于复制.即会 ...

  8. AMD CMD commonJS es6

    看到很多人傻傻的分不清楚 AMD.CMD . commonJS . es6的区别,实际上这跟这几年前段技术的发展有很大的关系. 实际上这是JavaScript的模块化思想演进的一个过程. 最开始的时候 ...

  9. es6的模块化--AMD/CMD/commonJS/ES6

    , ); ); }) , )); }); , )); ; export { firstName, lastName, year }; // es6引用 import { firstName, last ...

随机推荐

  1. entity framework 新增,更新,事务

    protected void Button1_Click(object sender, EventArgs e) { yyEntities _db; _db = new yyEntities(); t ...

  2. Integer类之equals与hashCode

    一.源码. 1.equals源码.可以看出,比较的是两者的类型相同且内容相同.即是否有相等的int类型的value值. ######################################## ...

  3. Java事件监听的四种实现方式

    1.事件对象: 一般继承自java.util.EventObject对象,由开发者自行定义. 2.事件源: 就是触发事件的源头,不同的事件源会触发不同的事件类型. 3.事件监听器: 事件监听器负责监听 ...

  4. cc150 --链表分割

    题目描述 编写代码,以给定值x为基准将链表分割成两部分,所有小于x的结点排在大于或等于x的结点之前 给定一个链表的头指针 ListNode* pHead,请返回重新排列后的链表的头指针.注意:分割以后 ...

  5. HZNU_TI1050 训练实录

    菜鸡队训练实录 比赛记录:[名称:奖项 / 排名] 2018: ZJPSC                       Bronze      / 86 CCPC Jilin              ...

  6. 岭回归(Ridge Regression)

    一.一般线性回归遇到的问题 在处理复杂的数据的回归问题时,普通的线性回归会遇到一些问题,主要表现在: 预测精度:这里要处理好这样一对为题,即样本的数量和特征的数量 时,最小二乘回归会有较小的方差 时, ...

  7. FastDFS+nginx+keepalived集群搭建

    安装环境 nginx-1.6.2 libfastcommon-master.zip FastDFS_v5.05.tar.gz(http://sourceforge.net/projects/fastd ...

  8. ELK学习笔记之Elasticsearch启动常见错误

    问题出现的环境: OS版本:CentOS-7-x86_64-Minimal-1708 ES版本:elasticsearch-6.2.2 1. max file descriptors [4096] f ...

  9. Nginx 灰度实现方式(支持纯灰度,纯生产,50度灰及更多比例配置)

    前言 Nginx相关技术短信本篇幅不做详细介绍,所以学习本文之前要对Nginx有相关的了解. 生产环境即线上环境,在经历开发.测试再到上线,不可避免的会更新生产环境,但谁又能保证测试过的代码到线上运行 ...

  10. bzoj1648 / P2853 [USACO06DEC]牛的野餐Cow Picnic

    P2853 [USACO06DEC]牛的野餐Cow Picnic 你愿意的话,可以写dj. 然鹅,对一个缺时间的退役选手来说,暴力模拟是一个不错的选择. 让每个奶牛都把图走一遍,显然那些被每个奶牛都走 ...