詳解js非同步檔案載入器，詳解js非同步載入_PHP教程

詳解js非同步檔案載入器，詳解js非同步載入

我們經常會遇到這種情境，某些頁面依賴第三方的外掛程式，而這些外掛程式比較大，不適合打包到頁面的主js裡（假設我們使用的是cmd的方式，js會打包成一個檔案），那麼這個時候我們通常會非同步擷取這些外掛程式檔案，並在下載完成後完成初始化的邏輯。

以圖片上傳為例，我們可能會用到plupload.js這個外掛程式，那麼我們會這麼寫：

!window.plupload ?    $.getScript( "/assets/plupload/plupload.full.min.js", function() {      self._initUploader();    }) :    self._initUploader();    

但是我們的頁面通常由多個獨立的模組（組件）構成，如果頁面上的A、B兩個模組都依賴於plupload.js, 那是不是在兩個地方都要把上面的代碼寫一遍。如果這麼幹，在plupload.js被下載下來之前，可能會發起兩個請求，由於是並行下載，js檔案可能會被重複下載，而不是第一次下載下來，第二次取緩衝的內容。

是頁面多個組件依賴vue.js的情況（jquery和vue混用的情境）：

所以，在實際使用中需要加鎖，即當指令碼正在載入時，不應該再重複請求指令碼，等待載入完成後，依次執行後面的邏輯，有promise這個好工具，實現起來很簡單。

// 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;

然後在依賴vue.js地方：

loadvue().then(function() { // do something }); 

再看看請求：

好了，到這裡似乎解決問題了，但是假如我的頁面上存在多個外掛程式依賴，比如既依賴plupload.js又依賴vue.js，難道我要把上面的代碼再寫一遍（怎麼感覺好像說過這話）？這樣不就冗餘了嗎？所以我們需要一個非同步載入器的產生器，能夠協助我們產生多個非同步載入器。

/** * @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;};

然後我們可以產生非同步載入器並賦給window

// 全域載入器window.loadvue = loader.generate('vue', 'Vue', '/assets/vue/vue.min.js');window.loadPlupload = loader.generate('plupload', 'plupload', '/assets/plupload/plupload.full.min.js');

使用的時候同上，這樣就基本解決了我們的問題。

以上就是關於js非同步檔案載入器的詳細內容，希望對大家的學習有所協助。

您可能感興趣的文章:

• 比較簡單的非同步載入JS檔案的代碼
• js 實現圖片預先載入(js操作 Image對象屬性complete ，事件onload 非同步載入圖片)
• Javascript 非同步載入詳解(瀏覽器在javascript的載入方式)
• javascript 檔案的同步載入與非同步載入實現原理
• js非同步載入的三種解決方案
• 利用jQuery的deferred對象實現非同步按順序載入JS檔案
• 非同步動態載入js與css檔案的js代碼
• javascript loadScript非同步載入指令碼樣本講解

http://www.bkjia.com/PHPjc/1095276.htmlwww.bkjia.comtruehttp://www.bkjia.com/PHPjc/1095276.htmlTechArticle詳解js非同步檔案載入器，詳解js非同步載入 我們經常會遇到這種情境，某些頁面依賴第三方的外掛程式，而這些外掛程式比較大，不適合打包到頁面的...

