AMD异步模块规范
RequireJS就是AMD的一个典型的实现。
以下是一个只依赖与jQuery的模块代码:
// foo.js
define(['jquery'], function($){
function myFunc(){};
// 暴露公共方法
return myFunc;
})
1
2
3
4
5
6
7
8
9
10
// foo.js
define(['jquery'],function($){
functionmyFunc(){};
// 暴露公共方法
returnmyFunc;
})
define(['jquery', 'underscore'], function($, _){
function a(){}; // 私有方法,没有被返回
function b(){};
function c(){};
// 暴露公共方法
return {
b: b,
c: c
}
})
1
2
3
4
5
6
7
8
9
10
11
12
define(['jquery','underscore'],function($,_){
functiona(){};// 私有方法,没有被返回
functionb(){};
functionc(){};
// 暴露公共方法
return{
b:b,
c:c
}
})
CMD (Common Module Definition)
define(function(require, exports, module) {
var a = require('./a')
var b = require('./b') // 依赖可以就近书写
// 通过 exports 对外提供接口
exports.doSomething = function(){}
// 或者通过 module.exports 提供整个接口
module.exports = {}
})
1
2
3
4
5
6
7
8
9
10
11
define(function(require,exports,module){
vara=require('./a')
varb=require('./b')// 依赖可以就近书写
// 通过 exports 对外提供接口
exports.doSomething=function(){}
// 或者通过 module.exports 提供整个接口
module.exports={}
})
seajs.use('dialog', function(Dialog) {
Dialog.init(/* 传入配置 */);
});
1
2
3
4
5
6
7
seajs.use('dialog',function(Dialog){
Dialog.init(/* 传入配置 */);
});
Sea.js 还提供了 nocache、debug 等插件,拥有在线调试等功能,能比较明显地提升效率。
Sea.js 还提供了 combo、flush 等插件,配合服务端,可以很好地对页面性能进行调优。
CMD 模块定义规范与 Node.js 的模块规范非常相近。通过 Sea.js 的 Node.js 版本,可以很方便实现模块的跨服务器和浏览器共享。
CommonJS
与node.js的格式非常相似。可配合Browserify进行使用。
Browserify 可以让你使用类似于 node 的 require() 的方式来组织浏览器端的 Javascript 代码,通过预编译让前端 Javascript 可以直接使用 Node NPM 安装的一些库。
// foo.js
var $ = require('jquery');
function myFunc(){};
module.exports = myFunc;
1
2
3
4
5
6
7
// foo.js
var$=require('jquery');
functionmyFunc(){};
module.exports=myFunc;
var $ = require('jquery');
var _ = require('underscore');
function a(){}; // 私有
function b(){};
function c(){};
module.exports = {
b: b,
c: c
}
1
2
3
4
5
6
7
8
9
10
11
12
var$=require('jquery');
var_=require('underscore');
functiona(){};// 私有
functionb(){};
functionc(){};
module.exports={
b:b,
c:c
}
UMD通用模块规范
由于CommonJS和AMD都十分流行,但似乎缺少一个统一的规范。于是,UMD(通用模块规范)出现了,它可以同时支持这两种风格。
虽然这个模式的写法比较难看,但是,它同时兼容了AMD和CommonJS,而且还支持老式的全局变量规范。
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
// AMD
define(['jquery'], factory);
} else if (typeof exports === 'object') {
// Node, CommonJS之类的
module.exports = factory(require('jquery'));
} else {
// 浏览器全局变量(root 即 window)
root.returnExports = factory(root.jQuery);
}
}(this, function ($) {
// 方法
function myFunc(){};
// 暴露公共方法
return myFunc;
}));
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
(function(root,factory){
if(typeofdefine==='function'&&define.amd){
// AMD
define(['jquery'],factory);
}elseif(typeofexports==='object'){
// Node, CommonJS之类的
module.exports=factory(require('jquery'));
}else{
// 浏览器全局变量(root 即 window)
root.returnExports=factory(root.jQuery);
}
}(this,function($){
// 方法
functionmyFunc(){};
// 暴露公共方法
returnmyFunc;
}));
ES Module
// profile.js
export var firstName = 'Michael';
export var lastName = 'Jackson';
export var year = 1958;
1
2
3
4
5
// profile.js
exportvarfirstName='Michael';
exportvarlastName='Jackson';
exportvaryear=1958;
// profile.js
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;
export {firstName, lastName, year};
1
2
3
4
5
6
7
// profile.js
varfirstName='Michael';
varlastName='Jackson';
varyear=1958;
export{firstName,lastName,year};
// main.js
import {firstName, lastName, year} from './profile';
function setName(element) {
element.textContent = firstName + ' ' + lastName;
}
1
2
3
4
5
6
7
// main.js
import{firstName,lastName,year}from'./profile';
functionsetName(element){
element.textContent=firstName+' '+lastName;
}
// circle.js
export function area(radius) {
return Math.PI * radius * radius;
}
export function circumference(radius) {
return 2 * Math.PI * radius;
}
1
2
3
4
5
6
7
8
9
// circle.js
exportfunctionarea(radius){
returnMath.PI*radius*radius;
}
exportfunctioncircumference(radius){
return2*Math.PI*radius;
}
import * as circle from './circle';
console.log('圆面积:' + circle.area(4));
console.log('圆周长:' + circle.circumference(14));
1
2
3
4
5
import*ascirclefrom'./circle';
console.log('圆面积:'+circle.area(4));
console.log('圆周长:'+circle.circumference(14));
// export-default.js
export default function () {
console.log('foo');
}
1
2
3
4
5
// export-default.js
exportdefaultfunction(){
console.log('foo');
}