我们经常会碰到这类场景，某些页面依靠第三方的插件，而这些插件比较大，不适合打包到页面的主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');

运用的时刻同上，如许就基本解决了我们的题目。所以，我想说的是抽象思维很主要。