開(kāi)始記錄...
1黍檩，我們的目錄結(jié)構(gòu)大概是這樣：
Paste_Image.png
2估蹄，index.html文件內(nèi)容颂碧，加載require庫(kù)文件，看到data-main沒(méi)有类浪，那個(gè)就是我們整個(gè)JS邏輯的開(kāi)始編寫(xiě)地方载城，data-main后面的值一般都是省略.js后綴，可以也寫(xiě)成main.js费就。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>requireJS使用說(shuō)明書(shū)</title>
<script data-main="main" src="require.js"></script>
</head>
<body>
使用這個(gè)JS庫(kù)诉瓦，讓模塊之間加載和調(diào)用更加明確。
1力细，data-main為函數(shù)入口
2睬澡，define定義模塊
3，通過(guò)return或者exports返回
4眠蚂，require.config為配置選項(xiàng)
</body>
</html>
3煞聪，來(lái)瞅瞅main.js里的內(nèi)容，具體看注釋?zhuān)枰⒁獾氖俏覀兊姆祷刂凳呕郏伎家幌聻槭裁词菍?duì)象昔脯。
//定義配置文件
requirejs.config({
//查找所有模塊的根路徑
baseUrl: './js',
//設(shè)置相對(duì)路徑,映射到不能直接在baseUrl下找到的模塊名
paths:{
"jquery":"lib/jquery",
"jquery-private":"lib/jquery-private"
},
//為那些沒(méi)有使用 define() 聲明依賴(lài)項(xiàng)、沒(méi)有設(shè)置模塊值,暴露出全局變量
shim:{
},
// 對(duì)于給定的相同的模塊名笛臣，加載不同的模塊云稚，而不是加載相同的模塊。
map:{
'*': { 'jquery': 'jquery-private' },
'jquery-private': { 'jquery': 'jquery' }
}
});
//main文件為入口捐祠，也就是我們邏輯的開(kāi)始地方
require(["a","b","c","d","e","f","jquery"], function(a,b,c,d,e,f,$) {
//a文件碱鳞，返回一個(gè)對(duì)象
var Module_A = a;
console.log(Module_A.size);
//b文件，返回一個(gè)函數(shù)
var Module_B = b;
Module_B.sayB();
//c文件踱蛀，依賴(lài)B文件窿给，返回一個(gè)對(duì)象
var Module_C = c;
Module_C.sayC();
//d文件，引入其他的cmd規(guī)范文件率拒，然后重新拼裝我們需要的
var Module_D = d;
Module_D();
//e文件崩泡，引入require，然后調(diào)用其他模塊
var Module_E = e;
console.log(Module_E.e);
//f文件猬膨，引入exports角撞，不通過(guò)return返回
var Module_F = f;
console.log(Module_F.f.F);
//查看jQuery對(duì)象
console.dir($)
});
4，我們把這幾a,b,c,d,e,f里的JS文件內(nèi)容粘出來(lái)看看
//a.js勃痴，很顯然返回了一個(gè)對(duì)象谒所，鍵值對(duì)。
define({
color:"red",
size:12
});
//b.js沛申，定義一個(gè)匿名函數(shù)(下面還有兩個(gè))劣领，這里隨便返回一個(gè)對(duì)象
define(function () {
var B = "我是B中的一個(gè)字符串變量";
function sayB(){
console.log("我是B模塊中的sayB方法");
}
return {
B:B,
sayB:sayB
}
});
//c.js，引入b文件依賴(lài)铁材，然后隨便返回一個(gè)對(duì)象
define(["b"],function(b){
var B = b;
var C = "我是C的字符串變量";
return {
C:C,
sayC:B.sayB
}
});
//d.js尖淘，具體看匿名函數(shù)中的參數(shù)奕锌，把其他模塊弄進(jìn)來(lái)在重新拼裝
define(function(require,exports,module){
var a = require("a");
var b = require("b");
return function(){
console.log(b.B);
};
});
//e.js，引入require村生，再調(diào)用其他define的模塊
define(function(require){
var a = require("a");
return {
e:a.color
}
});
//f.js惊暴，引入exprots模塊，這樣我們可以不用return進(jìn)行返回了
define(['exports'],function(exports){
exports.f = {F:"我是F的字符串"};
});
5趁桃，對(duì)于那些不沖突(重名辽话，不依賴(lài))的庫(kù)，可以通過(guò)paths(配置選項(xiàng)里)直接定義卫病，左邊名字:右邊路徑
6屡穗，對(duì)于依賴(lài)的需要在shim里進(jìn)行重新暴露，eg:
shim: {
'backbone': {
//deps需要加載的依賴(lài)項(xiàng)的數(shù)組
deps: ['underscore', 'jquery'],
//導(dǎo)出名稱(chēng)
exports: 'Backbone'
},
'underscore': {
exports: '_'
},
'foo': {
deps: ['bar'],
exports: 'Foo',
init: function (bar) {
return this.Foo.noConflict();
}
}
}
});
