详解js异步文件加载器
|
《：详解js异步文件加载器》要点： PHP实战我们经常会遇到这种场景,某些页面依赖第三方的插件,而这些插件比较大,不适合打包到页面的主js里(假设我们使用的是cmd的方式,js会打包成一个文件),那么这个时候我们通常会异步获取这些插件文件,并在下载完成后完成初始化的逻辑. PHP实战以图片上传为例,我们可能会用到plupload.js这个插件,那么我们会这么写： PHP实战
!window.plupload ?
$.getScript( "/assets/plupload/plupload.full.min.js",function() {
self._initUploader();
}) :
self._initUploader();
PHP实战但是我们的页面通常由多个独立的模块(组件)构成,如果页面上的A、B两个模块都依赖于plupload.js,那是不是在两个地方都要把上面的代码写一遍.如果这么干,在plupload.js被下载下来之前,可能会发起两个哀求,由于是并行下载,js文件可能会被重复下载,而不是第一次下载下来,第二次取缓存的内容. PHP实战下图是页面多个组件依赖vue.js的情况(jquery和vue混用的场景)： PHP实战 PHP实战所以,在实际使用中需要加锁,即当脚本正在加载时,不应该再重复哀求脚本,等待加载完成后,依次执行后面的逻辑,有promise这个好工具,实现起来很简单. PHP实战
// 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;
PHP实战然后在依赖vue.js地方： PHP实战
loadvue().then(function() { // do something });
PHP实战再看看哀求： PHP实战 PHP实战好了,到这里似乎办理问题了,但是假如我的页面上存在多个插件依赖,比如既依赖plupload.js又依赖vue.js,难道我要把上面的代码再写一遍(怎么感觉好像说过这话)?这样不就冗余了么?所以我们需要一个异步加载器的生成器,能够帮助我们生成多个异步加载器. PHP实战
/**
* @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;
};
PHP实战然后我们可以生成异步加载器并赋给window PHP实战
// 全局加载器
window.loadvue = loader.generate(
'vue','Vue','/assets/vue/vue.min.js');
window.loadPlupload = loader.generate(
'plupload','plupload','/assets/plupload/plupload.full.min.js');
PHP实战使用的时候同上,这样就基本办理了我们的问题. PHP实战以上就是关于js异步文件加载器的详细内容,希望对大家的学习有所赞助. 编程之家培训学院每天发布《：详解js异步文件加载器》等实战技能，PHP、MYSQL、LINUX、APP、JS,CSS全面培养人才。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |