(一)入口
通過 data-main 去加載 JS 模塊,是通過 req(cfg) 入口去進行處理的。
為了跟蹤,你可以在此 加斷點 進行調(diào)試跟蹤。
(二)
req({ })執(zhí)行時,function newContext() 已經(jīng)創(chuàng)建了上下文環(huán)境 context。我們可以看看 context 擁有哪些屬性與方法。
通過執(zhí)行 context.confgiure(config)即可加載 data-main所對應的js文件(main.js)。
當req(cfg)執(zhí)行,config值 如右圖所示---------
在context.confgiure()函數(shù)最后一行代碼中,開始執(zhí)行 context.require() .
context.require(...),其中 context.require = context.makeRequire();
其中,makeRequire() 以及 localRequire() 這里已經(jīng)形成了閉包。
因為在 req( { } )調(diào)用makeRequire()時 ,已經(jīng)直接返回 localRequire(),因此 context.require(..),直接進入 localRequire()函數(shù)。
localRequire()函數(shù)里,做很很多事,但是,由于此時 全局隊列,局部隊列( defQueue、globalDefQueue,) 都為空,暫時不考慮 intakeDefines(),
重點看看 context.nextTick()這里到底做了些什么處理。
如果Module 不存在,則創(chuàng)建一個新的Module;存在,則直接返回。我們可以看看創(chuàng)建的 requireMod 擁有哪些屬性值呢?
. Module對象采用 混合構(gòu)造方式,將方法都寫在了 原型鏈上。
Module ==
整個 data-main 中的 js 文件 主 加載順序如下
===> ===> ===>===>===>===>===>
Module.init() Module.check() 都是 對 main Module進行信息處理,最后獲得了 data-mian 中js文件的路徑,控制器又回到了 req.load() 手里
請看下面核心代碼。
req.load() 先創(chuàng)建了一個<script src="main.js"></script> 標簽,給其注入了一自定義屬性,
綁定了一個事件然后,將這個標簽<head></head>標簽中,這樣,瀏覽器自動會去加載這個js文件。
從頁面上,我們可以清晰的看到,會多了一行代碼。
至此,data-main 文件的加載 過程,已經(jīng)梳理完成。
http://www.cnblogs.com/xianrongbin/p/7158165.html