CommonJS/AMD/CMD/UMD
为什么会有这几种模式?
起源:Javascript模块化
模块化就是把复杂问题分解成不同模块,这样可维护性高,从而达到高复用,低耦合。
1.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;
//require方法默认读取js文件,所以可以省略js后缀
var test = require('./boobar').foobar;
test.bar();
2.AMD和RequireJS
AMD是"Asynchronous Module Definition"的缩写,意思就是"异步模块定义".
AMD设计出一个简洁的写模块API:
define(id?, dependencies?, factory);
第一个参数 id 为字符串类型,表示了模块标识,为可选参数。若不存在则模块标识应该默认定义为在加载器中被请求脚本的标识。如果存在,那么模块标识必须为顶层的或者一个绝对的标识。
第二个参数,dependencies ,是一个当前模块依赖的,已被模块定义的模块标识的数组字面量。
第三个参数,factory,是一个需要进行实例化的函数或者一个对象。
• 定义无依赖的模块
define( {
add : function( x, y ){
return x + y ;
}
} );
• 定义有依赖的模块
define(["alpha"], function( alpha ){
return {
verb : function(){
return alpha.verb() + 1 ;
}
}
});
• 定义数据对象模块
define({
users: [],
members: []
});
• 具名模块
define("alpha", [ "require", "exports", "beta" ], function( require, exports, beta ){
export.verb = function(){
return beta.verb();
// or:
return require("beta").verb();
}
});
• 包装模块
define(function(require, exports, module) {
var a = require('a'),
b = require('b');
exports.action = function() {};
} );
不考虑多了一层函数外,格式和Node.js是一样的:使用require获取依赖模块,使用exports导出API。
除了define外,AMD还保留一个关键字require。require 作为规范保留的全局标识符,可以实现为 module loader,也可以不实现。
模块加载
require([module], callback)
AMD模块化规范中使用全局或局部的require函数实现加载一个或多个模块,所有模块加载完成之后的回调函数。
其中:
[module]:是一个数组,里面的成员就是要加载的模块;
callback:是模块加载完成之后的回调函数。
例如:加载一个math模块,然后调用方法 math.add(2, 3);
require(['math'], function(math) {
math.add(2, 3);
});
3.RequireJS
RequireJS 是一个前端的模块化管理的工具库,遵循AMD规范,它的作者就是AMD规范的创始人 James Burke。所以说RequireJS是对AMD规范的阐述一点也不为过。
RequireJS 的基本思想为:通过一个函数来将所有所需要的或者说所依赖的模块实现装载进来,然后返回一个新的函数(模块),我们所有的关于新模块的业务代码都在这个函数内部操作,其内部也可无限制的使用已经加载进来的以来的模块。
<script data-main='scripts/main' src='scripts/require.js'></script>
那么scripts下的main.js则是指定的主代码脚本文件,所有的依赖模块代码文件都将从该文件开始异步加载进入执行。
define用于定义模块,RequireJS要求每个模块均放在独立的文件之中。按照是否有依赖其他模块的情况分为独立模块和非独立模块。
• 独立模块,不依赖其他模块。直接定义:
define({
method1: function(){},
method2: function(){}
});
也等价于
define(function() {
return {
method1: function(){},
method2: function(){}
}
});
• 非独立模块,对其他模块有依赖。
define([ 'module1', 'module2' ], function(m1, m2) {
...
});
或者:define(function(require) {
var m1 = require('module1'),
m2 = require('module2');
...
});
简单看了一下RequireJS的实现方式,其 require 实现只不过是提取 require 之后的模块名,将其放入依赖关系之中。
• require方法调用模块
在require进行调用模块时,其参数与define类似。
require(['foo', 'bar'], function(foo, bar) {
foo.func();
bar.func();
} );
在加载 foo 与 bar 两个模块之后执行回调函数实现具体过程。
官网 (http://www.requirejs.org/)
API (http://www.requirejs.org/docs/api.html)
4.CMD和SeaJS
CMD是SeaJS 在推广过程中对模块定义的规范化产出
• 对于依赖的模块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都简单纯粹。
5. 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 …
});
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
// AMD
define(['jquery', 'underscore'], factory);
} else if (typeof exports === 'object') {
// Node, CommonJS之类的
module.exports = factory(require('jquery'), require('underscore'));
} else {
// 浏览器全局变量(root 即 window)
root.returnExports = factory(root.jQuery, root._);
}
}(this, function ($, _) {
// 方法
function a(){}; // 私有方法,因为它没被返回 (见下面)
function b(){}; // 公共方法,因为被返回了
function c(){}; // 公共方法,因为被返回了
// 暴露公共方法
return {
b: b,
c: c
}
}));
转载于:https://www.cnblogs.com/Super-scarlett/p/8260458.html
CommonJS/AMD/CMD/UMD相关推荐
- commonjs是什么_JavaScript模块化标准CommonJS/AMD/CMD/UMD/ES6Module的区别
JS-模块化进程 随着js技术的不断发展,途中会遇到各种问题,比如模块化. 那什么是模块化呢,他们的目的是什么? 定义:如何把一段代码封装成一个有用的单元,以及如何注册此模块的能力.输出的值依赖引用: ...
- 关于 CommonJS AMD CMD UMD 规范的差异总结
根据CommonJS规范,一个单独的文件就是一个模块.每一个模块都是一个单独的作用域,也就是说,在一个文件定义的变量(还包括函数和类),都是私有的,对其他文件是不可见的. // foo.js var ...
- 模块格式:CommonJS AMD CMD UMD ES6
皆为前端工程化中定义模块(module)的规则,如:模块标识,模块依赖,模块实现,模块对外接口,模块加载: 实现时有:异步,同步,依赖前置,依赖就近,预执行,懒执行,软依赖,硬依赖,模块对象支持类型等 ...
- CommonJS,AMD,CMD,ES6,require 和 import 详解
CommonJS,AMD,CMD,ES6 commonJS用同步的方式加载模块.在服务端,模块文件都存在本地磁盘,读取非常快,所以这样做不会有问题.但是在浏览器端,限于网络原因,更合理的方案是使用异步 ...
- JS JavaScript模块化(ES Module/CommonJS/AMD/CMD)
前言 前端开发中,起初只要在script标签中嵌入几十上百行代码就能实现一些基本的交互效果,后来js得到重视,应用也广泛起来了, jQuery,Ajax,Node.Js,MVC,MVVM等的助力也使得 ...
- 关于JavaScript的模块(CommonJS, AMD, CMD, ES6模块)的理解
Javascript模块化就是解决将代码进行分隔,作用域隔离,模块之间的依赖管理等多个方面问题. 这样的优点不言而喻:1.可维护性2.命名空间私有化,可以避免污染全局环境3.代码重用,通过模块可以方便 ...
- AMD, CMD, CommonJS和UMD
AMD, CMD, CommonJS和UMD 今天由于项目中引入的echarts的文件太大,requirejs经常加载超时,不得不分开来加载echarts的各个图表.但是使用echarts自带的在线构 ...
- 让你的插件兼容AMD, CMD ,CommonJS和 原生 JS
模块标准 // 支持AMD,CMD以及原生js的引用if (typeof module !== 'undefined' && typeof exports === 'object' & ...
- CommonJs, AMD/RequireJs,CMD/seajs
JavaSript模块化 在了解AMD,CMD规范前,还是需要先来简单地了解下什么是模块化,模块化开发? 模块化是指在解决某一个复杂问题或者一系列的杂糅问题时,依照一种分类的思维把问题进行系统性的分解 ...
最新文章
- python程序员最害怕的东西,面试!恭喜你收到了offer,来看下吧
- SCImago Journal Rank:微生物领域期刊综合评价指标排名
- 3.2.5 四则运算的例子
- python安装pyinstaller库_python pyinstaller安装
- python matplotlib数据可视化教程_Python使用matplotlib实现数据可视化教程
- visual studio 2008试用版的评估期29天后结束 解决办法
- 阶段3 1.Mybatis_03.自定义Mybatis框架_3.自定义mybatis的编码-根据测试类中缺少的创建接口和类...
- Every cloud has a silver lining
- 阿里云云计算助理工程师认证(ACA)50个资源合集和备考题库
- (转载)Tuxedo中间件简介
- java实现远程控制应用
- 2019 SWERC
- 【Arduino IDE 2.0他来了】
- Shell之判断周几
- 在kitti数据集与nsh_indoor_outdoor.bag,自己数据集(RS_16)上运行LeGo-LOAM
- Mac 有Alt 键吗?Alt 或 Option 键在 Mac 键盘上的作用是什么
- 台式电脑脑计算机没法启动怎么办,台式机主机电源灯不亮,开不了机怎么办? 台式电脑无法开机什么原因...
- android闪存软件测试,谷歌商店上架一款软件:专门测试华为P10闪存,一秒出结果...
- 删除插件mysearchresult(chrome和firebox)
- Android中的优化问题
热门文章
- android studio如何生成混淆代码的jar
- android 使用photoshop 裁剪图片
- android 解决getColor()方法过时
- 【Node】模块加载过程
- C++强制类型转换:dynamic_cast、const_cast 、static_cast、reinterpret_cast
- Pytorch自定义Dataset和DataLoader去除不存在和空的数据
- (三)通用视图(generic views)
- 「PKUWC2018」随机游走
- DNA甲基化检测服务
- fiddler抓取火狐浏览器上https协议请求