模塊化的標準
有了模塊，我們就可以更方便地使用別人的代碼,想要什麼功能，就加載什麼模塊。這樣做有一個前提，那就是大家必須以同樣的方式編寫模塊，否則你有你的寫法，我有我的寫法，豈不是亂了套！ 【螺絲與螺帽】
- CommonJS：是一個模塊化的標準，Node.js在使用的模塊化標準。適用與後端開發的標準。
- AMD（Async Module Definition）：在CommonJS基礎上衍生出來的適用於前端開發的模塊化標準。
- 特點：預加載，第一次訪問時，將所有的文件都加載出來。
- 優點：第一次訪問完成以後，再次訪問速度會很快
- 缺點：第一次加載，需要的時間會比較長
- 代表：requirejs
- CMD（Common Module Definition）：在CommonJS基礎上衍生出來的適用於前端開發的模塊化標準。
- 特點：懶加載，只有使用到的時候，纔會加載對應的模塊。
- 優點：第一次訪問速度會比較快
- 缺點：再次訪問其他模塊時會比較慢。
- 代表：seajs
require.JS
require.js概念
requirejs是AMD規範的一個實現，require.js是一個javascript文件，也是一個模塊加載器。模塊加載器：相當於canvas中封裝的圖片加載器，只不過一個是加載圖片的，一個加載js，文件的類型不一樣。
requirejs主要提供兩大功能：
- 加載模塊：可以加載AMD規範的模塊，也可以是普通的模塊，異步加載，並且能夠管理模塊之間的依賴。
- 規範了模塊的定義：有助於不同模塊之間的共享與依賴。
requirejs的優點：
- 提高了javascript文件的加載速度，避免不必要的堵塞。
- 獨特的模塊定義方式可以避免全局變量污染。
- 獨特的模塊定義方式可以在腳本層面聲明模塊之間的依賴。
requirejs初體驗
一、引入js文件
<!--1. 引入require.js文件-->
<script src="require.js"></script>二、定義模塊
//在a.js文件中
console.log("a模塊加載了");三、引用模塊
//require會自動找當前目錄下的js文件，a是文件名，不能寫後綴。
require(["a"]);API詳解
requirejs一共對外暴露三個全局變量
- requirejs - 用於加載模塊
- require - 用於加載模塊
- define - 用於定義模塊
require和requirejs是同一個函數，類似於$和jQuery的關係
require加載模塊
- 作用：加載模塊（amd模塊或者是普通模塊）
- 加載普通模塊，模塊加載完是會執行一遍的。
//第一個參數：數組，需要加載的模塊，異步加載的
//第二個參數：回調函數，在模塊都加載完畢之後，回調函數纔會執行
//require(["js/a", "js/b", "js/c"]);
require(["js/a", "js/b", "js/c"],function () {
console.log("我是最後執行的");
});define定義模塊
使用define函數可以定義一個AMD規範的模塊
//第一個參數：模塊的依賴
//第二個參數：模塊的主體
define([], function () {
console.log("a模塊加載了");
});好處：require獨特的定義方式，避免了全局變量的污染。
模塊之間的依賴
在使用define定義一個模塊時，如果模塊依賴於另一個模塊，我們可以通過define的第一個參數去指定。
//第一個參數：本模塊依賴的模塊列表 路徑是以html的路徑爲基準
//第二個參數：模塊的主體
define(["js/a"], function () {
console.log("a模塊依賴與b模塊");
});優點：可以在聲明模塊的時候就可以定義好依賴，那麼使用的時候，就不用在管模塊之間的依賴了。使用起來會更加的方便。
模塊的輸出（對外暴露的東西）
如果模塊僅僅是執行一些代碼實現某個功能，那麼直接引入該模塊，實現對應的功能即可，不需要返回值。如果該模塊的存在是爲了提供一些方法、對象或者其他一些內容，那麼這個模塊需要返回值。
在定義模塊的時候，我們通常需要對外返回一些內容，因爲使用define定義模塊，實質就是一個函數，因此可以使用return返回模塊的輸出。
define([], function () {
var util = {
sayHello:function (name) {
console.log("大家好，我是"+name);
},
sleep:function () {
console.log("好睏啊，我想要睡覺");
}
};
//通過return返回模塊的輸出
return util;
});想要獲取模塊的輸出，在function中傳遞形參即可。
//參數1：加載的模塊列表
//參數2：模塊加載完成後，會執行的回調函數,形參就是模塊的返回值
require(["b"], function (util) {
util.sayHello("張三");
util.sleep();
});如果依賴於多個模塊，應該怎麼辦？
//1. 如果依賴於多個模塊，並且多個模塊都有輸出，那麼我們需要使用參數一一對應，
//2. 這樣就可以獲取到多個模塊的輸出了。
//3. 即便某個模塊沒有輸出，我們也要指定一個參數佔着位置。
//4. 通常我們會把有輸出的模塊寫在前面，沒有輸出的模塊寫在後面。這樣方便寫參數。
require(["js/util", "js/common", "js/test"], function (util, demo) {
console.log(util);
console.log(demo);
});配置路徑和別名
- 使用require來加載某個模塊時，路徑會以當前html文件作爲參考。
- require可以使用config來配置一些內容，比如基礎路徑
require.config({
//1. 配置所有模塊的基礎路徑，該路徑相對於引入了requirejs的html文件的路徑。
//2. 所有的路徑都會自動的拼上baseUrl
baseUrl:"js/",
//1. 給模塊起別名，方便使用，在依賴的模塊中也能使用
paths:{
"common":"common/common",
"util":"util/util",
"test":"login/test"
}
});
//引入模塊時，只需要直接引入模塊的別名即可。
require(["common", "util", "test"],function (demo, util) {
console.log(demo);
console.log(util);
});加載非AMD規範的模塊
requirejs可以通過require函數加載模塊。在加載不是AMD規範的模式時，會出現問題，需要做特殊的處理。
市面上有很多模塊，並沒有實現AMD模塊化規範，沒有實現模塊化的模塊也可以使用requirejs去加載，但是require加載時，僅僅會執行這個js文件，並不能幫助這個模塊實現依賴的加載，也無法獲取到這個模塊的輸出。
我們可以通過require.config爲沒實現AMD規範加載依賴項。
require.config({
baseUrl:"js/",
path:{
"base":"base"
},
//墊：配置普通模塊的依賴與輸出
shim:{
"base":{
//配置普通模塊的依賴項
deps:["依賴項1","依賴項2"],
//配置模塊的輸出
exports: "輸出結果"
}
}
});使用模塊化加載jquery
想使用模塊化加載第三方庫的時候，首先需要檢查第第三方庫是否支持模塊化。
{% asset_img jquery.png [模塊化] %}
如上圖，說明這個第三方庫是支持模塊化的，可以直接使用require進行加載。
具名模塊與匿名模塊
define聲明時，第一個參數可以是該模塊的名字，如果聲明瞭模塊名，在配置時，模塊別名就不能夠調整了。