详解js异步文件加载器

 更新时间:2016年01月24日 17:25:33   作者:animabear  
这篇文章主要为大家介绍了js异步文件加载器的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

我们经常会遇到这种场景,某些页面依赖第三方的插件,而这些插件比较大,不适合打包到页面的主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异步文件加载器的详细内容,希望对大家的学习有所帮助。

相关文章

  • php实现贪吃蛇小游戏

    php实现贪吃蛇小游戏

    本文给大家分享的是使用php实现贪吃蛇小游戏的代码,其主要思路是通过session记录位置来制作,应该说思路非常巧妙,推荐给大家
    2016-07-07
  • PHP调用VC编写的COM组件实例

    PHP调用VC编写的COM组件实例

    最近项目需要PHP来解析二进制数据,如果直接PHP做比较麻烦,就想到VC编写COM组件来做,提供PHP调用。文章将介绍VC编写COM组件提供PHP调用,实现一个计算两个数字相加的功能
    2014-03-03
  • 创建配置文件 用PHP写出自己的BLOG系统 2

    创建配置文件 用PHP写出自己的BLOG系统 2

    今天做博客安装程序,首先做的是配置文件的创建。
    2010-04-04
  • PHP+Ajax验证码验证用户登录

    PHP+Ajax验证码验证用户登录

    这篇文章主要为大家详细介绍了PHP+AJAX验证码验证用户登录的相关资料
    2016-07-07
  • PHP生成唯一订单号的方法汇总

    PHP生成唯一订单号的方法汇总

    前阵子有个电子商务项目,需要生成订单号。当时的考虑很简单,取系统时间加上随机数,或者使用 uniqid() 方法。仔细考虑下上述方法,在顾客购买量少的情况下,订单重复的可能性为零,但是在购买高蜂期生成的订单号重复是很有可能发生的。
    2015-04-04
  • PHP链接MySQL的常用扩展函数

    PHP链接MySQL的常用扩展函数

    这篇文章主要介绍了PHP链接MySQL的常用扩展函数,需要的朋友可以参考下
    2014-10-10
  • php之Aes加密案例讲解

    php之Aes加密案例讲解

    这篇文章主要介绍了php之Aes加密案例讲解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
    2021-08-08
  • 详解php如何对数组进行排序

    详解php如何对数组进行排序

    这篇文章主要为大家详细介绍了php如何对数组进行排序,合并,截取替换等操作,文中的示例代码讲解详细,感兴趣的小伙伴可以参考一下
    2023-09-09
  • 详解使用php调用微信接口上传永久素材

    详解使用php调用微信接口上传永久素材

    这篇文章主要介绍了详解使用php调用微信接口上传永久素材,
    2017-04-04
  • php中is_null,empty,isset,unset 的区别详细介绍

    php中is_null,empty,isset,unset 的区别详细介绍

    本篇文章介绍了,php中is_null,empty,isset,unset 的区别详细分析。需要的朋友参考下
    2013-04-04

最新评论