簡單的js異步文件加載器

EdwardUp 發布于2019-08-19 17:17 / 3158人閱讀

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

我們經常會遇到這種場景，某些頁面依賴第三方的插件，而這些插件比較大，不適合打包到頁面的主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");

使用的時候同上，這樣就基本解決了我們的問題。所以，我想說的是抽象思維很重要。

云服務器 GPU云服務器異步加載js文件異步加載js的方法 js獲取異步加載的數據格式 js異步加載數據

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/78383.html

javascript功能插件大集合，寫前端的親們記得收藏

摘要：一個專注于瀏覽器端和兼容的包管理器。一個整合和的最佳思想，使開發者能快速方便地組織和編寫前端代碼的下一代包管理器。完全插件化的工具，能在中識別和記錄模式。健壯的優雅且功能豐富的模板引擎。完整的經過充分測試和記錄數據結構的庫。【導讀】：GitHub 上有一個 Awesome – XXX 系列的資源整理。awesome-javascript 是 sorrycc 發起維護的 JS 資源列表...

cfanr 2019-08-20 10:34 評論0 收藏0
javascript功能插件大集合前端常用插件 js常用插件

摘要：轉載來源包管理器管理著庫，并提供讀取和打包它們的工具。能構建更好應用的客戶端包管理器。一個整合和的最佳思想，使開發者能快速方便地組織和編寫前端代碼的下一代包管理器。很棒的組件集合。隱秘地使用和用戶數據。轉載來源：https://github.com/jobbole/aw... 包管理器管理著 javascript 庫，并提供讀取和打包它們的工具。?npm – npm 是 javasc...

netmou 2019-08-23 12:28 評論0 收藏0
javascript功能插件大集合前端常用插件 js常用插件

摘要：轉載來源包管理器管理著庫，并提供讀取和打包它們的工具。能構建更好應用的客戶端包管理器。一個整合和的最佳思想，使開發者能快速方便地組織和編寫前端代碼的下一代包管理器。很棒的組件集合。隱秘地使用和用戶數據。轉載來源：https://github.com/jobbole/aw... 包管理器管理著 javascript 庫，并提供讀取和打包它們的工具。?npm – npm 是 javasc...

Hydrogen 2019-08-02 11:46 評論0 收藏0
JavaScript 資源大全中文版

摘要：官網全新的靜態包管理器。官網一個整合和官網的最佳思想，使開發者能快速方便地組織和編寫前端代碼的下一代包管理器。官網小巧的兼容的所見即所得的富文本編輯器。官網富文本編輯器。官網由制作，適用于每天寫作的富文本編輯器。 1. 包管理器管理著 javascript 庫，并提供讀取和打包它們的工具。 npm：npm 是 javascript 的包管理器。官網 cnpm：cnpm 是由于國...

jzman 2019-08-23 17:18 評論0 收藏0
前端webpack workflow（二）——Webpack基本使用

摘要：還可以用作文件加載使用，詳細請看。實用命令除了簡單運行，還可以添加幾個參數，方便部署文件處理。以上僅僅介紹了前端開發最基本的用法，更多參數以及功能使用，參考官網作者：Jogis原文鏈接：https://github.com/yesvods/Blog/issues/3轉載請注明原文鏈接以及作者信息 showImg(http://itanguo.cn/wp-content/uploads...

roadtogeek 2019-08-21 10:47 評論0 收藏0