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. 026-chmod命令

    语法# chmod [ 选项参数 ]  选择修改权限的对象   权限的改变   目标文件 语义:对哪些目标文件的哪些权限进行修改. (1)# chmod -R ugo +r /home/apple.将 ...

  2. hdu3511 Prison Break 圆的扫描线

    地址:http://acm.split.hdu.edu.cn/showproblem.php?pid=3511 题目: Prison Break Time Limit: 10000/5000 MS ( ...

  3. 【Redis学习之九】Redis集群:Twemproxy和HA

    环境 虚拟机:VMware 10 Linux版本:CentOS-6.5-x86_64 客户端:Xshell4 FTP:Xftp4 jdk8 redis-3.0.4 主从模式对写压力没有分担,解决思路就 ...

  4. 【tensorflow】pip 安装失败的原因

    linux系统旧版本:   pip install https://storage.googleapis.com/tensorflow/linux/cpu/tensorflow-0.5.0-cp27- ...

  5. python2.7运行selenium webdriver api报错Unable to find a matching set of capabilities

    在火狐浏览器33版本,python2.7运行selenium webdriver api报错:SessionNotCreatedException: Message: Unable to find a ...

  6. 【Python】【Flask】前端调用后端方法

    后端代码: @app.route("/test",methods=['POST','GET']) def test(): return "我是测试的" 前端代码 ...

  7. MySQL Crash Course #13# Chapter 21. Creating and Manipulating Tables

    之前 manipulate 表里的数据,现在则是 manipulate 表本身. INDEX 创建多列构成的主键 自动增长的规定 查看上一次插入的自增 id 尽量用默认值替代 NULL 外键不可以跨引 ...

  8. Linux系统的vi命令

    Linux系统的vi命令 vi编辑命令 1,格式: #vi filename 2,用法: //打开或新建文件,并将光标置于第一行首 #vi + filename //打开文件,并将光标置于第n行首 # ...

  9. JavaScript 实现 标签页 切换效果

    JavaScript 实现 标签页 切换效果 版权声明:未经授权,严禁分享! 构建主体界面 HTML 代码 <h1>实现标签页的切换效果</h1> <ul id=&quo ...

  10. 配置redis, make的时候: zmalloc.h:50:31: 致命错误:jemalloc/jemalloc.h:没有那个文件或目录

    今天正在centos7.3里面配置redis3.0, 结果make的时候抛出编译中断 CC adlist.o In file included from adlist.c:34:0: zmalloc. ...