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 ...
随机推荐
- 做报表需要知道的基本的SQL语句
为客户做报表需要操作数据库,基本的SQL是必须要掌握的,下面介绍做报表最常用的SQL语句. 方法/步骤 1 查询数据:编号表示查询顺序. (8) select (9) distinct (11 ...
- 2.TypeScript 基础入门(二)
变量类型的那些事 1.基本注解 类型注解使用:TypeAnnotation 语法.类型声明空间中可用的任何内容都可以用作类型注解. const num: number = 123; function ...
- SQL Server查询中特殊字符的处理方法
SQL Server查询中,经常会遇到一些特殊字符,比如单引号“'”等,这些字符的处理方法,是SQL Server用户都应该需要知道的. 我们都知道SQL Server查询过程中,单引号“'”是特殊字 ...
- eclipse配置汇总
1.背景色调节 general->editor->texteditor->选中background RGB: 85 90 205 2.java vm参数设置 VmAguments中 ...
- bzoj4561: [JLoi2016]圆的异或并 圆的扫描线
地址:http://www.lydsy.com/JudgeOnline/problem.php?id=4561 题目: 4561: [JLoi2016]圆的异或并 Time Limit: 30 Sec ...
- java opencv使用相关
Using OpenCV Java with Eclipse http://docs.opencv.org/2.4/doc/tutorials/introduction/java_eclipse/ja ...
- uva1330 在一个大的矩阵中寻找面积最大的子矩阵
大白书 P50页 #include <algorithm> #include <cstdio> using namespace std; ; int ma[maxn][maxn ...
- Java设计模式应用——责任链模式
生产一个产品,需要依次执行多个步骤,才能完成,那么是使用责任链模式则是极好的. 在性能告警模块开发过程中,创建一条告警规则需要执行阈值解析,中间表生成,流任务生成,规则入库,告警事件入库等诸多操作.如 ...
- pythonl类继承例子
#coding=utf-8 class Person(object): def __init__(self,name,age): self.name=name sel ...
- scrapy运行方式
1,在cmd 命令行下执行 scrapy crawl demo (爬虫主逻辑的 name= 'demo '的名字) 2, 也可以在spider目录下添加一个py文件,加入以下代码 from scra ...