開(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();
}
}
}
});
