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异步文件加载器的详细内容，希望对大家的学习有所帮助。