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

一、什么是模塊？

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

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

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

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

另一個(gè)被調(diào)用的js，也就是B.js一定要對(duì)外提供接口。
module.exports=B;

過程如下：
B.js

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

A.js

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

這就實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的模塊化工作方式，即：
模塊間相互調(diào)用，協(xié)同工作，實(shí)現(xiàn)某特定功能。

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

⑥模塊化的核心價(jià)值：模塊化最核心的價(jià)值在于解決不同文件之間的分工和調(diào)用問題，即依賴關(guān)系。

三、模塊化的一些工具

gulp + browerify

構(gòu)建步驟：

安裝gulp

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

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

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

在gulpfile里編寫任務(wù)實(shí)現(xiàn)模塊化
gulpfile.js

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

webpack
參考webpack的配置及使用

requireJS

模塊聲明規(guī)范：AMD

聲明模塊

參數(shù)1：id 是這個(gè)模塊的名稱，它是一個(gè)可選參數(shù)，默認(rèn)為require加載此模塊時(shí)指定的名稱，若定義這個(gè)參數(shù)，那么這個(gè)模塊名應(yīng)當(dāng)為“頂級(jí)”的，不允許相對(duì)名稱。

參數(shù)2：數(shù)組，為這個(gè)模塊所依賴的其他模塊

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

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

使用步驟

下載requireJS
bower install requirejs//根據(jù)個(gè)人習(xí)慣選擇下載方式，只要保證后續(xù)引入的路徑正確

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

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

main.js

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

在頁面中引入