我们经常会遇到这样的场景，有些页面依赖第三方插件，而这些插件太大，无法打包到页面的主js中(假设我们使用的是cmd模式，js会打包成一个文件)，所以这时候我们通常会异步获取这些插件文件，下载后完成初始化的逻辑。

以图片上传为例，我们可能会用到plugin ploplopload.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混合使用):

因此，在实际使用中，我们需要锁定，即在加载脚本时，我们不应该再次请求脚本。加载完成后，我们将依次执行以下逻辑。有了好的工具承诺，实现起来非常简单。

//vue加载程序var promiseStack=[]；函数loadvue() { var promise=$。递延()；if(load vue . lock){ promisestack . push(promise)；} else { load vue . lock=true；窗户。Vue？Promise.resolve() : //这里有一个错误。当窗口。Vue为真，lock应设置为假。我修改了$。getscript('/assets/vue/vue . min . js '，function(){ load vue . lock=false；promise . resolve()；promisestack . foreach(function(prom){ prom . resolve()；});});}返回承诺；} window . load vue=load vue；然后是你依赖vue.js的地方：

loadvue()。然后(function() { //做某事})；再看看请求：

好了，这里看起来问题已经解决了，但是如果我的页面上有多个插件依赖，比如依赖plupload.js和vue.js，我还要重新写上面的代码吗(怎么感觉这样说)？这不是多余的吗？因此，我们需要一个异步加载器的生成器，它可以帮助我们生成多个异步加载器。

/** * @des: js异步加载器生成器* @param {string} name加载器name * @param {string}全局全局变量* @param {string} url加载地址* */var promiseStack={ }；exports.generate=function(name，global，url) { var foo=function() { if(！promiseStack[name]){ promiseStack[name]=[]；} var promise=$。递延()；if(foo . lock){ Promisestack[name]。推(答应)；} else { foo.lock=trueif(window[global]){ foo . lock=false；promise . resolve()；} else { $。getScript(url，function(){ foo . lock=false；promise . resolve()；promiseStack[name]。forEach(function(prom){ prom . resolve()；});});} }返回承诺；};返回foo};然后我们可以生成一个异步加载器，并将其分配给window。

//全局加载器window . load vue=loader . generate(' vue '，' vue '，'/assets/vue/vue . min . js ')；window . loadPlupload=loader . generate(' plupload '，' plupload '，'/assets/plupload/plupload . full . min . js ')；使用时同上，基本解决了我们的问题。

以上就是关于js异步文件加载器的详细内容，希望对大家的学习有所帮助。