題目1： 為什么要使用模塊化？

• 模塊的由來：
  • 嵌入網頁的JS代碼越來越龐大，越來越像桌面程序，需要一個團隊去分工協作，進行管理和測試等等，為了更好的管理網頁的業務邏輯，產生了模塊化編程的理念。
• 模塊的定義： 模塊就是實現特定功能的相互獨立的一組方法。
• 模塊的意義：
• 能更好的管理網頁的業務邏輯
• 可維護性：良好設計的模塊會盡量與外部的代碼撇清關系，以便于獨立對其進行改進和維護
• 可復用性：我們可以按照自己的需求去使用模塊，別人也可以使用我們所設計的模塊代碼
• 解決命名沖突，解決各模塊依賴管理

題目2： CMD、AMD、CommonJS 規范分別指什么？有哪些應用

前端模塊規范有三種：CommonJs,AMD和CMD。

• CommonJs用在服務器端，AMD和CMD用在瀏覽器環境
• AMD 是 RequireJS 在推廣過程中對模塊定義的規范化產出。
• CMD 是 SeaJS 在推廣過程中對模塊定義的規范化產出。
• AMD:提前執行（異步加載：依賴先執行）+延遲執行
• CMD:延遲執行（運行到需加載，根據順序執行）

CommonJS 規范:

CommonJS是服務器端模塊的規范，由Node推廣使用。由于服務端編程的復雜性，如果沒有模塊很難與操作系統及其他應用程序互動。

1. 定義模塊 根據CommonJS規范，一個單獨的文件就是一個模塊。每一個模塊都是一個單獨的作用域，也就是說，在該模塊內部定義的變量，無法被其他模塊讀取，除非定義為global對象的屬性

2. 模塊輸出： 模塊只有一個出口，module.exports對象，我們需要把模塊希望輸出的內容放入該對象

3. 加載模塊： 加載模塊使用require方法，該方法讀取一個文件并執行，返回文件內部的module.exports對象

//模塊定義 myModel.js

var name = 'xsnowholy';

function printName(){
    console.log(name);
}

function printFullName(firstName){
    console.log(firstName + name);
}

module.exports = {
    printName: printName,
    printFullName: printFullName
}

//加載模塊

var nameModule = require('./myModel.js');

nameModule.printName();

• CommonJS 不適用于瀏覽器環境, 因為模塊是同步加載的, 瀏覽器環境的網速沒有本地硬盤的加載速度快, 同步會導致瀏覽器假死
• Node.js的模塊系統, 就是參照CommonJS規范實現的. 在CommonJS中, 有一個全局的方法require(), 用于加載模塊.
• CommonJS 應用于服務端環境

AMD 規范:

AMD 即Asynchronous Module Definition，中文名是異步模塊定義的意思。它是一個在瀏覽器端模塊化開發的規范

由于不是JavaScript原生支持，使用AMD規范進行頁面開發需要用到對應的庫函數，也就是大名鼎鼎RequireJS，實際上AMD 是 RequireJS在推廣過程中對模塊定義的規范化的產出

它采用異步方式加載模塊，模塊的加載不影響它后面語句的運行。所有依賴這個模塊的語句，都定義在一個回調函數中，等到加載完成之后，這個回調函數才會運行。

RequireJS主要解決兩個問題

• 多個js文件可能有依賴關系，被依賴的文件需要早于依賴它的文件加載到瀏覽器
• js加載的時候瀏覽器會停止頁面渲染，加載文件越多，頁面失去響應時間越長

RequireJs也采用require()語句加載模塊，但是不同于CommonJS，它要求兩個參數:

第一個參數[module]，是一個數組，里面的成員就是要加載的模塊；第二個參數callback，則是加載成功之后的回調函數。

// 定義模塊 myModule.js
define(['dependency'], function(){
    var name = 'Xsnowholy';
    function printName(){
        console.log(name);
    }

    return {
        printName: printName
    };
});

// 加載模塊
require(['myModule'], function (my){
　 my.printName(); });

CMD 規范：

CMD 即Common Module Definition通用模塊定義，CMD規范是國內發展出來的，就像AMD有個requireJS，CMD有個瀏覽器的實現SeaJS，SeaJS要解決的問題和requireJS一樣，只不過在模塊定義方式和模塊加載（可以說運行、解析）時機上有所不同。

在 CMD 規范中，一個模塊就是一個文件。代碼的書寫格式如下:

define(function(require, exports, module) {

  // 模塊代碼

});

require是可以把其他模塊導入進來的一個參數;而exports是可以把模塊內的一些屬性和方法導出的;module 是一個對象，上面存儲了與當前模塊相關聯的一些屬性和方法。

AMD是依賴關系前置,在定義模塊的時候就要聲明其依賴的模塊;
CMD是按需加載依賴就近,只有在用到某個模塊的時候再去require：

// CMD
define(function(require, exports, module) {
  var a = require('./a')
  a.doSomething()
  // 此處略去 100 行
  var b = require('./b') // 依賴可以就近書寫
  b.doSomething()
  // ... 
})

// AMD 默認推薦的是
define(['./a', './b'], function(a, b) { // 依賴必須一開始就寫好
  a.doSomething()
  // 此處略去 100 行
  b.doSomething()
  ...
})

seajs使用例子

// 定義模塊  myModule.js
define(function(require, exports, module) {
  var $ = require('jquery.js')
  $('div').addClass('active');
  exports.data = 1;
});

// 加載模塊
seajs.use(['myModule.js'], function(my){
    var star= my.data;
    console.log(star);  //1
});

題目3： 使用 requirejs 完善入門任務15，包括如下功能：

1. 首屏大圖為全屏輪播

2. 有回到頂部功能
3. 圖片區使用瀑布流布局（圖片高度不一），下部有加載更多按鈕，點擊加載更多會加載更多數據(數據在后端 mock)
4. 使用 r.js 打包應用

效果預覽

代碼