概念
模塊化開發，一個模塊就是一個實現特定功能的文件，有了模塊我們就可以更方便的使用別人的代碼，要用什么功能就加載什么模塊。
模塊化開發的4點好處：
1 避免變量污染，命名沖突
2 提高代碼復用率
3 提高維護性
4 依賴關系的管理
1.commonJS
定義模塊：即一個單獨的文件就是一個模塊，切該文件中的作用域獨立，當中的變量是無法被其他文件引用的，如果要使用需要將其定義為global；
輸出模塊：模塊只有一個出口，即使用module.exports對象，將需要輸出的內容放入到該對象中；
加載模塊：通過require加載，例如：var module = require('./moduleFile.js');該module的值即對應文件內部的module.exports對象， 然后就可以通過module名稱去引用模塊中的變量和函數了；
// 定義模塊 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是基于服務器端開發的，由于require是同步加載，所以當在瀏覽器中是無法運行的，所以就有了下面的異步模塊的出現。
2.AMD(Asynchronous Module Definition)，異步模塊定義
AMD是一套基于瀏覽器端模塊化開發的規范，在進行頁面開發時需要用到該規范的庫函數，即：requireJS
requireJS解決了兩個問題
多文件依賴關系處理，被依賴的需要早一步被加載；
加載js時候頁面會停止渲染，如果加載的文件越多，頁面失去響應的時間就會越長；
// 模塊定義 module.js
define(
['dependModule', '...', ...], // 這個數組表示該模塊所依賴的模塊名稱
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模塊將會以參數形式：myModule傳入到回調函數中，供使用
// 這里是模塊加載完成之后的回調函數
myModule.test1(); // "hello test1 !"
myModule.test2(); // "hello test2 !"
});
// ---------- AMD語法：
1. 模塊定義：使用全局函數`define(id, dependencies, factory);`
1. id: 用來定義模塊標識，非必選參數，如果沒提供該參數則會默認使用腳本文件名（不帶擴展名的）；
2. dependencies：是表示該模塊所依賴的模塊名稱數組；
3. factory：如果是函數則為該模塊初始化所執行的函數，如果是對象則為該模塊的輸出值。
4. 模塊加載：使用**異步的**`require(dependencies, function (myModule) {});`函數
1. `dependencies`: 模塊依賴的模塊數組；
2. 回調函數：模塊加載完成后執行的函數，加載的模塊將以參數形式傳入該函數，即：myModule，供使用。
3.CMD(Common Module Definition)通用模塊定義
就近依賴，需要時再進行加載，所以執行順序和書寫順序一致；這點與AMD不同，AMD是在使用模塊之前將依賴模塊全部加載完成，但由于網絡等其他因素可能導致依賴模塊下載先后順序不一致這就導致了，執行順序可能跟書寫順序不一致的情況。
define(id, deps, factory)
因為CMD推崇一個文件一個模塊，所以經常就用文件名作為模塊id；
CMD推崇依賴就近，所以一般不在define的參數中寫依賴，而是在factory中寫。
factory有三個參數：
function(require, exports, module){}
一，require
require 是 factory 函數的第一個參數，require 是一個方法，接受 模塊標識 作為唯一參數，用來獲取其他模塊提供的接口；
二，exports
exports 是一個對象，用來向外提供模塊接口；
三，module
module 是一個對象，上面存儲了與當前模塊相關聯的一些屬性和方法。
demo
// 定義模塊 myModule.js
define(function(require, exports, module) {
var $ = require('jquery.js')
$('div').addClass('active');
});
// 加載模塊
seajs.use(['myModule.js'], function(my){
});
AMD和CMD最大的區別是對依賴模塊的執行時機處理不同
4.ES6模塊化，未來標準，但目前未廣泛使用
類似commonJS，語法更簡潔；
類似AMD，直接支持異步加載和配置模塊加載；
結構可以做靜態分析，靜態檢測；
比commonJS更好的支持循環依賴；
命名式導出方式：每個模塊可以有多個
定義式導出方式：每個模塊只有一個
// myFunc.js
export default function () {
// 這里面包含了該模塊(或者說該文件myFunc.js)所有邏輯
// 這種方式該函數不需要名字，因為前面的default關鍵字意思即導出時使用的模塊名字和文件名一樣即：myFunc
};
// main.js
import myFunc from 'myFunc';
// 導入后就可以直接使用了
myFunc();
參考博客：
https://blog.csdn.net/gccll/article/details/52785685
https://www.cnblogs.com/code-klaus/p/9011911.html
