CommonJS定义的模块分为3部分:jquery
require
模块引用浏览器
exports
模块导出异步
module
模块自己函数
根据CommonJS规范,一个单独的文件就是一个模块
。每个模块都是一个单独的做用域,也就是说,在一个文件定义的变量(还包括函数和类),都是私有的,对其余文件是不可见的ui
// a.js var a = { "a":a, "b":b } module.export = a //模块导出 // b.js var b = require('./a.js') //模块引入
CommonJS 加载模块是同步
的,因此只有加载完成才能执行后面的操做this
AMD 加载模块是异步
的code
define(id?, dependencies?, factory);对象
id: 模块标识,能够省略。 dependencies: 所依赖的模块,能够省略。 factory: 模块的实现,或者一个JavaScript对象。
//a.js 只有factory define(function() { return { mix: function(source, target) { ... } }; }); //b.js 依赖a.js define(['a'], function(a) { return { show: function() { ... } } }); //c.js 依赖a.js b.js define(['a', 'b'], function(a, b) { .... }); //d.js 对象模块 define({ data1: [], data2: [] });
AMD规范容许输出模块兼容CommonJS规范,这时define方法以下:ip
define(function (require, exports, module) { var reqModule = require("./a.js"); requModule.mix(); exports.asplode = function () { ... } });
CMD和AMD的区别有如下几点:ci
对于依赖的模块AMD是提早执行
,CMD是延迟执行。不过RequireJS从2.0开始,也改为能够延迟执行(根据写法不一样,处理方式不经过)
CMD推崇依赖就近
,AMD推崇依赖前置
//AMD写法 define(['./a','./b'], function (a, b) { //依赖一开始就写好 a.mix(); b.show(); }); //CMD写法 define(function (requie, exports, module) { //依赖能够就近书写 var a = require('./a'); a.mix(); if (...) { var b = requie('./b'); b.show(); } });
(function (root, factory) { if (typeof define === 'function' && define.amd) { // AMD define(['jquery'], factory); } else if (typeof exports === 'object') { // Node, CommonJS-like module.exports = factory(require('jquery')); } else { // Browser globals (root is window) root.returnExports = factory(root.jQuery); } }(this, function ($) { // methods function myFunc(){}; // exposed public method return myFunc; }));
应用UMD规范的js文件其实就是一个当即执行函数。函数有两个参数,第一个参数是当前运行时环境,第二个参数是模块的定义体。在执行UMD规范时,会优先判断
是当前环境是否支持AMD
环境,而后再检验是否支持CommonJS
环境,不然认为当前环境为浏览器环境( window
)