AMD,CMD.CommonJs和UMD还有es6的模块化对比
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的模块化对比的更多相关文章
- JS模块之AMD, CMD, CommonJS、UMD和ES6模块
CommonJS 传送门 同步加载,适合服务器开发,node实现了commonJS.module.exports和require 判断commonJS环境的方式是(参考jquery源码): if ( ...
- FW: AMD, CMD, CommonJS和UMD
javascript 我是豆腐不是渣 4月5日发布 推荐 2 推荐 收藏 32 收藏,486 浏览 今天由于项目中引入的echarts的文件太大,requirejs经常加载超时,不得不分开来加载ech ...
- AMD, CMD, CommonJS和UMD
我的Github(https://github.com/tonyzheng1990/tonyzheng1990.github.io/issues),欢迎star 今天由于项目中引入的echarts的文 ...
- js模块系统 - amd|cmd|commonjs|esm|umd
写过前端代码大概率听说过amd cmd umd commonjs esm这些名词, 想当初我第一次看到这些的时候, 人都麻了, 都是些啥啊. 后来我知道了, 这些都是js的模块规范. amd - 浏览 ...
- AMD/CMD/CommonJs到底是什么?它们有什么区别?
知识点1:AMD/CMD/CommonJs是JS模块化开发的标准,目前对应的实现是RequireJs/SeaJs/nodeJs. 知识点2:CommonJs主要针对服务端,AMD/CMD主要针对浏 ...
- js模块化开发 AMD CMD Commonjs
在es6全面实行开来之前 js实现模块开发方案有: 1.AMD 异步模块开发定义 依赖前置,requireJs应用了这一规范 require([module], callback); 加载完后回调 ...
- 深度扫盲JavaScript的模块化(AMD , CMD , CommonJs 和 ES6)
原文地址 https://blog.csdn.net/haochangdi123/article/details/80408874 一.commonJS 1.内存情况 对于基本数据类型,属于复制.即会 ...
- AMD CMD commonJS es6
看到很多人傻傻的分不清楚 AMD.CMD . commonJS . es6的区别,实际上这跟这几年前段技术的发展有很大的关系. 实际上这是JavaScript的模块化思想演进的一个过程. 最开始的时候 ...
- es6的模块化--AMD/CMD/commonJS/ES6
, ); ); }) , )); }); , )); ; export { firstName, lastName, year }; // es6引用 import { firstName, last ...
随机推荐
- JS中的对象数组
<html> <head> <title>对象数组的字符串表示</title> <script type="text/javascrip ...
- dedecms开启多站点
dedecms开启多站点后,填写域名才能正确的地址 if ( ! function_exists('GetFileUrl')) { function GetFileUrl($aid,$typeid,$ ...
- .apk等常用文件下载出现如果应下载文件,请添加 iis MIME 映射。
在下载.apk文件时出现错误. HTTP 错误 404.3 - Not Found 由于扩展配置问题而无法提供您请求的页面.如果该页面是脚本,请添加处理程序.如果应下载文件,请添加 MIME 映射. ...
- Bus memory attribute
根据程序的局部性原理,在主存与CPU之间设置的一个高速的容量较小的存储器,叫做cache. ARM cache架构由cache存储器和写缓冲器(write-buffer)组成.其中Write_buff ...
- python之路 socket、socket server
一.socket socket的英文原义是“孔”或“插座”.作为BSD UNIX的进程通信机制,取后一种意思.通常也 称作"套接字",用于描述IP地址和端口,是一个通信链的句柄,可 ...
- ActiveMQ 安装以及集群搭建
安装环境: jdk1.7 apache-activemq-5.11.1-bin.tar.gz VM虚拟机redhat6.5-x64:192.168.1.200 Xshell4 部署方案: 主机IP 集 ...
- linux常用命令:cal 命令
cal命令可以用来显示公历(阳历)日历.公历是现在国际通用的历法,又称格列历,通称阳历.“阳历”又名“太阳历”,系以地球绕行太阳一周为一年,为西方各国所通用,故又名“西历”. 1.命令格式: cal ...
- iframe嵌套
iframe基本内涵 通常我们使用iframe直接直接在页面嵌套iframe标签指定src就可以了. <iframe src="demo_iframe_sandbox.htm" ...
- python-安装,设置环境变量(win10)
python官网: https://www.python.org/ 选择需要的版本下载 下载后安装 我装的是默认位置C:\Python27 打开环境变量设置: 右键电脑--->属性----> ...
- MySQL笔记(五)MySQL 角色与SQL CHECK约束
MySQL ROLE MySQL 8.0 Reference Manual / Security / MySQL User Account Management / Using Roles ...