RequireJS原始碼初探

2021-09-29 19:32:50 字數 2105 閱讀 8208

前兩天跟著葉小釵的部落格,看了下requirejs的原始碼,大體了解了其中的執行過程。不過在何時進行依賴項的載入,以及具體的**在何處執行,還沒有搞透徹,奈何能力不夠,只能先記錄一下了。

看原始碼從頭開始看,肯定是不切實際的。按照葉小釵的方法,是從data-main開始的,所以我們也從那裡開始把!

首先,頁面會有一段js標籤,會去載入requirejs:

requirejs中,**是乙個自執行的方法:

var requirejs,require,define;

(function(global))(this);

原始碼中,主要是定義了三個全域性的變數——requirejs,require,define,下面是乙個自執行的方法。

那麼主要就是看看這個方法裡面都幹了什麼吧!

//定義環境變數

//定義各種方法

//檢查requirejs,require,define

//核心部分

function newcontext(){}//定義核心部分方法

req = requirejs = function();

req.config = function(){};

req({});//建立預設的上下文

req.createnode = function (config, modulename, url) ;

//洋洋灑灑,載入**

req.load = function() else

};if (isbrowser && !cfg.skipdatamain)

define = function(){};

req.exec =function(){};

req(cfg);//執行配置檔案

上面的**中,關鍵的方法定義其實只有兩個:

然後在上面的**中,它做了下面三件事:

基本上就是這個套路了!

requirejs最精彩的部分,就在這個方法裡面了!

function newcontext(contextname)

return mod;

}function checkloaded()

context = );

checkloaded();

});}

return localrequire;

},load: function (id, url) ,

onscriptload : function() ,

completeload : function()

mod = getown(registry, modulename);

checkloaded();

}//...

}module.prototype = else

},fetch : function())(this.shim.deps || , bind(this, function () ));

} else

},load: function ()

},check : function(),

enable : function()

};context.require = context.makerequire();//其實是把localrequire賦值給context.require

return context;

};

這個newcontext()裡面定義大量的載入模組、校驗、檢查等工作。可以看到這個方法,主要是定義了乙個context物件和module方法。

然後執行這個方法後,會自動呼叫context物件的makerequire()方法,這個makerequire實際上呼叫的又是內部定義的localrequire()。localrequire則是處理載入任務的核心——比如依賴的檢查,模組的載入等等。

req.nexttick = typeof settimeout !== 'undefined' ? function (fn)  : function (fn) ;
所有的載入都會交由這個nexttick執行,暫時沒有搞清楚...

RequireJS原始碼初探

前兩天跟著葉小釵的部落格,看了下requirejs的原始碼,大體了解了其中的執行過程。不過在何時進行依賴項的載入,以及具體的 在何處執行,還沒有搞透徹,奈何能力不夠,只能先記錄一下了。看原始碼從頭開始看,肯定是不切實際的。按照葉小釵的方法,是從data main開始的,所以我們也從那裡開始把!首先,...

OkHttp原始碼初探

在之前的文章我中我們介紹了okhttp的基本使用方法並簡單說明了原始碼下各個module的功能作用,從這篇開始我們將要開始分析okhttp的原始碼。首先,我們先來回憶一下okhttp的使用過程 1.建立乙個okhttpclient物件 2.建立乙個request物件 3.呼叫okhttpclient...

jQuery原始碼初探(3)

今天我們先來 聊聊 jquery 中的無 new 構造 寫過 js 物件導向的同學知道,一般我們是這麼來寫的 建構函式 function myjquery 方法掛載到原型上 myjquery.prototype.say function var myjquery new myjquery 例項化 c...