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. A+B+C问题

    这是一个非常简单的题目,意在考察你编程的基础能力.千万别想难了哦.输入为一行,包括了用空格分隔的三个整数 AA.BB.CC(数据范围均在-40−40 ~ 4040 之间).输出为一行,为“A+B+CA ...

  2. UVALive - 7269 I - Snake Carpet

    思路: 多画画就发现从五的时候可以这么填: 六的时候这么填: 七的时候这么填: 看出规律了吗? 没看出的话再画画把. #include <bits/stdc++.h> using name ...

  3. 解析分布式锁之Redis实现(二)

    摘要:在前文中提及了实现分布式锁目前有三种流行方案,分别为基于数据库.Redis.Zookeeper的方案,本文主要阐述基于Redis的分布式锁,分布式架构设计如今在企业中被大量的应用,而在不同的分布 ...

  4. Python Web学习笔记之TCP/IP协议原理与介绍

    HTTP.FTP.SMTP.Telnet等等协议,哦!那个HTTP协议啊就是访问网页用的那个协议啊然后那个······其实······你懂得,我们应该从实际来了解他,理解网络协议的作用与功能,然后再从 ...

  5. 编写第一个微信小程序界面

    编写第一个微信小程序界面 不忘初心,方得始终:初心易得,始终难守. 传统的 web 结构 小程序文件目录结构 小程序页面层级结构 编写第一个小程序 1. 创建小程序目录结构 2. 编写代码 welco ...

  6. Git 基础 —— 常用命令

    Git 基础学习系列 Git 基础 -- 安装 配置 别名 对象 Git 基础 -- 常用命令 Git 基础 -- 常见使用场景 Git基础 -- Github 的使用 git init 创建 Git ...

  7. 支持github的chrome插件octotree

    1.这款插件有何作用? 方便浏览github上的源码 2.安装方法 通过以下链接进行安装: https://chrome.google.com/webstore

  8. newcode wyh的吃鸡(优势队列+BFS)题解

    思路: 要用优势队列,因为有的+2,有的+1,所以队列中的步长是不单调的,所以找到一个答案但不一定最小,所以用优势队列把小的放在队首. 要记录状态,所以开了三维,题目和昨天做的那道小明差不多 vis开 ...

  9. 基于大规模语料的新词发现算法【转自matix67】

    最近需要对商品中的特有的词识别,因此需新词发现算法,matrix的这篇算法很好. 对中文资料进行自然语言处理时,我们会遇到很多其他语言不会有的困难,例如分词——汉语的词与词之间没有空格,那计算机怎么才 ...

  10. HDU 3065 病毒侵袭持续中(AC自动机(每个模式串出现次数))

    http://acm.hdu.edu.cn/showproblem.php?pid=3065 题意:求每个模式串出现的次数. 思路: 不难,把模板修改一下即可. #include<iostrea ...