html文件中的<script>標(biāo)簽中的代碼或src引用的js文件中的代碼是同步加載和執(zhí)行的
html文件中的<script>標(biāo)簽中的代碼使用document.write()方式引入的js文件是異步執(zhí)行的
Web動態(tài)加載JS外部文件(script標(biāo)簽)
異步加載文件。當(dāng)頁面還有同步代碼執(zhí)行的時候。異步加載從控制臺上看到的顯示。一直是pending。文件很小的額話其實早就加載回來了。只是js是單線程的。沒有功夫去處理顯示狀態(tài)。
面向?qū)ο蟮姆绞綄崿F(xiàn)require.js
問題：這里都有哪些類型的對象呢？
答案：至少有模塊（Module）這一類對象
那模塊類對象有哪些數(shù)據(jù)呢?
Module.id // 模塊id
Module.name // 模塊名字
Module.src // 模塊的真實的uri路徑
Module.dep // 模塊的依賴
Module.cb // 模塊的成功回調(diào)函數(shù)
Module.errorFn // 模塊的失敗回調(diào)函數(shù)
Module.STATUS // 模塊的狀態(tài)（等待中、正在網(wǎng)絡(luò)請求、準(zhǔn)備執(zhí)行、執(zhí)行成功、出現(xiàn)錯誤……）
又有哪些對應(yīng)的操作這些數(shù)據(jù)的方法呢?
Module.prototype.init // 初始化，用來賦予各種基本值
Module.prototype.fetch // 通過網(wǎng)絡(luò)請求獲取模塊
Module.prototype.analyzeDep // 分析、處理模塊的依賴
Module.prototype.execute // 運(yùn)算該模塊
先想一下require.js是怎么使用的。
index.html頁面引入
<script type="text/javascript" src="./require.js" data-main="main"></script>
data-main 是主文件的入口。main.js里就是主文件，里面有require。然后其他js文件就是定義模塊，define()。
假設(shè)main.js現(xiàn)在如下
require(['a', 'b'], function (a, b) {
a.hi();
b.goodbye();
}, function () {
console.error('Something wrong with the dependent modules.');
});
這個文件執(zhí)行的時候。我們先要去加載依賴的a和b模塊。我們既然用Module對象來描述每一個模塊對象。一般構(gòu)造函數(shù)都如下。有個init
function Module(name, dep, cb, errorFn) {
this.init(name, dep, cb, errorFn);
}
所以我們在解析main.js時候就分別對a和b實例化。只是這時候的實例化的主要目的是執(zhí)行Module上的加載js函數(shù)。
如何異步加載js文件呢。這里用的是動態(tài)生成script標(biāo)簽。新的<script>元素加載js文件。此文件當(dāng)元素添加到頁面之后立刻開始下載。等到?jīng)]有同步代碼執(zhí)行時候。立刻執(zhí)行加載好的js文件。
當(dāng)執(zhí)行加載好的a.js文件時候，就會執(zhí)行define函數(shù)。這里我們隊剛剛實例化的a模塊進(jìn)行豐富。
let module = modules[name];
module.name = name;
module.dep = dep;
module.cb = cb;
module.errorFn = errorFn;
如果define函數(shù)還依賴別的模塊。要繼續(xù)去加載別的模塊。
碰到了一個難點(diǎn)：如何分析和處理模塊的依賴？
舉個例子:main.js必須等a和b模塊都加載執(zhí)行完成后才能執(zhí)行main的回調(diào)。
我想了一個方法：記數(shù)法。分兩步走。
- 為
Module原型新增Module.depCount屬性，初始值為該模塊依賴模塊數(shù)組的長度。 - 假如
depCount===0，說明該模塊依賴的模塊都已經(jīng)運(yùn)算好了，通過setter觸發(fā)執(zhí)行該模塊。 - 某模塊執(zhí)行成功之后，觸發(fā)下一步。
- 下一步為：通過對象
mapDepToModuleOrTask，查找到依賴與該模塊的所有模塊，那么讓那些模塊都執(zhí)行depCount--。
注：對象mapDepToModuleOrTask的作用是映射被依賴模塊到依賴模塊之間的關(guān)系。
結(jié)構(gòu)如下圖所示。舉個例子：當(dāng)模塊a準(zhǔn)備好之后，我們就遍歷mapDepToModule['a']對應(yīng)的數(shù)組，里面的每一項都執(zhí)行depCount--。
分析依賴模塊這個方法
Module.prototype.analyzeDep = function () {
let depCount = this.dep ? this.dep.length : 0;// 依賴的模塊數(shù)
if (depCount === 0) {//如果不依賴別的模塊，直接執(zhí)行回調(diào)。
this.execute();//執(zhí)行模塊回調(diào)
return;
}
Object.defineProperty(this, 'depCount', { // 如果依賴別的模塊，就增加一個depCount的屬性。當(dāng)依賴加載完一個depCount就--。知道depCount=0。觸發(fā)回調(diào)函數(shù)
get() {
return depCount;
},
set(newDepCount) {
depCount = newDepCount;
if (newDepCount === 0) {
this.execute();
}
}
});
this.dep.forEach((depModuleName) => { // 遍歷該模塊的依賴模塊，再加載依賴模塊
if (!modules[depModuleName]) { // 映射所有依賴該(depModuleName)模塊的模塊
let module = new Module(depModuleName);
modules[depModuleName] = module;
}
if (!mapDepToModuleOrTask[depModuleName]) {
mapDepToModuleOrTask[depModuleName] = [];
}
mapDepToModuleOrTask[depModuleName].push(this); //當(dāng)前模塊的依賴模塊都push當(dāng)前模塊
});
}
處理依賴循環(huán)
我們有時候會定于循環(huán)依賴的模塊，比如a需要b并且b需要a，會造成死循環(huán)(可以在代碼中判斷是循環(huán)依賴的話a需要b，b有需要a。在加載b模塊de時候。不再去加載a模塊)。這樣就不會造成死循環(huán)了，但是在這個情況下當(dāng)b模塊調(diào)用時他將會從a獲得一個undefined值。所以解決辦法是模塊b的回調(diào)函數(shù)中，并不能直接引用到a，需要使用require方法包住。
處理辦法
// a.js
define(['b'],function (b) {
var hi = function () {
console.log('hi');
};
b.goodbye();
return {
hi: hi
}
});
// b.js
define(['require', 'a'], function (require) {
var goodbye = function () {
console.log('goodbye');
};
// 因為在運(yùn)算b的時候，a還沒準(zhǔn)備好，所以不能直接拿到a，只能用require再發(fā)起一次新的任務(wù)
require(['a'], function (a) {
a.hi();
});
return {
goodbye: goodbye
}
});
這樣一來原先的require.js就有問題了
原先的設(shè)計中， 每一個define是跟一個模塊一一對應(yīng)的， require只能用一次，用于主入口模塊（如：main.js）的加載。現(xiàn)在define中還需要解析require，require也需要解析依賴，執(zhí)行回調(diào)。所以require也應(yīng)當(dāng)是一個模塊。但這個模塊不需要fetch。我將它命名為：任務(wù)（Task），這是一個有別于Module的新的類。
每一次調(diào)用require，相當(dāng)于新建一個Task（任務(wù)）。這個任務(wù)的功能是：當(dāng)任務(wù)的所有依賴都準(zhǔn)備好之后，執(zhí)行該任務(wù)的成功回調(diào)函數(shù)。
有沒有發(fā)現(xiàn)這個Task原型與Module很像？它們都有依賴、回調(diào)、狀態(tài)，都需要分析依賴、執(zhí)行回調(diào)函數(shù)等方法。但是又有些不同，比如Task沒有網(wǎng)絡(luò)請求，所以不需要fetch這樣的方法。
所以，我讓Task繼承了Module，然后重寫某些方法。
作者的博客--實現(xiàn)require
作者的代碼
我仿照寫的代碼
JavaScript 模塊簡史
