web前端|js教程
js 异步 文件 加载
web前端-js教程
我们经常会遇到这种场景，某些页面依赖第三方的插件，而这些插件比较大，不适合打包到页面的主js里（假设我们使用的是cmd的方式，js会打包成一个文件），那么这个时候我们通常会异步获取这些插件文件，并在下载完成后完成初始化的逻辑。
在线制作商城app网站源码,ubuntu邮箱安装失败,tomcat控制台没输出日志,爬虫怎么加代理,php构造器更新教程学习,seo在线观看lzw
以图片上传为例，我们可能会用到plupload.js这个插件，那么我们会这么写：
php h5 游戏源码下载,ubuntu无法设置中文,tomcat9和8性能,爬虫python代码结果,php学费多少 兄弟连,巩义精英seolzw
!window.plupload ? $.getScript( "/assets/plupload/plupload.full.min.js", function() {self._initUploader(); }) : self._initUploader();
但是我们的页面通常由多个独立的模块（组件）构成，如果页面上的A、B两个模块都依赖于plupload.js, 那是不是在两个地方都要把上面的代码写一遍。如果这么干，在plupload.js被下载下来之前，可能会发起两个请求，由于是并行下载，js文件可能会被重复下载，而不是第一次下载下来，第二次取缓存的内容。
搜猫搜索源码,vscode 自检,ubuntu 发wifi,tomcat 6032,sqlite gui加密,服务器遭受流量攻击,阿里巴巴排名插件,前端开发框架论坛,经济 爬虫,php缓存技术memecache,河源优化seo,有支付功能网站用的编程语言,网页特效文字,joomla 模板设计,html5页面重新加载,学生管理系统jsp模板,微信小程序破源码lzw
下图是页面多个组件依赖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异步文件加载器的详细内容，希望对大家的学习有所帮助。
更多详解js异步文件加载器相关文章请关注PHP中文网！
