详解js异步文件加载器


Posted in PHP onJanuary 24, 2016

我们经常会遇到这种场景,某些页面依赖第三方的插件,而这些插件比较大,不适合打包到页面的主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混用的场景):

详解js异步文件加载器

所以,在实际使用中需要加锁,即当脚本正在加载时,不应该再重复请求脚本,等待加载完成后,依次执行后面的逻辑,有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 });

再看看请求:

详解js异步文件加载器

好了,到这里似乎解决问题了,但是假如我的页面上存在多个插件依赖,比如既依赖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异步文件加载器的详细内容,希望对大家的学习有所帮助。

PHP 相关文章推荐
在Windows版的PHP中使用ADO
Oct 09 PHP
防止用户利用PHP代码DOS造成用光网络带宽
Mar 01 PHP
解析php下载远程图片函数 可伪造来路
Jun 25 PHP
基于simple_html_dom的使用小结
Jul 01 PHP
php中通过数组进行高效随机抽取指定条记录的算法
Sep 09 PHP
dedecms函数分享之获取某一栏目所有子栏目
May 19 PHP
php表单敏感字符过滤类
Dec 08 PHP
PHP转盘抽奖接口实例
Feb 09 PHP
分享PHP守护进程类
Dec 30 PHP
解读PHP的Yii框架中请求与响应的处理流程
Mar 17 PHP
分析php://output和php://stdout的区别
May 06 PHP
php实例化对象的实例方法
Nov 17 PHP
PHP导出Excel实例讲解
Jan 24 #PHP
PHP验证码生成原理和实现
Jan 24 #PHP
详解PHP对象的串行化与反串行化
Jan 24 #PHP
php上传图片获取路径及给表单字段赋值的方法
Jan 23 #PHP
高质量PHP代码的50个实用技巧必备(下)
Jan 22 #PHP
php使用timthumb生成缩略图的方法
Jan 22 #PHP
php session的锁和并发
Jan 22 #PHP
You might like
PHP4 与 MySQL 交互使用
2006/10/09 PHP
PHP独立Session数据库存储操作类分享
2014/06/11 PHP
PHP共享内存用法实例分析
2016/02/12 PHP
网页的标准,IMG不支持onload标签怎么办
2006/06/29 Javascript
匹配任意字符的正则表达式写法
2010/04/29 Javascript
javascript 实现 秒杀,团购 倒计时展示的记录 分享
2013/07/12 Javascript
jQuery学习笔记之总体架构
2014/06/03 Javascript
javascript使用call调用微信API
2014/12/15 Javascript
js窗口关闭提示信息(兼容IE和firefox)
2015/10/23 Javascript
解决bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题
2017/06/05 Javascript
Easy UI动态树点击文字实现展开关闭功能
2017/09/30 Javascript
Django与Vue语法的冲突问题完美解决方法
2017/12/14 Javascript
浅析前端路由简介以及vue-router实现原理
2018/06/01 Javascript
详解JavaScript 中 if / if...else...替换方式
2018/07/15 Javascript
JavaScript数据结构与算法之检索算法实例分析【顺序查找、最大最小值、自组织查询】
2019/02/22 Javascript
Python+微信接口实现运维报警
2016/08/27 Python
浅谈五大Python Web框架
2017/03/20 Python
python编程使用selenium模拟登陆淘宝实例代码
2018/01/25 Python
pycharm重置设置,恢复默认设置的方法
2018/10/22 Python
详解从Django Rest Framework响应中删除空字段
2019/01/11 Python
对python多线程SSH登录并发脚本详解
2019/02/14 Python
Python-Tkinter Text输入内容在界面显示的实例
2019/07/12 Python
python虚拟环境的安装和配置(virtualenv,virtualenvwrapper)
2019/08/09 Python
最新PyCharm 2020.2.3永久激活码(亲测有效)
2020/11/26 Python
HTML5中语义化 b 和 i 标签
2008/10/17 HTML / CSS
采购内勤岗位职责
2013/12/10 职场文书
学生喝酒检讨书
2014/02/06 职场文书
知识竞赛拉拉队口号
2014/06/16 职场文书
联片教研活动总结
2014/07/01 职场文书
介绍信怎么写
2015/01/30 职场文书
夏洛特的网观后感
2015/06/15 职场文书
2015初中政治教学工作总结
2015/07/21 职场文书
2016年助残日旅游活动总结
2016/04/01 职场文书
vue实现无缝轮播效果(跑马灯)
2021/05/14 Vue.js
Python采集爬取京东商品信息和评论并存入MySQL
2022/04/12 Python
golang语言指针操作
2022/04/14 Golang