html5读取umd,UMD、CommonJS、ES Module、AMD、CMD模块的写法

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');

}