《PHP學習：詳解js異步文件加載器》要點：
本文介紹了PHP學習：詳解js異步文件加載器，希望對您有用。如果有疑問，可以聯系我們。
PHP實戰我們經常會遇到這種場景,某些頁面依賴第三方的插件,而這些插件比較大,不適合打包到頁面的主js里(假設我們使用的是cmd的方式,js會打包成一個文件),那么這個時候我們通常會異步獲取這些插件文件,并在下載完成后完成初始化的邏輯.
PHP實戰以圖片上傳為例,我們可能會用到plupload.js這個插件,那么我們會這么寫：
PHP實戰
!window.plupload ?
$.getScript( "/assets/plupload/plupload.full.min.js", function() {
self._initUploader();
}) :
self._initUploader();
PHP實戰但是我們的頁面通常由多個獨立的模塊(組件)構成,如果頁面上的A、B兩個模塊都依賴于plupload.js, 那是不是在兩個地方都要把上面的代碼寫一遍.如果這么干,在plupload.js被下載下來之前,可能會發起兩個哀求,由于是并行下載,js文件可能會被重復下載,而不是第一次下載下來,第二次取緩存的內容.
PHP實戰下圖是頁面多個組件依賴vue.js的情況(jquery和vue混用的場景)：
PHP實戰
PHP實戰所以,在實際使用中需要加鎖,即當腳本正在加載時,不應該再重復哀求腳本,等待加載完成后,依次執行后面的邏輯,有promise這個好工具,實現起來很簡單.
PHP實戰
// vue加載器
var promiseStack = [];
function loadvue() {
var promise = $.Deferred();
if (loadvue.lock) {
promiseStack.push(promise);
} else {
loadvue.lock = true;
window.Vue ?
promise.resolve() : // 這里寫錯了,window.Vue為true的時候lock要置為false,我在后面改過來了
$.getScript( "/assets/vue/vue.min.js", function() {
loadvue.lock = false;
promise.resolve();
promiseStack.forEach(function(prom) {
prom.resolve();
});
});
}
return promise;
}
window.loadvue = loadvue;
PHP實戰然后在依賴vue.js地方：
PHP實戰
loadvue().then(function() { // do something });
PHP實戰再看看哀求：
PHP實戰
PHP實戰好了,到這里似乎辦理問題了,但是假如我的頁面上存在多個插件依賴,比如既依賴plupload.js又依賴vue.js,難道我要把上面的代碼再寫一遍(怎么感覺好像說過這話)?這樣不就冗余了么?所以我們需要一個異步加載器的生成器,能夠幫助我們生成多個異步加載器.
PHP實戰
/**
* @des: js異步加載器生產器
* @param {string} name 加載器名稱
* @param {string} global 全局變量
* @param {string} url 加載地址
**/
var promiseStack = {};
exports.generate = function(name, global, url) {
var foo = function() {
if (!promiseStack[name]) {
promiseStack[name] = [];
}
var promise = $.Deferred();
if (foo.lock) {
promiseStack[name].push(promise);
} else {
foo.lock = true;
if (window[global]) {
foo.lock = false;
promise.resolve();
} else {
$.getScript(url, function() {
foo.lock = false;
promise.resolve();
promiseStack[name].forEach(function(prom) {
prom.resolve();
});
});
}
}
return promise;
};
return foo;
};
PHP實戰然后我們可以生成異步加載器并賦給window
PHP實戰
// 全局加載器
window.loadvue = loader.generate(
'vue',
'Vue',
'/assets/vue/vue.min.js');
window.loadPlupload = loader.generate(
'plupload',
'plupload',
'/assets/plupload/plupload.full.min.js');
PHP實戰使用的時候同上,這樣就基本辦理了我們的問題.
PHP實戰以上就是關于js異步文件加載器的詳細內容,希望對大家的學習有所贊助.
維易PHP培訓學院每天發布《PHP學習：詳解js異步文件加載器》等實戰技能，PHP、MYSQL、LINUX、APP、JS,CSS全面培養人才。
轉載請注明本頁網址：
http://www.snjht.com/jiaocheng/7635.html
