摘要：規范異步模塊聲明規范公共模塊聲明模塊化的核心價值模塊化最核心的價值在于解決不同文件之間的分工和調用問題，即依賴關系。

一、什么是模塊？

定義：具有相同屬性和行為的事物的集合
在前端中：將一些屬性比較類似和行為比較類似的內容放在同一個js文件里面，把這個js文件稱為模塊
目的：為了每個js文件只關注與自身有關的事情，讓每個js文件各行其職

二、什么是模塊化？CommonJS是什么？AMD和CMD又是什么？

①模塊化：指的就是遵守commonjs規范，解決不同js模塊之間相互調用問題
②CommonJS：

A.js文件中調用另一個B.js文件，一定要在A.js中引入B.js
require("B.js");

另一個被調用的js，也就是B.js一定要對外提供接口。
module.exports=B;

過程如下：
B.js

var b = "Hello,I"m module B.";
module.exports = b;//暴露一個接口，與b對接。這個接口既可以是函數，也可以是對象，甚至是數組。

A.js

var _b = require("./B.js");//實際過程中應當是B.js相對于A.js的路徑，這比使用絕對路徑去獲取要規范得多
//此時_b獲得了B.js的接口，這個接口指向B.js中的變量b
console.log( _b );//"Hello,I"m module B.";

這就實現了一個簡單的模塊化工作方式，即：
模塊間相互調用，協同工作，實現某特定功能。

④AMD規范：Async Module Define 異步模塊聲明
⑤CMD規范：Common Module Define 公共模塊聲明

⑥模塊化的核心價值：模塊化最核心的價值在于解決不同文件之間的分工和調用問題，即依賴關系。

三、模塊化的一些工具

gulp + browerify

構建步驟：

安裝gulp

``npm install gulp --save-dev //要安裝全局還是本地依賴根據實際情況來``

安裝browserify --save--dev
npm install browserify --save--dev

安裝文件輸出流工具
npm install vinyl-source-stream --save-dev

在gulpfile里編寫任務實現模塊化
gulpfile.js

//基本模塊引入
var gulp = require("gulp");
var brow = require("browerify");
var source = require("vinyl-source-stream");
//任務編寫
gulp.task("bundle", function() {
//將任務交付給browserify
//brow讀取入口文件后，能自動查找相互之間有依賴的關系的模塊
 return brow("./entry.js")
 .bundle()//輸出一個文件流變量（gulp的工作機制）
 .pipe(source("bundle.js"))//將文件流變量輸出為文件
 .pipe(gulp.dest("js"));//將文件最終輸出
}

webpack
參考webpack的配置及使用

requireJS

模塊聲明規范：AMD

聲明模塊

參數1：id 是這個模塊的名稱，它是一個可選參數，默認為require加載此模塊時指定的名稱，若定義這個參數，那么這個模塊名應當為“頂級”的，不允許相對名稱。

參數2：數組，為這個模塊所依賴的其他模塊

匿名函數參數：為依賴模塊在這個模塊中的接口，它們是一一對應的，因此即便不需要某個模塊的接口，但若是需要它后面模塊的接口，那也必須給它增加一個用于占位的參數。

define( "id", [ "module1", "module2" ], function( m1, m2 ) {
  return {
    arg1: m1,
    arg2: m2
  }
  //返回值即是module3的接口
});

使用步驟

下載requireJS
bower install requirejs//根據個人習慣選擇下載方式，只要保證后續引入的路徑正確

配置config文件和main.js
config.js

require.config( {
  base: "",//引入模塊的起始路徑
  //paths對象為要引入的模塊的名稱及路徑，且不需.js后綴，require默認會為文件添加.js后綴
  paths: {
    "jquery": "./jquery-1.11.0"http://這就引入了juery作為一個模塊。 PS：jquery自己已經實現了AMD，并且"jquery"是一個頂級模塊名。
  }
} );

main.js

require(["jquery"], function( $ ) {
  $(document).css("background", "#000");//這就實現了引入使用jquery模塊，并用它進行dom操作
});

在頁面中引入