RequireJS 基礎學習

標籤：

? 1、起步?

2、基本配置

// Defaults. Do not set a default for map  config to speed up normalize(), which will run faster if there is no default.

// normalize 是一個對模組進行正式名稱的函數，比如他會根據函數的名稱進行取名標記！ 

config = {

                waitSeconds: 7,

                baseUrl: ‘./‘,

                paths: {},

                bundles: {},

                pkgs: {},

                shim: {},

                config: {}

            },

注意

1）baseUrl 如果沒有手工配置那麼就是當前路徑，個人覺得baseUrl最好採用絕對路徑，也就是 /project/

2）path 顯示指定模組的路徑，比如註冊 jquery，那麼必須知道jquery的路徑才能運行jquery的檔案，當然可以不配置這個路徑，因為requireJS在組件定義define的時候，預設把檔案名稱作為組件名稱，然後在調用組件的時候require根據依賴的組件名稱在設定的目錄下去尋找該js，所以，define、require 告訴我們命名規範很重要！

3）jQuery 預設支援AMD 規範，在jQuery源碼裡面可以看到，自己註冊了AMD，但是這裡註冊有個問題，那就是預設為“jquery”，原因就是因為AMD預設使用檔案名稱作為JS的定義，剛好，jQuery的檔案名稱就是小寫形式，所以為了編碼誤會，採用這種小寫方式註冊！

（注意雖然 jQuery 註冊了AMD，但是jQuery同樣註冊了全域變數，所以在任何地方都可以使用$ ）

3、函數介紹

1）requirejs.config ， 這就是一個重寫，覆蓋預設配置選項，最常用的就是baseUrl 以及 path

2）define（name , deps ,callback），第一個是模組的名字，預設為檔案名稱，其實就是模組唯一的ID，第二個就是依賴項，第三個是會調函數，而且依賴項作為參數傳入回呼函數中。當通過require依賴需要哪個模組時，首先就是載入name的script標籤，其次載入依賴項的標籤，等所有js檔案載入完成，那麼就開始進行調用回調方法！內部是這樣的，把所有依賴項都儲存在一個數組中，每載入一個依賴項就把數組減少一個，直到所有都載入完成！

3）require（deps ,callback） ,  第一個是一個依賴數組，requireJS首先會根據數組的每一項依賴進行js檔案載入，這個時候如果path中配置會從path 中尋找，如果沒有配置就會以此名稱為路徑名稱在當前路徑下尋找，這些js的載入其實就是通過

建立script標籤完成（所謂的非同步載入），每載入的js檔案都會註冊一個事件onScriptLoad，載入之後立即調用define方法，同樣也是載入JS標籤，他們的載入順序是根據註冊的順序，換句話如果A依賴B，那麼先載入A後載入B，不用擔心報錯，因為他們的調用是在依賴完全載入之後才會回呼函數，同樣在添加標籤時，還會為這個js載入完成註冊一個事件：

node.addEventListener(‘load‘, context.onScriptLoad, false); 直到所有依賴項都載入完成，才會調用回調方法！

其中，getScriptData 首先是移除剛剛註冊的事件，其二是返回script標籤以及模組的id名稱，也就是data.id；接著繼續執行completeLoad ，這裡才會真正去執行回調方法！

4 )根據模組名稱返迴路徑 

url = context.nameToUrl(normalizedName);

5 )相對當前模組的相對路徑，檔案不一定存在

url = require.toUrl("./style.css");

4、載入機制

1）首先通過jsp定義的data-main 以及 src 的script載入require.js ，以及通用配置項和require函數

2）解析require函數時，為每個依賴項建立script標籤，建立script標籤時為該node定義載入事件

3）一旦標籤寫入html中，就會非同步載入，載入過程中RequireJS會根據onreadystatechange監聽狀態

4）一旦load完成，那麼就執行js裡面的代碼，因為是載入組件，所以首先執行的就是define

5）RequireJS解析define函數，只是把一些依賴項加入一個全域的隊列當中

6）載入完成之後，同時define也解析完成之後，那麼之前的onScriptLoad事件監聽就會被執行，

7）onScriptLoad其一就是擷取這script的模組getScriptData，其二就是遍曆全域隊列，運行每一個依賴項

8）依賴項如果又是一個模組，那麼和之前載入依賴項的步驟完全相同（建立標籤、註冊事件），直到所有的依賴項都載入完成

9）以上調用就是一個遞迴的過程，所以一旦所有都調用完成，依賴都載入完畢，那麼當前項的回呼函數就會被執行！

RequireJS 基礎學習