详解js异步文件加载器

5年以前  |  阅读数:481 次  |  编程语言:PHP 

我们经常会遇到这种场景,某些页面依赖第三方的插件,而这些插件比较大,不适合打包到页面的主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分页显示制作详细讲解
SSH 登录失败:Host key verification failed
获取IMSI
将二进制数据转为16进制以便显示
获取IMEI
贪吃蛇
文件下载
双位运算符
发送邮件
PHP自定义函数获取搜索引擎来源关键字的方法
Java生成UUID
提取后缀名
年的日历图
在Zeus Web Server中安装PHP语言支持
让你成为最历害的git提交人
Yii2汉字转拼音类的实例代码
再谈PHP中单双引号的区别详解
指定应用ID以获取对应的应用名称
Python 2与Python 3版本和编码的对比
php封装的page分页类完整实例