1： 為什么要使用模塊化？
解決命名沖突把曼；
方便依賴性管理；
提高代碼的維護(hù)性和可讀性漓穿；
每個(gè)模塊都是單獨(dú)文件嗤军，解耦提高代碼復(fù)用性；
- 模塊的由來：
隨著網(wǎng)站逐漸的發(fā)展晃危，嵌入網(wǎng)頁的Javascript代碼越來越龐大叙赚，而網(wǎng)頁越來越像桌面程序，需要一個(gè)團(tuán)隊(duì)去分工協(xié)作僚饭，進(jìn)行管理和測試等等震叮，為了更好的管理網(wǎng)頁的業(yè)務(wù)邏輯，產(chǎn)生了模塊化編程的理念浪慌。
- 模塊的定義：
模塊就是實(shí)現(xiàn)特定功能的相互獨(dú)立的一組方法冤荆。 - 模塊的意義：
有了模塊，我們能更好的管理網(wǎng)頁的業(yè)務(wù)邏輯权纤，以及按照自己的需求去使用各種模塊钓简，并且可以讓每個(gè)開發(fā)者都能設(shè)計(jì)自己想要的模塊以及去使用別人的模塊代碼。
2： CMD汹想、AMD外邓、CommonJS 規(guī)范分別指什么？有哪些應(yīng)用
- CommonJS：
CommonJS是服務(wù)器模塊的規(guī)范, Node.js采用了這個(gè)規(guī)范. 根據(jù)CommonJS規(guī)范, 一個(gè)單獨(dú)的文件就是一個(gè)模塊, 每一個(gè)模塊都是一個(gè)單獨(dú)的作用域, 在一個(gè)文件定義的變量(還包括函數(shù)和類), 都是私有的, 對其他文件是不可見的古掏；通過require來加載模塊损话；通過modul.exports來暴露模塊中的內(nèi)容；
CommonJS規(guī)范加載模塊是同步的, 也就是說, 只有加載完成后, 才能執(zhí)行后面的操作. - AMD
AMD 即Asynchronous Module Definition槽唾，中文名是“異步模塊定義”的意思丧枪。它是一個(gè)在瀏覽器端模塊化開發(fā)的規(guī)范
模塊將被異步加載，模塊加載不影響后面語句的運(yùn)行庞萍。所有依賴某些模塊的語句均放置在回調(diào)函數(shù)中拧烦。
AMD 是 RequireJS 在推廣過程中對模塊定義的規(guī)范化的產(chǎn)出。
AMD規(guī)范其實(shí)只有一個(gè)主要接口 define(id,dependencies,factory)钝计，它要在聲明模塊的時(shí)候指定所有的依賴dependencies恋博，并且還要當(dāng)做形參傳到factory中齐佳，對于依賴的模塊提前執(zhí)行，依賴前置债沮。 - CMD
CMD 即Common Module Definition通用模塊定義炼吴，是sea.js在推廣過程中對模塊定義的規(guī)范化產(chǎn)出。SeaJS要解決的問題和requireJS一樣疫衩，只不過在模塊定義方式和模塊加載時(shí)機(jī)上有所不同硅蹦。CMD是按需加載依賴就近,只有在用到某個(gè)模塊的時(shí)候再去require，AMD是依賴關(guān)系前置,在定義模塊的時(shí)候就要聲明其依賴的模塊
//AMD 規(guī)范
/**
* define(id?, dependencies?, factory);
*
* define(['dep1', 'dep2'], function(dep1, dep2){
* return funciton() {};
* });
*/
define(['./a', './b'], function(a, b) { // 依賴必須一開始就寫好
a.doSomething()
....
b.doSomething()
...
})
define(function () {
var exports = {};
exprots.sayHello = function () {
alert('Hello from module:' + module.id);
};
return exports;
});
**************************************************************************
//CMD 規(guī)范
/**
* define(function(require, exports, module){
* return funciton() {};
* });
* require是可以把其他模塊導(dǎo)入進(jìn)來的一個(gè)參數(shù);
* exports可以把模塊內(nèi)的一些屬性和方法導(dǎo)出;
* module 是一個(gè)對象隧土，上面存儲(chǔ)了與當(dāng)前模塊相關(guān)聯(lián)的一些屬性和方法提针。
* 在需要依賴模塊時(shí)，隨時(shí)調(diào)用require() 引入即可
*/
define(function(require, exports, module) {
var a = require('./a')
a.doSomething()
......
var b = require('./b')
// 依賴可以就近書寫 b.doSomething()
// ...
})
**************************************************************************
//commonJs 規(guī)范
/**
* 在模塊中曹傀，通過require()方法來引入外部的模塊。
* 上下文提供了exports 對象用于暴露當(dāng)前模塊的方法和變量饲宛， 并且是唯一的出口皆愉。
* 在模塊中存在一個(gè)module對象，它代表模塊自身艇抠，exports是module的屬性幕庐。
*/
//example.js
var invisible = function () {
console.log("invisible");
}
exports.message = "hi";
exports.say = function () {
console.log(message);
}
//運(yùn)行下面的命令，可以輸出exports對象家淤。
var example = require('./example.js');
example
// {
// message: "hi",
// say: [Function]
// }
3： 使用 requirejs 完善入門任務(wù)15异剥，包括如下功能：
1. 首屏大圖為全屏輪播
2. 有回到頂部功能
3. 圖片區(qū)使用瀑布流布局（圖片高度不一），下部有加載更多按鈕絮重，點(diǎn)擊加載更多會(huì)加載更多數(shù)據(jù)(數(shù)據(jù)在后端 mock)
4. 使用 r.js 打包應(yīng)用
4：RequireJS
RequireJS入門（一）
RequireJS入門（二）
RequireJS入門（三）
RequireJS進(jìn)階（一）
RequireJS進(jìn)階（二）
RequireJS進(jìn)階（三）
