简单的js异步文件加载器

EdwardUp 发布于2019-08-19 17:17 / 3134人阅读

摘要：我们经常会遇到这种场景，某些页面依赖第三方的插件，而这些插件比较大，不适合打包到页面的主里假设我们使用的是的方式，会打包成一个文件，那么这个时候我们通常会异步获取这些插件文件，并在下载完成后完成初始化的逻辑。

我们经常会遇到这种场景，某些页面依赖第三方的插件，而这些插件比较大，不适合打包到页面的主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异步加载数据

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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