為什么要使用模塊化办悟？

• 解決命名沖突
• 實(shí)現(xiàn)依賴管理
• 模塊的版本管理
• 提高可維護(hù)性
• 前端性能優(yōu)化
• 跨環(huán)境共享模塊

AMD（Asynchronous Module Definition） 異步模塊定義再沧，AMD是采用異步方式加載模塊卷中，應(yīng)用在require.js挽唉。

/**
 * 書寫方式 
 * require([module], callback);
 * 第一個(gè)參數(shù)[module]塘秦，是一個(gè)數(shù)組建蹄，里面的成員就是要加載的模塊碌更；第二個(gè)參數(shù)callback裕偿，則是加載成功之后的回調(diào)函數(shù)。
 */
// 定義module.js
define(['dependencies'],function(){
    var name = 'Array';
    function printName(){console.log(name)}
    return {printName: pirintName}
})
// 加載模塊
require(['module'],function(module){
    module.printName();
})

CMD（Common Module Definition） 通用模塊定義痛单，CMD是按需加載嘿棘，應(yīng)用在sea.js。

/**
 * 書寫方式 
 * define(factory);
 * factory 為函數(shù)時(shí)旭绒，表示是模塊的構(gòu)造方法鸟妙。執(zhí)行該構(gòu)造方法，可以得到模塊向外提供的接口快压。
 * factory 方法在執(zhí)行時(shí)圆仔，默認(rèn)會傳入三個(gè)參數(shù)：require、exports 和 module
 * require是一個(gè)方法蔫劣，接受模塊標(biāo)識作為唯一參數(shù)坪郭，用來獲取其他模塊提供的接口
 * exports是一個(gè)對象，用來想外提供模塊接口
 * module是個(gè)對象脉幢，上面存儲了與當(dāng)前模塊相關(guān)的屬性和方法
 */
// 在a.js中使用模塊
define(function(require, exports, module) {
    var $ = require('jquery.js');
    $.each = function(index, el) {
        // 實(shí)現(xiàn)代碼
    };

});
// 在b.js中使用模塊
defind(function(require, exports, module){
    var util = require('./util.js');
    exports.init = function() {
        // 實(shí)現(xiàn)代碼
    };
})

Commonjs 是個(gè)模塊化規(guī)范歪沃，將javascript語言用于服務(wù)器端編程，采用同步加載模塊的方式嫌松。

/**
 * 一個(gè)單獨(dú)的文件就是一個(gè)模塊沪曙，每個(gè)模塊都是一個(gè)單獨(dú)的作用域，在模塊內(nèi)部定義的變量萎羔，無法被其他模塊讀取液走，除非定義為global對象的屬性
 * 加載模塊 加載模塊使用require方法，該方法讀取一個(gè)文件并執(zhí)行贾陷，返回文件內(nèi)部的module.exports對象缘眶，如果請求的模塊不能返回，那么"require"必須拋出一個(gè)錯(cuò)誤髓废。
 * 模塊輸出 module.exports對象巷懈，需要把模塊輸出的內(nèi)容放入該對象
 */

// 模塊定義 model.js
var name = "jirengu";

function printName(){
    console.log(name);
}
function printFullName(firstName){
    console.log(firstName + name);
}
module.exports = {
    printName: printName;
    printFullName: printFullName
}

//加載模塊
var nameModule = require("./model.js");
nameModule.printName();             // "jirengu"
nameModule.printFullName("Hello "); // "Hello jirengu"

使用 requirejs 完善任務(wù)，包括如下功能：

1. 首屏大圖為全屏輪播
2. 有回到頂部功能
3. 圖片區(qū)使用瀑布流布局（圖片高度不一）慌洪，下部有加載更多按鈕顶燕，點(diǎn)擊加載更多會加載更多數(shù)據(jù)
4. 使用 r.js 打包應(yīng)用
   查看源代碼
   預(yù)覽效果