1： 為什么要使用模塊化浮创？
網(wǎng)頁越來越復雜斩披，js代碼越來越多讹俊，在多人協(xié)作下如何管理代碼？于是就有了模塊化厕倍。
- 解決命名沖突贩疙；
- 方便依賴性管理；
- 提高代碼的維護性和可讀性组民；
- 代碼解耦悲靴，提高代碼復用性；
2： CMD耸三、AMD浇揩、CommonJS 規(guī)范分別指什么？有哪些應(yīng)用
- AMD
可以異步加載模塊胳徽，并且會提前加載依賴膜廊。
define("alpha", ["require", "exports", "beta"], function (require, exports, beta) {
//模塊代碼
return 模塊名
});
有三個參數(shù)淫茵，分別是：本模塊的名字、依賴模塊數(shù)組铆铆、依賴模塊傳入使用。
- CommonJS
使用require方法加載模塊翁都，通過module.exports來導出接口谅猾。Node.js采用這個規(guī)范。
//myModel.js
function printName(){
console.log(name);
}
module.exports = { // 導出接口
printName: printName,
}
//加載模塊
var nameModule = require('./myModel.js');
nameModule.printName(); //myModel.js里的方法
加載模塊是同步的坐搔，只有加載完成后才能執(zhí)行后面的操作敬矩。
- CMD
就近加載依賴弧岳。
define(function(require, exports, module) {
// 模塊代碼
});
- AMD與CMD的區(qū)別：
AMD推崇依賴前置，在定義模塊的時候就要聲明其依賴的模塊涧卵。
CMD推崇就近依賴瞎抛，只有在用到某個模塊的時候再去require。
//AMD 必須一開始就聲明依賴模塊
define("alpha", ["require", "exports", "beta"], function (require, exports, beta) {
//模塊代碼
});
//CMD
define(function(require, exports, module) {
// 模塊代碼
//100行代碼后胎撤，需要某個模塊断凶。
var alpha = require('./alpha') //就近加載
});
3.requirejs的使用
- www/
- index.html
- js/
app/ 頁面的js模塊
sub.js
- lib/ 第三方庫 如jq
jquery.js
canvas.js
- app.js 頁面入口配置文件
在index.html中：
<script data-main="js/app.js" src="js/require.js"></script>
先加載require.js完成后，然后再加載app.js頁面入口配置文件
requirejs.config({
baseUrl: 'js/lib', 基本路徑
paths: { 路徑縮寫
app: '../app'
}
});
require(app/index.js)
詳細的使用可以直接參考 requirejs文檔肿男，包括使用r.js打包壓縮却嗡。
在r.js中窗价，mian.js路徑是相對于index.html，而build.js是相對于自己的位置坪它，所以在寫 baseUrl有所不同。
4： 使用 requirejs 完善入門任務(wù)15往毡，包括如下功能：
Paste_Image.png
實戰(zhàn)task15-2
