題目1： 為什么要使用模塊化？
- 最主要的目的：
1.解決命名沖突
2.依賴管理- 其他價值：
1.提高代碼可讀性
2.代碼解耦和，提高復用性
參考：前端模塊化開發的價值
題目2： CMD、AMD、CommonJS 規范分別指什么？有哪些應用
- CMD（Common Module Definition）
更貼近 CommonJS Modules/1.1 和 Node Modules 規范，一個模塊就是一個文件；它推崇依賴就近，想什么時候 require就什么時候加載；它也沒有全局 require， 每個API都簡單純粹 。代碼的書寫格式如下：
define(factory);factory 為函數時，表示是模塊的構造方法。執行該構造方法，可以得到模塊向外提供的接口。factory 方法在執行時，默認會傳入三個參數：require、exports 和 module。
function(require,exports,module)
require： 是一個方法,用來獲取其他模塊提供的接口
exports：是一個對象,用來向外提供模塊接口
module： 是一個對象,上面存儲了與當前模塊相關聯的一些屬性和方法
對于CMD，有代表性的是SeaJS，官網：seajs.org/docs/
//eg:
//math.js
define(function(require, exports, module) {
exports.add = function() {
var sum = 0, i = 0, args = arguments, l = args.length;
while (i < l) {
sum += args[i++];
}
return sum;
};
});
//increment.js
define(function(require, exports, module) {
var add = require('math').add;
exports.increment = function(val) {
return add(val, 1);
};
});
//program.js
define(function(require, exports, module) {
var inc = require('increment').increment;
var a = 1;
inc(a); // 2
module.id == "program";
});
- AMD (Asynchronous Module Definition, 異步模塊定義) 指定一種機制，在該機制下模塊和依賴可以異步加載。這對瀏覽器端的異步加載尤其適用。
它是依賴前置 (依賴必須一開始就寫好)會先盡早地執行(依賴)模塊。換句話說，所有的require都被提前執行（require 可以是全局或局部 ）。
AMD規范只定義了一個函數 define，它是全局變量。用法：
defind(id, dependencies, factory)
id: 定義中模塊的名字，可選；如果沒有提供該參數，模塊的名字應該默認為模塊加載器請求的指定腳本的名字。。
dependencies：是一個當前模塊依賴的，已被模塊定義的模塊標識的數組字面量。 依賴參數是可選的，如果忽略此參數，它應該默認為["require", "exports", "module"]。然而，如果工廠方法的長度屬性小于3，加載器會選擇以函數的長度屬性指定的參數個數調用工廠方法。
factory：模塊初始化要執行的函數或對象。如果為函數，它應該只被執行一次。如果是對象，此對象應該為模塊的輸出值。
//示例:
define('modal', ['jQuery', 'dialog'], function($, Dialog){
$('.modal').show();
Dialog.open();
});
- CommonJS是服務器端模塊的規范，Node.js采用了這個規范。Node.JS首先采用了js模塊化的概念。
在一個模塊中，存在一個自由的變量”require”，它是一個函數。
這個”require”函數接收一個模塊標識符。
“require”返回外部模塊所輸出的API。
如果出現依賴閉環(dependency cycle)，那么外部模塊在被它的傳遞依賴（transitive dependencies）所require的時候可能并沒有執行完成；在這種情況下，”require”返回的對象必須至少包含此外部模塊在調用require函數（會進入當前模塊執行環境）之前就已經準備完畢的輸出。
如果請求的模塊不能返回，那么”require”必須拋出一個錯誤。
在一個模塊中，會存在一個名為”exports”的自由變量，它是一個對象，模塊可以在執行的時候把自身的API加入到其中。
模塊必須使用”exports”對象來做為輸出的唯一表示。
//示例:
//math.js
exports.add = function() {
var sum = 0, i = 0, args = arguments, l = args.length;
while (i < l) {
sum += args[i++];
}
return sum;
};
//increment.js
var add = require('math').add;
exports.increment = function(val) {
return add(val, 1);
};
//program.js
var inc = require('increment').increment;
var a = 1;
inc(a);
// 2
題目3： 使用 requirejs 完善入門任務15，包括如下功能：
- 首屏大圖為全屏輪播
- 有回到頂部功能
- 圖片區使用瀑布流布局（圖片高度不一），下部有加載更多按鈕，點擊加載更多會加載更多數據(數據在后端 mock)
- 使用 r.js 打包應用
一、require使用原因：
1.由于加載的時候，瀏覽器會停止網頁渲染，加載文件越多，網頁失去響應的時間就會越長；2.由于js文件之間存在依賴關系，因此必須嚴格保證加載順序（比如上例的1.js要在2.js的前面），依賴性最大的模塊一定要放到最后加載，當依賴關系很復雜的時候，代碼的編寫和維護都會變得困難。
require.js的誕生，就是為了解決這兩個問題
（1）實現js文件的異步加載，避免網頁失去響應；
（2）管理模塊之間的依賴性，便于代碼的編寫和維護。
二、require.js的使用
1.是先去官方網站下載最新版本。
下載后，假定把它放在js子目錄下面，就可以加載了。
<script src="js/require.js"></script>
2.加載require.js以后，下一步就要加載我們自己的代碼了。假定我們自己的代碼文件是main.js，也放在js目錄下面。那么，只需要寫成下面這樣就行了：
<script src="js/require.js" data-main="js/main"></script>
data-main屬性的作用：指定網頁程序的主模塊（整個網頁的入口代碼）。
在上例中，就是js目錄下面的main.js，這個文件會第一個被require.js加載。由于require.js默認的文件后綴名是js，所以可以把main.js簡寫成main。
3.主模塊的寫法：
主模塊依賴于其他模塊，這時就要使用AMD規范定義的的require()函數。
// main.js
requirejs.config({
baseUrl:"js/dist", //相對于被引用的頁面的路徑，次例為調用頁面和js平級
paths:{//相對于baseUrl的路徑，
"jquery":"jquery-2.1.4",
"carouse":"../app/carouse",
"waterfalls":"../app/waterfalls"
}
});
require(['jquery', 'carouse', 'waterfalls'], function ($, carouse, waterfalls){
// some code here
});
4.要加載的模塊文件寫法為：
define(mo,[依賴],funciton(){
//to do code...
})
//mo為模塊名字，一般不寫，依賴為可選參數
三、r.js壓縮
r.js是一個打包工具，主要是與requirejs配合對模塊化后的開發進行打包壓縮，因為模塊化的寫法會導致多個http的請求并產生性能影響，因此在發布上線前要進行文件的壓縮合并。
r.js的運行需要node環境和git
1.下載r.js
npm install requirejs//會附送r.js
2.設置配置文件，文件名為build.js
({
baseUrl:"../../dist",//相對于build.js，入口文件main.js所在的路徑
paths:{//相對于baseUrl的路徑，
"jquery":"jquery-2.1.4",
"carouse":"../app/carouse",
"waterfalls":"../app/waterfalls"
},
name:"main",name為需要打包壓縮js文件的入口文件名字
out:"../../dist/merge.js"http://out為壓縮完成后輸出的文件名字
})
3.使用git，在r.js所在目錄下執行node r.js -o build.js
4.改變require.js的 data-main, 使用壓縮的merge.js
<script src="js/require.js" data-main="js/merge"></script>
