模組化

在前端使用模組化開發，可以將程式碼根據功能實施模組的劃分，每個模組功能（職責）單一，在需要更改對應的功能的時候，只需要對指定的模組進行修改，其他模組不受任何影響。

為什麼要進行前端模組化？

1. 達到公共模組的複用
2. 可以很好的解決全域性變數汙染的問題
3. 可以很好的解決各個功能之間的依賴關係

如何實現前端模組化開發

JavaScript本身不支援模組化開發，但是可以通過一些手段來實現。

CommonJS是一個規範，用來規定模組化開發的標準。

CommonJS由於一系列的限制，在前端開發當中，並不能很好的被實現。
Nodejs中對於CommonJS這個規範有很好的實現。

CommonJS雖然不能再前端開發中很好進行實現，但是後面有人在CommonJS的基礎上做了其他的改變。

AMD Async Module Define (require.js) 也是一個規範，在CommonJS的基礎上產生的 //依賴前置

CMD Common Module Define (sea.js) [玉伯] 也是一個規範，在CommonJS的基礎上產生的 //依賴就近 as lazy as possible

逗樂：AMD沒有明顯的BUG,但是CMD明顯沒有BUG

如何實現模組 （require.js）

requirejs本身就是一個js檔案，這個檔案實現了AMD規範，所以可以幫助我們在前端開發中實現模組化！

模組的定義

//如果當前模組沒有任何依賴項
define(function(){
    
});

//如果一個模組要引用另外一個模組，就將模組的名稱放在第一個引數的陣列中
define(["模組","模組"], function(形參, 形參){

    //模組和形參一一對應，形參就表示每個對應的模組的返回值
    //可以通過當前函式的形參，接收其他模組的返回值！
    //定義模組的時候，可以有返回值，也可以沒有返回
    //如果有返回值，就可以將返回值交給呼叫該模組的模組使用
})

模組的使用

require函式可以用來引用模組，require的第一個引數為陣列，裡面寫所有要引用的模組的名稱

//只引用模組，不執行其他程式碼
require([]);

//引用模組，並且執行一些操作！
require([], function(){
    //可以通過當前函式的形參，接收其他模組的返回值！
})

入口檔案

在引用requirejs的script標籤中，可以指定一個入口檔案(data-main)，當require.js檔案載入完成之後，會自動執行，這個入口檔案中的程式碼！

模組的路徑

1. 預設情況下，模組的路徑是以呼叫模組的頁面的目錄為基礎的！
2. 當使用入口檔案的時候，模組的路徑是以入口檔案的目錄作為基礎的
3. 如果使用了require.config配置了baseUrl,就一配置的baseUrl為基礎查詢檔案

自定義模組路徑查詢

require.config({
    baseUrl: "/"
});

使用require 載入傳統的js

例如載入bootstrap， 因為bootstrap是基於jQuery，所以要手動的設定依賴項

在require.config({
//在shim屬性中，通過deps屬性，為bootstrap新增依賴項
shim: {

    bootstrap:{
        deps: []
    }
}

})

jquery支援模組化，jquery.cookie也支援模組化！

使用requirejs載入非模組化的內容

如果載入的非模組化的內容有依賴項，就要在config中，在shim屬性中，通過deps屬性，為這個非模組化的內容新增依賴項

如果載入的非模組化的內容要返回內容給我們使用，就要在config中，在shim屬性中，通過exports屬性，來設定返回的內容，這個內容可以是非模組化的檔案中任意一個變數名（字串）

匿名模組 和 具名模組

//匿名模組的定義
define([], function(){
    
})

//具名模組的定義
define("模組名", [], function(){
    
})

//具名模組中的模組名，必須和paths中設定的路徑的名稱一致，才能夠訪問，不然會出現路徑錯誤

graph LR
A-->B

graph LR
A-->B

sequenceDiagram
A->>B: How are you?
B->>A: Great!

gantt
dateFormat YYYY-MM-DD
section S1
T1: 2014-01-01, 9d
section S2
T2: 2014-01-11, 9d
section S3
T3: 2014-01-02, 9d

gantt
dateFormat YYYY-MM-DD
section S1
T1: 2014-01-01, 9d
section S2
T2: 2014-01-11, 9d
section S3
T3: 2014-01-02, 9d