30分鐘 帶你淺入requirejs源碼

由於最近項目想現實一個單頁功能，用的是react ，而後看了一下react route，挖槽 gzip後16k？ 而後我簡單寫了一個純單頁(不支持多頁的單頁，全部入口都通過rewrite跑到index.html) 才200多行(後續放github)。

而後項目是用webpack打包的， 發現webpack的 require.ensure不支持變量加載的（至少暫時沒發現）， 就是意味着我有多小頁面，就得在main(入口裏配多小頁面的關係)  這樣挫，領導會噴個人。

而後我今天早上起來，想看看requirejs是如何現實的

 

好前戲完畢 直入主題，你們都知道requrejs 有一個data-main 配置 ， 顧名思義就是 入口 相似c，java的main函數

 

main.js

require.config({
    paths: {
        'xm': 'xm',
        'adb': 'db'
    },
    waitSeconds: 50
})

requirejs(['xm', 'adb'], function(xm, db) {
    console.log(xm, 'main');

    db.db();

});

 

而後定義了2個文件 ，分別是xm.js 和db.js

//xm.js
define([], function() {
    return {
        name: 'xm',
        age: 22
    }
});

//db.js
define(['xm'], function(xm){

    return {
        db: function(){
            var who = xm.name;

            console.log(who, ' play');
        }
    }

})

 

首先，咱們把代碼疊起來， 一覽衆山小

能夠看到，其實requirejs 很簡單， 只有3個api（按個人理解， 有錯請指正）

一、requirejs， 引入定義的模塊，並執行callback的代碼
二、require，只引入，不執行
三、define，定義一個模塊

而後具體看實現的地方

前面1000多行都是 內部調用的 function的實現，例如判斷函數啊， 是否數組啊，遍歷，反向遍歷  etc.. ，太細節 就很少說了

 

着重看看後面的req變量的實現， 原本想加些標註的， 可是發現 每行都是重點， 正如小時候老師讓咱們畫重點，常常半頁書都畫上， 不如不畫了  囧。

 

一、這裏requirejs 就是上面說到的1的實現
二、config其實就是一系列的配置，例如base路徑，path(配短名字)， urlArgs(問號後加時間戳之類的),shim(沒有用define聲明的模塊，全局注入)   etc..
三、nextTick 其實就是一個定時器， 按你代碼 加入的模塊，逐個依次 建立script標籤 引入到頁面
四、而後 引入require的時候，他會默認加了一個版本，默認初始化(注意這行 req({}) )， 默認錯誤提示等等
五、define函數的實現

 

好，有了上面已經知道require大概有些什麼了， 而後來一塊兒看看某幾個重要的細節點。
首先代碼裏先看看data-main這個關鍵詞 ，其實就是遍歷全部的TagName爲script的，找到data-main， 而後處理了一下路徑

而後最後一行，其實才是真正的main入口初始化

 
而後第一次require會根據配了的data-main 如下列處理後，經過req.load 自動引入main.js 

 

第一次自動調用requirejs 內容基本都是默認值，沒啥好看的，  來 一塊兒看看咱們main.js 裏主動調用的requrejs、

而後 繼續跟下去  發現最後調用了Module的有個each，而後是會調用本身的fetch，load進行一個一個按順序像main加載步驟同樣 加載

 

 

 

由於時間緣由，有些太細的點就不深刻一一步析  但願此文對初瞭解requirejs的同窗有所幫助，謝謝觀看完畢。