Javascript模块化编程之CommonJS,AMD,CMD,UMD模块加载规范详解
JavaSript模块化
在了解AMD,CMD规范前,还是需要先来简单地了解下什么是模块化,模块化开发?
AMD 与 RequireJS
AMD
define( id?, dependencies?, factory );
1
2
3
4
5
6
7
|
define( "alpha" , [ "require" , "exports" , "beta" ], function ( require, exports, beta ){ export .verb = function (){ return beta.verb(); // or: return require( "beta" ).verb(); } }); |
1
2
3
4
5
6
7
|
define([ "alpha" ], function ( alpha ){ return { verb : function (){ return alpha.verb() + 1 ; } } }); |
1
2
3
4
5
|
define( { add : function ( x, y ){ return x + y ; } } ); |
1
2
3
4
5
6
|
define( function ( require, exports, module){ var a = require( 'a' ), b = require( 'b' ); exports.action = function (){}; } ); |
require();
局部 与 全局 的require
1
2
3
4
5
6
7
|
define( [ 'require' ], function ( require ){ // ... } ); or: define( function ( require, exports, module ){ // ... } ); |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
require(String) define( function ( require ){ var a = require( 'a' ); // 加载模块a } ); require(Array, Function) define( function ( require ){ require( [ 'a' , 'b' ], function ( a,b ){ // 加载模块a b 使用 // 依赖 a b 模块的运行代码 } ); } ); require.toUrl( Url ) define( function ( require ){ var temp = require.toUrl( './temp/a.html' ); // 加载页面 } ); |
RequireJS
1
|
<script data-main= 'scripts/main' src= 'scripts/require.js' ></script> |
1
2
3
4
|
define({ method1: function (){}, method2: function (){} }); |
1
2
3
4
5
6
|
define( function (){ return { method1: function (){}, method2: function (){} } }); |
1
2
3
|
define([ 'module1' , 'module2' ], function (m1, m2){ ... }); |
1
2
3
4
5
|
define( function ( require ){ var m1 = require( 'module1' ), m2 = require( 'module2' ); ... }); |
1
2
3
4
|
require( [ 'foo' , 'bar' ], function ( foo, bar ){ foo.func(); bar.func(); } ); |
1
2
3
4
5
|
define( function ( require ){ var m1 = require( 'module1' ), m2 = require( 'module2' ); ... }); |
CMD 与 seaJS
CMD
1
|
define({ "foo" : "bar" }); |
1
|
define( 'this is {{data}}.' ); |
1
2
3
|
define( 'module' , [ 'module1' , 'module2' ], function ( require, exports, module ){ // 模块代码 } ); |
1
2
3
4
|
define( function ( require, exports ){ var a = require( './a' ); a.doSomething(); }); |
1
2
3
4
5
|
define( function (require, exports, module) { require.async( '.a' , function (a){ a.doSomething(); }); }); |
1
2
3
4
|
define( function ( require, exports ){ exports.foo = 'bar' ; // 向外提供的属性 exports. do = function (){}; // 向外提供的方法 }); |
1
2
3
4
5
6
|
define( function ( require, exports ){ return { foo : 'bar' , // 向外提供的属性 do : function (){} // 向外提供的方法 } }); |
1
2
3
4
|
define({ foo : 'bar' , // 向外提供的属性 do : function (){} // 向外提供的方法 }); |
1
2
3
4
5
6
|
define( function ( require, exports ){ exports = { foo : 'bar' , // 向外提供的属性 do : function (){} // 向外提供的方法 } }); |
1
2
3
4
5
6
|
define( function ( require, exports, module ){ module.exports = { foo : 'bar' , // 向外提供的属性 do : function (){} // 向外提供的方法 } }); |
seaJS
1
2
3
4
5
6
7
8
9
10
11
|
// 加载一个模块 seajs.use( './a' ); // 加载模块,加载完成时执行回调 seajs.use( './a' , function (a){ a.doSomething(); }); // 加载多个模块执行回调 seajs.use([ './a' , './b' ], function (a , b){ a.doSomething(); b.doSomething(); }); |
AMD 与 CMD 区别到底在哪里?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
// CMD define( function (require, exports, module) { var a = require( './a' ) a.doSomething() // 此处略去 100 行 var b = require( './b' ) // 依赖可以就近书写 b.doSomething() // ... }) // AMD 默认推荐的是 define([ './a' , './b' ], function (a, b) { // 依赖必须一开始就写好 a.doSomething() // 此处略去 100 行 b.doSomething() // ... }) |
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 ...
});
总结
amdjs 的 require 接口文档 https://github.com/amdjs/amdjs-api/wiki/require
amdjs 的接口文档 https://github.com/amdjs/amdjs-api/wiki
RequireJS和AMD规范 http://javascript.ruanyifeng.com/tool/requirejs.html
知乎 AMD 和 CMD 的区别有哪些? http://www.zhihu.com/question/20351507
JavaScript模块化开发 - AMD规范 http://www.feeldesignstudio.com/2013/09/javascript-module-pattern-amd
模块化设计 http://baike.baidu.com/view/189730.htm
模块化 http://baike.baidu.com/view/182267.htm
Javascript模块化编程之CommonJS,AMD,CMD,UMD模块加载规范详解的更多相关文章
- JavaScript模块化CommonJS/AMD/CMD/UMD/ES6Module的区别
目录 JS-模块化进程 原始的开发方式 CommonJS && node.js AMD && Require.js CMD && Sea.js UMD ...
- JavaScript模块化编程之AMD - requireJS基础使用
JavaScript模块化编程之AMD requireJS基础使用 标签(空格分隔): JavaScript 参考文章 AMD规范 AMD是"Asynchronous Module Defi ...
- 前端模块化小总结—commonJs,AMD,CMD, ES6 的Module
随着前端快速发展,需要使用javascript处理越来越多的事情,不在局限页面的交互,项目的需求越来越多,更多的逻辑需要在前端完成,这时需要一种新的模式 --模块化编程 模块化的理解:模块化是一种处理 ...
- js模块化编程之CommonJS和AMD/CMD
js模块化编程commonjs.AMD/CMD与ES6模块规范 一.CommonJS commonjs的require是运行时同步加载,es6的import是静态分析,是在编译时而不是在代码运行时.C ...
- JavaScript模块化演变 CommonJs,AMD, CMD, UMD(一)
原文链接:https://www.jianshu.com/p/33d53cce8237 原文系列2链接:https://www.jianshu.com/p/ad427d8879cb 前端完全手册: h ...
- js模块化编程之CommonJS和AMD/CMD!
有了模块,我们就可以更方便地使用别人的代码,想要什么功能,就加载什么模块. 但是,这样做有一个前提,那就是大家必须以同样的方式编写模块,否则你有你的写法,我有我的写法,岂不是乱了套! 于是下面三个模块 ...
- JavaScript模块化编程之AMD
简单的说一下AMD是"Asynchronous Module Definition"的缩写,意思就是"异步模块定义".它采用异步方式加载模块,模块的加载不影响它 ...
- CommonJS/AMD/CMD/UMD
为什么会有这几种模式? 起源:Javascript模块化 模块化就是把复杂问题分解成不同模块,这样可维护性高,从而达到高复用,低耦合. 1.Commonjs CommonJS是服务器端模块的规范,No ...
- 关于 CommonJS AMD CMD UMD 规范的差异总结
一.CommonJS 主要是用于服务器端的规范,比如目前的nodeJS. 根据CommonJS规范,一个单独的文件就是一个模块.每一个模块都是一个单独的作用域,也就是说,在一个文件定义的变量(还包括函 ...
随机推荐
- 机器学习作业(一)线性回归——Python(numpy)实现
题目太长啦!文档下载[传送门] 第1题 简述:设计一个5*5的单位矩阵. import numpy as np A = np.eye(5) print(A) 运行结果: 第2题 简述:实现单变量线性回 ...
- execute、executeUpdate、executeQuery的区别
链接:https://blog.csdn.net/u012501054/article/details/80323176 链接:https://blog.csdn.net/CNAHYZ/article ...
- robotframework常见报错记录
1.'Response' object has no attribute '__getitem__':'Response'对象没有属性' getitem__' response对象的属性r.statu ...
- SpringCloud Netflix Zuul
网关的概念 服务A.B都是暴露出来,供外部直接调用的, 有时候需要对请求进行过滤.校验,比如检验用户是否已登陆,可以写在暴露出来的每个服务中,但要在多个服务中写相同的代码,太繁琐,可以提出来,放在网关 ...
- Java上转型和下转型
Java 转型问题其实并不复杂,只要记住一句话:父类引用指向子类对象. 什么叫父类引用指向子类对象,且听我慢慢道来. 从2个名词开始说起:向上转型(upcasting) .向下转型(downcasti ...
- Execl导出系统
前台代码: <button class="btn btn-warning" type="button" onclick="location.hr ...
- Mahmoud and Ehab and the message
Mahmoud wants to send a message to his friend Ehab. Their language consists of n words numbered from ...
- Jquery插件 之 zTree树加载
原文链接:https://blog.csdn.net/jiaqu2177/article/details/80626730 zTree树加载 zTree 是一个依靠 jQuery 实现的多功能 “树插 ...
- <img src = "..."/>的一个图片上面怎么在放上字
转自:https://zhidao.baidu.com/question/1495805873400412779.html 例子1: html中可以用css相对定位让文字在图片的上面. 1.新建htm ...
- ubuntu 离线装包
1,为什么要离线装包 防止有些包官方升级以后导致的不兼容,比如php5和php7,目前已经无法apt-get install php5了, 2,装包以前你得有安装包文件,deb或者是run deb包在 ...