前兩天跟著葉小釵的部落格,看了下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...