我們學習一個新的技術,熟練的使用之后,就應該去探索它的原理。這篇文章我們來探索下requirejs的原理。
從4個場景來探索requirejs的原理
場景1. 定義一個require依賴b模塊
場景2. 定義一個require依賴模塊b,模塊b依賴模塊c
場景3. 定義一個依賴來自外部的js模塊
場景4. 當出現循環依賴時
本篇博客講場景1
步驟一,斷點代碼到define方法,我們傳入的name,deps和callback被push到golbalDefQueue數據中
步驟二,斷點到requirejs方法,在這個方法內部調用了intakeDefines這個方法是對步驟1中golbalDefQueue數組內容轉換成module,並且調用module的init方法對模塊進行了初始化,這時候module的狀態為inited
步驟三:當所有的module都初始化后,進入了requirejs的settimeout函數。這里因為require(["b"], function(){})首先要生成一個自定義名字的模塊,它的依賴為b,然后執行這個自定義模塊的init並且設置這個module的狀態為enabled。
步驟四,init方法內部會調用enable方法,這個方法是一個遞歸的方法,對它的依賴module遞歸執行enable方法。父模塊會綁定一個子模塊的defined事件,當子模塊觸發defined事件時,會將已經defined的模塊加入到父模塊的依賴數組中,當所有的依賴都defined后,執行父模塊的的callback方法(也就是定義在require中的function)
好了,這里介紹了requirejs的加載過程,總結:
a. 首先執行define方法,將所有的定義的模塊都放到golbalDefQueue中
b. 執行requirejs方法,將所有的golbalDefQueue中的模塊取出,並轉換成module,這時候module的狀態為inited
c. 執行setimeout方法,根據require方法生產一個主module,然后eabled主module,並且依次enabled所有的依賴module。每次調用enable時,module的狀態為enabled
d. 當module的所有依賴都defined時,執行require的回調方法,將module的狀態更新為defined。
下篇文章繼續介紹下一個場景:當依賴模塊來自外部的js文件時,requirejs的執行過程。