首页 / PHP / 详解js异步文件加载器，详解js异步加载_PHP教程

详解js异步文件加载器，详解js异步加载_PHP教程

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了详解js异步文件加载器，详解js异步加载_PHP教程，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3244字，纯文字阅读大概需要5分钟。

内容图文

详解js异步文件加载器，详解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混用的场景）：

详解js异步文件加载器，详解js异步加载_PHP教程 - 文章图片

所以，在实际使用中需要加锁，即当脚本正在加载时，不应该再重复请求脚本，等待加载完成后，依次执行后面的逻辑，有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异步文件加载器，详解js异步加载_PHP教程 - 文章图片

好了，到这里似乎解决问题了，但是假如我的页面上存在多个插件依赖，比如既依赖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文件的代码
  • js 实现图片预加载(js操作 Image对象属性complete ，事件onload 异步加载图片)
  • Javascript 异步加载详解(浏览器在javascript的加载方式)
  • javascript 文件的同步加载与异步加载实现原理
  • js异步加载的三种解决方案
  • 利用jQuery的deferred对象实现异步按顺序加载JS文件
  • 异步动态加载js与css文件的js代码
  • javascript loadScript异步加载脚本示例讲解

www.bkjia.comtruehttp://www.bkjia.com/PHPjc/1095276.htmlTechArticle详解js异步文件加载器，详解js异步加载 我们经常会遇到这种场景，某些页面依赖第三方的插件，而这些插件比较大，不适合打包到页面的...

内容总结

以上是互联网集市为您收集整理的详解js异步文件加载器，详解js异步加载_PHP教程全部内容，希望文章能够帮你解决详解js异步文件加载器，详解js异步加载_PHP教程所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/189644.html

来源：【匿名】