為什么要使用模塊化？

• 解決命名沖突
• 依賴管理
• 模塊的版本管理。通過別名等配置，配合構(gòu)建工具，可以比較輕松地實現(xiàn)模塊的版本管理。
• 提高代碼可維護(hù)性和可讀性
• 前端性能優(yōu)化
• 可以很方便實現(xiàn)模塊的跨服務(wù)器和瀏覽器共享

CMD、AMD、CommonJS 規(guī)范分別指什么？有哪些應(yīng)用

CommonJs

CommonJS是服務(wù)器端模塊的規(guī)范，Node.js采用了這個規(guī)范并首先采用了js模塊化的概念。
根據(jù)CommonJS規(guī)范，一個單獨的文件就是一個模塊。加載模塊使用require方法，該方法讀取一個文件并執(zhí)行，最后返回文件內(nèi)部的exports對象。

//add.js
exports.add = function(){...};

//calculate.js
var cc = require('add');
exports.add = function(n){
   return cc.add(val,n);
};

然而CommonJS規(guī)范并不適用于瀏覽器端,由于瀏覽器端的瓶頸在于帶寬/網(wǎng)絡(luò),
如果客戶端同步加載一個個文件，然后執(zhí)行，那么就會出現(xiàn)假死情況
因此誕生了AMD，CMD，異步模塊加載機(jī)制

CMD（Common Module Definition）

CMD是SeaJS 在推廣過程中對模塊定義的規(guī)范化產(chǎn)出
與AMD的不同在于, AMD推崇依賴前置會在一開始加載好所有需要的模塊,而CMD則推崇依賴就近,當(dāng)需要時才加載

//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;  //需要用到math時加載模塊
  exports.increment = function(val) {
    return add(val, 1);
  };
});

AMD (Asynchronous Module Definition, 異步模塊定義)

AMD屬于依賴前置，把項目中需要用到的依賴提前聲明，等獲取之后執(zhí)行callback

//創(chuàng)建文件check_amd.js, 定義模塊
define(['check'], function(){
    var flag = true;
    function check(){
        return flag;
    }
    return {
        check: check
    };
});

//在需要用到的頁面加載模塊
require(['check_amd'], function (check){
    if(check.check()){
        console.log("哈哈哈");
    }
});

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

1. 首屏大圖為全屏輪播
2. 有回到頂部功能
3. 圖片區(qū)使用瀑布流布局（圖片高度不一），下部有加載更多按鈕，點擊加載更多會加載更多數(shù)據(jù)(數(shù)據(jù)在后端 mock)
4. 使用 r.js 打包應(yīng)用

預(yù)覽鏈接
代碼地址