題目1： 為什么要使用模塊化？
解決命名沖突；
可進(jìn)行依賴(lài)管理；
增強(qiáng)代碼的可讀性；
代碼解耦，提高代碼的復(fù)用率
題目2： CMD、AMD、CommonJS 規(guī)范分別指什么？有哪些應(yīng)用
- AMD（應(yīng)用require.js）
采用異步方式加載模塊，模塊的加載不影響它后面語(yǔ)句的運(yùn)行。所有依賴(lài)這個(gè)模塊的語(yǔ)句，都定義在一個(gè)回調(diào)函數(shù)中，等到加載完成之后，這個(gè)回調(diào)函數(shù)才會(huì)運(yùn)行
語(yǔ)法：define(id, dependences, factory);
- CMD（應(yīng)用sea.js）
它并不是異步加載，而是松散加載，只有當(dāng)需要加載模塊的時(shí)候，再用require方法引用模塊
語(yǔ)法：define(factory);
- COMMONJS(用在nodejs上)
- 定義模塊 根據(jù)CommonJS規(guī)范，一個(gè)單獨(dú)的文件就是一個(gè)模塊。每一個(gè)模塊都是一個(gè)單獨(dú)的作用域，也就是說(shuō)，在該模塊內(nèi)部定義的變量，無(wú)法被其他模塊讀取，除非定義為global對(duì)象的屬性
- 模塊輸出： 模塊只有一個(gè)出口，module.exports對(duì)象，我們需要把模塊希望輸出的內(nèi)容放入該對(duì)象
- 加載模塊： 加載模塊使用require方法，該方法讀取一個(gè)文件并執(zhí)行，返回文件內(nèi)部的module.exports對(duì)象
//模塊定義 myModel.js
var name = 'Byron';
function printName(){
console.log(name);
}
module.exports = {
printName: printName,
}
//加載模塊
var nameModule = require('./myModel.js');
nameModule.printName();
// CMD
// math.js
define(function(requires, exports, module) {
exports.add = function(x, y) {
return x + y;
};
});
// inc.js
define(function(requires, exports, module) {
var add = require('math').add;
exports.inc = function(val) {
return add(val, 1);
};
});
// program.js
define(function(require, exports, module) {
var inc = require('inc').inc;
var a = 1;
inc(a); // 2
module.id = "program";
});
例子
- 創(chuàng)建html文件，引入require.js庫(kù)，設(shè)置data-main屬性：js/main從上到下依次依賴(lài)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>task38</title>
</head>
<body>
<script src="http://apps.bdimg.com/libs/require.js/2.1.11/require.min.js" data-main="js/main"></script>
</body>
</html>
- 在html目錄下新建js文件夾，創(chuàng)建main.js：
// main.js
require(['starting']);
console.log("starting");
- starting.js
//starting.js
define(['inc'],function(inc){
console.log(inc.getRes());
inc.add1();
console.log(inc.getRes());
inc.add1();
console.log(inc.getRes());
});
- inc.js：
// inc.js
define(function() {
var a = 1;
var inc = {
add1: function() {
return a++;
},
getRes: function() {
return a;
}
};
return inc;
});
題目3： 使用各種效果完成一個(gè)網(wǎng)頁(yè)
1. 首屏大圖為全屏輪播
2. 有回到頂部功能
3. 圖片區(qū)使用瀑布流布局（圖片高度不一），下部有加載更多按鈕，點(diǎn)擊加載更多會(huì)加載更多數(shù)據(jù)(數(shù)據(jù)在
后端 mock)
4. 使用 r.js 打包應(yīng)用
