開始記錄...
1，我們的目錄結構大概是這樣：
Paste_Image.png
2，index.html文件內容，加載require庫文件，看到data-main沒有，那個就是我們整個JS邏輯的開始編寫地方，data-main后面的值一般都是省略.js后綴，可以也寫成main.js。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>requireJS使用說明書</title>
<script data-main="main" src="require.js"></script>
</head>
<body>
使用這個JS庫，讓模塊之間加載和調用更加明確。
1，data-main為函數入口
2，define定義模塊
3，通過return或者exports返回
4，require.config為配置選項
</body>
</html>
3，來瞅瞅main.js里的內容，具體看注釋，需要注意的是我們的返回值，思考一下為什么是對象。
//定義配置文件
requirejs.config({
//查找所有模塊的根路徑
baseUrl: './js',
//設置相對路徑,映射到不能直接在baseUrl下找到的模塊名
paths:{
"jquery":"lib/jquery",
"jquery-private":"lib/jquery-private"
},
//為那些沒有使用 define() 聲明依賴項、沒有設置模塊值,暴露出全局變量
shim:{
},
// 對于給定的相同的模塊名，加載不同的模塊，而不是加載相同的模塊。
map:{
'*': { 'jquery': 'jquery-private' },
'jquery-private': { 'jquery': 'jquery' }
}
});
//main文件為入口，也就是我們邏輯的開始地方
require(["a","b","c","d","e","f","jquery"], function(a,b,c,d,e,f,$) {
//a文件，返回一個對象
var Module_A = a;
console.log(Module_A.size);
//b文件，返回一個函數
var Module_B = b;
Module_B.sayB();
//c文件，依賴B文件，返回一個對象
var Module_C = c;
Module_C.sayC();
//d文件，引入其他的cmd規范文件，然后重新拼裝我們需要的
var Module_D = d;
Module_D();
//e文件，引入require，然后調用其他模塊
var Module_E = e;
console.log(Module_E.e);
//f文件，引入exports，不通過return返回
var Module_F = f;
console.log(Module_F.f.F);
//查看jQuery對象
console.dir($)
});
4，我們把這幾a,b,c,d,e,f里的JS文件內容粘出來看看
//a.js，很顯然返回了一個對象，鍵值對。
define({
color:"red",
size:12
});
//b.js，定義一個匿名函數(下面還有兩個)，這里隨便返回一個對象
define(function () {
var B = "我是B中的一個字符串變量";
function sayB(){
console.log("我是B模塊中的sayB方法");
}
return {
B:B,
sayB:sayB
}
});
//c.js，引入b文件依賴，然后隨便返回一個對象
define(["b"],function(b){
var B = b;
var C = "我是C的字符串變量";
return {
C:C,
sayC:B.sayB
}
});
//d.js，具體看匿名函數中的參數，把其他模塊弄進來在重新拼裝
define(function(require,exports,module){
var a = require("a");
var b = require("b");
return function(){
console.log(b.B);
};
});
//e.js，引入require，再調用其他define的模塊
define(function(require){
var a = require("a");
return {
e:a.color
}
});
//f.js，引入exprots模塊，這樣我們可以不用return進行返回了
define(['exports'],function(exports){
exports.f = {F:"我是F的字符串"};
});
5，對于那些不沖突(重名，不依賴)的庫，可以通過paths(配置選項里)直接定義，左邊名字:右邊路徑
6，對于依賴的需要在shim里進行重新暴露，eg:
shim: {
'backbone': {
//deps需要加載的依賴項的數組
deps: ['underscore', 'jquery'],
//導出名稱
exports: 'Backbone'
},
'underscore': {
exports: '_'
},
'foo': {
deps: ['bar'],
exports: 'Foo',
init: function (bar) {
return this.Foo.noConflict();
}
}
}
});
