概念
模塊化開發(fā)，一個模塊就是一個實現(xiàn)特定功能的文件，有了模塊我們就可以更方便的使用別人的代碼夺饲，要用什么功能就加載什么模塊。
模塊化開發(fā)的4點好處：
1 避免變量污染，命名沖突
2 提高代碼復(fù)用率
3 提高維護性
4 依賴關(guān)系的管理
1.commonJS
定義模塊：即一個單獨的文件就是一個模塊往声，切該文件中的作用域獨立茫蛹，當中的變量是無法被其他文件引用的，如果要使用需要將其定義為global烁挟；
輸出模塊：模塊只有一個出口婴洼，即使用module.exports對象，將需要輸出的內(nèi)容放入到該對象中撼嗓；
加載模塊：通過require加載柬采，例如：var module = require('./moduleFile.js');該module的值即對應(yīng)文件內(nèi)部的module.exports對象， 然后就可以通過module名稱去引用模塊中的變量和函數(shù)了且警；
// 定義模塊 module.js
var data = "hello commonJS !";
function test1() {
alert("hello test1 !");
}
function test2() {
alert("hello test2 !");
}
// 輸出模塊
module.exports = {
test1: test1,
test2: test2
}
// 加載模塊
var module = require('./module.js');
// 使用模塊功能
module.test1(); // "hello test1 !"
module.test2(); // "hello test2 !"
總共四個步驟： 定義 -> 輸出 -> 加載 -> 使用
PS: commonJS是基于服務(wù)器端開發(fā)的粉捻，由于require是同步加載，所以當在瀏覽器中是無法運行的斑芜，所以就有了下面的異步模塊的出現(xiàn)肩刃。
2.AMD(Asynchronous Module Definition)，異步模塊定義
AMD是一套基于瀏覽器端模塊化開發(fā)的規(guī)范杏头，在進行頁面開發(fā)時需要用到該規(guī)范的庫函數(shù)盈包，即：requireJS
requireJS解決了兩個問題
多文件依賴關(guān)系處理，被依賴的需要早一步被加載醇王；
加載js時候頁面會停止渲染呢燥，如果加載的文件越多，頁面失去響應(yīng)的時間就會越長寓娩；
// 模塊定義 module.js
define(
['dependModule', '...', ...], // 這個數(shù)組表示該模塊所依賴的模塊名稱
function () {
var data = "hello AMD !";
function test1() {
alert("hello test1 !);
}
function test2() {
alert("hello test2 !);
}
return {
test1: test1,
test2: test2
};
});
// 加載模塊
require(['module'], function (myModule) {
// 加載之后的module模塊將會以參數(shù)形式：myModule傳入到回調(diào)函數(shù)中叛氨，供使用
// 這里是模塊加載完成之后的回調(diào)函數(shù)
myModule.test1(); // "hello test1 !"
myModule.test2(); // "hello test2 !"
});
// ---------- AMD語法：
1. 模塊定義：使用全局函數(shù)`define(id, dependencies, factory);`
1. id: 用來定義模塊標識，非必選參數(shù)棘伴，如果沒提供該參數(shù)則會默認使用腳本文件名（不帶擴展名的）寞埠；
2. dependencies：是表示該模塊所依賴的模塊名稱數(shù)組；
3. factory：如果是函數(shù)則為該模塊初始化所執(zhí)行的函數(shù)焊夸，如果是對象則為該模塊的輸出值仁连。
4. 模塊加載：使用**異步的**`require(dependencies, function (myModule) {});`函數(shù)
1. `dependencies`: 模塊依賴的模塊數(shù)組；
2. 回調(diào)函數(shù)：模塊加載完成后執(zhí)行的函數(shù)淳地，加載的模塊將以參數(shù)形式傳入該函數(shù)怖糊，即：myModule帅容，供使用颇象。
3.CMD(Common Module Definition)通用模塊定義
就近依賴，需要時再進行加載并徘，所以執(zhí)行順序和書寫順序一致遣钳；這點與AMD不同，AMD是在使用模塊之前將依賴模塊全部加載完成麦乞，但由于網(wǎng)絡(luò)等其他因素可能導(dǎo)致依賴模塊下載先后順序不一致這就導(dǎo)致了蕴茴，執(zhí)行順序可能跟書寫順序不一致的情況劝评。
define(id, deps, factory)
因為CMD推崇一個文件一個模塊，所以經(jīng)常就用文件名作為模塊id倦淀；
CMD推崇依賴就近蒋畜，所以一般不在define的參數(shù)中寫依賴，而是在factory中寫撞叽。
factory有三個參數(shù)：
function(require, exports, module){}
一姻成，require
require 是 factory 函數(shù)的第一個參數(shù)，require 是一個方法愿棋，接受 模塊標識 作為唯一參數(shù)科展，用來獲取其他模塊提供的接口；
二糠雨，exports
exports 是一個對象才睹，用來向外提供模塊接口；
三甘邀，module
module 是一個對象琅攘，上面存儲了與當前模塊相關(guān)聯(lián)的一些屬性和方法。
demo
// 定義模塊 myModule.js
define(function(require, exports, module) {
var $ = require('jquery.js')
$('div').addClass('active');
});
// 加載模塊
seajs.use(['myModule.js'], function(my){
});
AMD和CMD最大的區(qū)別是對依賴模塊的執(zhí)行時機處理不同
4.ES6模塊化松邪，未來標準乎澄，但目前未廣泛使用
類似commonJS，語法更簡潔测摔；
類似AMD置济，直接支持異步加載和配置模塊加載；
結(jié)構(gòu)可以做靜態(tài)分析锋八，靜態(tài)檢測浙于；
比commonJS更好的支持循環(huán)依賴；
命名式導(dǎo)出方式：每個模塊可以有多個
定義式導(dǎo)出方式：每個模塊只有一個
// myFunc.js
export default function () {
// 這里面包含了該模塊(或者說該文件myFunc.js)所有邏輯
// 這種方式該函數(shù)不需要名字挟纱，因為前面的default關(guān)鍵字意思即導(dǎo)出時使用的模塊名字和文件名一樣即：myFunc
};
// main.js
import myFunc from 'myFunc';
// 導(dǎo)入后就可以直接使用了
myFunc();
參考博客：
https://blog.csdn.net/gccll/article/details/52785685
https://www.cnblogs.com/code-klaus/p/9011911.html
