JS 3种规范 CommonJS AMD UMD
标签(空格分隔): CommonJS AMD UMD
参考文章:
1.commonJS、AMD、UMD 快速概览
: http://web.jobbole.com/82238/
2.详解
commonJS、AMD、UMD : http://www.cnblogs.com/chenguangliang/p/5856701.html
3.AMD编译
过程讲解: http://web.jobbole.com/85382/?utm_source=blog.jobbole.com&utm_medium=relatedPosts
1.CommonJS (nodejs 模块规范实现)
写法:require(‘xxx’) // 同步加载模块
分析
:
a.对服务器端几乎不影响,因为是读取本地文件
b.对前端浏览器使用有影响,需要等待网络时间来导入包
优缺点
:
优点:规范后端编程规范和包管理
缺点:同步加载模块,对前端的时间响应有影响
commonJS 如何使用?
cmd 导出包:
var xxx = {}
module.exports = xxx
cmd 引入包:
var xxx = require('xxx')
2.AMD (Asynchronous Module Definition)
写法:define([‘a’,’b’],function(a,b){}) // 异步代码,适用于前端和后端
第三方库:
主要有两个Javascript库实现了AMD规范:require.js
和 curl.js
。
require 如何使用?
配置
require.config({
baseUrl: "js/lib",
paths: {
"jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min",
"underscore": "underscore.min",
"backbone": "backbone.min"
}
});
AMD 如何使用?
AMD导出包:
返回的是一个对象
// math.js
define(function (){
var add = function (x,y){
return x+y;
};
return {
add: add
};
});
// main.js
//如果依赖其他包,依赖包参数必须是 **数组**:
define(['otherLib'], function(otherLib){
function foo(){
myLib.doSomething();
}
return {
foo : foo
};
});
AMD引用包:
require(['math'], function (math){
alert(math.add(1,1));
});
3.UMD (同时支持上述两种规范)
用法:(function(root,fn){}(this,fn))
例子:
(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
}
}));