1.AMD规范
（1）define 定义模块
（一）define 定义独立模块
如果被定义的模块是一个独立模块，不需要依赖任何其他模块，可以直接用define方法生成。
define({ method1: function() {}, method2: function() {}, });
上面代码生成了一个拥有method1、method2两个方法的模块。
另一种等价的写法是，把对象写成一个函数，该函数的返回值就是输出的模块。
define(function () {
return {
method1: function() {},
method2: function() {},
};
});
(二）非独立模块
如果被定义的模块需要依赖其他模块，则define方法必须采用下面的格式。
define(['module1', 'module2'], function(m1, m2) { ... });
以上参考 RequireJS和AMD规范
2.requireJS config 方法
**（1）paths **
paths参数指定各个模块的位置。这个位置可以是同一个服务器上的相对位置，也可以是外部网址。可以为每个模块定义多个位置，如果第一个位置加载失败，则加载第二个位置，上面的示例就表示如果CDN加载失败，则加载服务器上的备用脚本。需要注意的是，指定本地文件路径时，可以省略文件最后的js后缀名。
**（2）baseUrl **
baseUrl参数指定本地模块位置的基准目录，即本地模块的路径是相对于哪个目录的。该属性通常由require.js加载时的data-main属性指定。
（3）shim
有些库不是AMD兼容的，这时就需要指定shim属性的值。shim可以理解成“垫片”，用来帮助require.js加载非AMD规范的库。
3.shim 加载非AMD模块
（1）形式1
** b.js**
var hello = function () {//
console.log('hello 1');//
};
hello 为b1.js 暴露的全局变量
main.js
require.config({
baseUrl:'js/',
shim:{
'b':{
exports:'hello', //hello 与b中暴露的全局变量一致
deps:['math']
}
},
paths:{
"a":"a",
'jquery':'jquery-3.1.0.min',
'math':'math'
},
})
require(['jquery',"a"],function ($) {
$(function () { alert('load finished');
})
});
a.js 依赖于b1.js(即a.js 中调用b.js 的函数)
a.js
define(['b'], function(b){
function fun1(){
b();
console.log(b);
};
fun1();
})；
输出结果
浏览控制台输出：
1
function () {//
console.log('hello 1');//
}
（2）形式2
b.js
var Bobj = (function () {
var name = 'scarlet';
var hello = function () {
console.log('hello '+name);
}
return{
hello:hello
}
})();
main.js
require.config({
baseUrl:'js/',
shim:{
'b':{
exports:'Bobj',//Bobj 于b.js 暴露的全局变量名一致
deps:['math']
} },
paths:{
"a":"a",
'jquery':'jquery-3.1.0.min',
'math':'math' },})
require(['jquery',"a"],function ($) {
$(function () {
alert('load finished');
})});
a.js
define(['b'],
function(b){
function fun1(){
b.hello(); //b;
console.log(b);
};
fun1();
})
控制台输出
....
hello scarlet
Object
(3)形式3
b.js
var hello3 = function () {
console.log('hello 3');
}();
main.js
require.config({
baseUrl:'js/',
shim:{
'b':{
exports:'hello3',
deps:['math']
}
},
paths:{
"a":"a",
'jquery':'jquery-3.1.0.min',
'math':'math'
},})
require(['jquery',"a"],function ($) {
$(function () {
alert('load finished');
})});
a.js
define(['b'], function(b){
function fun1(){
b;
console.log(b);
};
fun1();
})
控制台输出
hello 3
undefined
总结：
exports :是指引用的js文件暴露的全局变量。也是外部js引用是使用的变量（可能是函数，也可能是对象）。
4.依赖（例如 b.js 依赖 math.js ）
b.js 是非AMD规范的js ，math.js 是自定义的AMD规范的js。b.js 依赖于math.js (b.js 的hello 函数调用 math.js 的rev函数)
b.js
var Bobj = (function () {
var name = 'scarlet';
var hello = function (math) {
console.log("b.js ___________start");
console.log('hello '+name);
console.log(math.rev(name+' hello'));
console.log("b.js ____________finshed");
}
return{
hello:hello
}
})();
math.js
define(function () {
var add = function (a,b) {
return a+b;
}
var sub = function (a,b) {
return a-b;
};
var rev= function (str) {
var revS = "";
for(var i = str.length-1;i >=0;i--){
revS +=str[i];
}
return revS;
};
return {
add:add,
sub:sub,
rev:rev
};
})
main.js
/** * Created by lxy_920912 on 16/9/8. */
require.config({
baseUrl:'js/',
shim:{
'b':{
exports:'Bobj',
deps:['math']
}
},
paths:{
"a":"a",
'c':'c',
'jquery':'jquery-3.1.0.min',
'math':'math'
},
})
require(['jquery',"a",'c','math','b'],function ($,a,c,math,b) {
$(function () {
a.fun1();
c.fun1();
a.fun3(c);
alert('load finished');
b.hello(math)
})
});
5循环依赖
a.js 依赖于c.js ,c.js 依赖于 a.js.
(a.js 的fun3 调用c.js 的fun1,c.js 的fun1 调用a.js 的fun1)
a.js
define(['jquery','math','text!input.txt','b','require','c'], function($,math,input,b,c){
var fun1 = function (){
console.log('_______________a fun1__________________________');
console.log("add: "+math.add("hello "," scarlet")+"\n sub: "+math.sub(5,23));
console.log(math.rev('ABCDEFG'));
b.hello();
console.log('_______________a fun1 finished__________________________'); };
var fun2 = function fun2(input) {
var ptext =document.createTextNode(input) ;
document.body.appendChild(ptext);
//require('c').fun1();
console.log('a fun2 finished'); };
var fun3 = function (c) {
console.log('a fun3______________')
//var c = require('c');
c.fun1();
console.log('a fun3 finished_______');
}
fun2(input);
return {
fun1:fun1,
fun2:fun2,
fun3:fun3
}
})
c.js
define(['require','a'],function (require,a) {
var fun1 = function fun1() {
require("a").fun1();
console.log('c fun1 finished');
}
return {
fun1:fun1
}
})
main.js
require.config({
baseUrl:'js/',
shim:{
'b':{
exports:'Bobj',
deps:['math']
} },
paths:{
"a":"a",
'c':'c',
'jquery':'jquery-3.1.0.min',
'math':'math'
},})
require(['jquery',"a",'c','math','b'],function ($,a,c,b) {
$(function () {
a.fun1();
c.fun1();
a.fun3(c);
alert('load finished');
})
});
如果你定义一个循环依赖关系 (a 依赖c 并且 c 依赖 a)，那么当c的模块构造函数被调用的时候，传递给他的a会是undefined。 但是c可以在a模块在被引入之后通过require(‘a’)来获取a (一定要把require作为依赖模块，RequireJS才会使用正确的 context 去查找 a):
‘
’