詳解js異步文件加載器

更新時(shí)間：2016年01月24日 17:25:33 作者：animabear

這篇文章主要為大家介紹了js異步文件加載器的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

我們經(jīng)常會遇到這種場景，某些頁面依賴第三方的插件，而這些插件比較大，不適合打包到頁面的主js里（假設(shè)我們使用的是cmd的方式，js會打包成一個(gè)文件），那么這個(gè)時(shí)候我們通常會異步獲取這些插件文件，并在下載完成后完成初始化的邏輯。

以圖片上傳為例，我們可能會用到plupload.js這個(gè)插件，那么我們會這么寫：

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

但是我們的頁面通常由多個(gè)獨(dú)立的模塊（組件）構(gòu)成，如果頁面上的A、B兩個(gè)模塊都依賴于plupload.js, 那是不是在兩個(gè)地方都要把上面的代碼寫一遍。如果這么干，在plupload.js被下載下來之前，可能會發(fā)起兩個(gè)請求，由于是并行下載，js文件可能會被重復(fù)下載，而不是第一次下載下來，第二次取緩存的內(nèi)容。

下圖是頁面多個(gè)組件依賴vue.js的情況（jquery和vue混用的場景）：

所以，在實(shí)際使用中需要加鎖，即當(dāng)腳本正在加載時(shí)，不應(yīng)該再重復(fù)請求腳本，等待加載完成后，依次執(zhí)行后面的邏輯，有promise這個(gè)好工具，實(shí)現(xiàn)起來很簡單。

// vue加載器
var promiseStack = [];
function loadvue() {
  var promise = $.Deferred();
  if (loadvue.lock) {
    promiseStack.push(promise);
    
  } else {
    loadvue.lock = true;
    window.Vue ? 
       promise.resolve() : // 這里寫錯(cuò)了，window.Vue為true的時(shí)候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 });

再看看請求：

好了，到這里似乎解決問題了，但是假如我的頁面上存在多個(gè)插件依賴，比如既依賴plupload.js又依賴vue.js，難道我要把上面的代碼再寫一遍（怎么感覺好像說過這話）？這樣不就冗余了么？所以我們需要一個(gè)異步加載器的生成器，能夠幫助我們生成多個(gè)異步加載器。

/**
 * @des: js異步加載器生產(chǎn)器
 * @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');

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

以上就是關(guān)于js異步文件加載器的詳細(xì)內(nèi)容，希望對大家的學(xué)習(xí)有所幫助。

您可能感興趣的文章: