时间:2021-05-25
我们经常会遇到这种场景,某些页面依赖第三方的插件,而这些插件比较大,不适合打包到页面的主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异步文件加载器的详细内容,希望对大家的学习有所帮助。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
模块加载器的概念可能稍微接触过前端开发的童鞋都不会陌生,通过模块加载器可以有效的解决这些问题:JS文件的依赖关系。通过异步加载优化script标签引起的阻塞问题
本文介绍了vue异步加载高德地图的实现,分享给大家,具体如下:几种加载js的方式同步加载异步加载延迟加载同步加载用的最多的一种方式,又称阻塞模式,会阻止浏览器的
动态加载js文件有时候我们需要根据参数不同来引入不同的js文件,用html直接写标签满足不了我们的需求,总结几种方法,以及同步异步加载的各种需求一.直接加载二.
今天在网上找到了一个可以动态加载js文件的js加载器,具体代码如下:JsLoader.jsvarMiniSite=newObject();/***判断浏览器*/
最近在网上找到了一个可以动态加载js文件的js加载器,具体代码如下:JsLoader.jsvarMiniSite=newObject();/***判断浏览器*/