Question

我正在尝试扩展basketjs功能。我想通过basketjs动态加载脚本。但我有一个问题。

首先，我扫描所有DOM以获取我自己的数据属性。然后将数组转换为对象并将它们传递给basketjs。好吧，它没有承诺功能。我的计划是我将它们全部循环，第一个脚本没有承诺通过，其余的都使用了承诺。

对象：

var obj: [
 {
   url: 'first_script.js',
   skipCache: true
 },
 {
   url: 'second_script.js',
   skipCache: true
 },
 {
   ...
 }
];

功能：

var forEach = function (array, callback, scope) {
  for (var i = 0; i < array.length; i++) {
    callback.call(scope, i, array[i]);
  }
};

var i = 0;
forEach(obj, function (i) {
  if (i === 0) {
    console.log('load first_script');
    basket.require(obj[0]);
  } else {
    console.log('load the second_script and others');
    basket.require( obj[i] );
  }
});

目标：我想使用.then(function({ basket.require( ... )加载second_script和其他人，以便我可以订购脚本。

任何人都可以帮助我吗？任何帮助将不胜感激。：）

Answer 1

你必须写一点递归函数来做到这一点。算法非常简单。

function loadScripts(scripts, onFinish) {
    if(scripts.length === 0) {
        onFinish();
        return;
    }

    var script = scripts[0];
    scripts = scripts.slice(1);

    basket.require(script).then(function() { loadScripts(scripts, onFinish); });
}

该函数有两个参数：

依赖项数组
包含所有依赖项的回调。

这是一个递归函数，因此必须先检查它是否已完成。如果没有要包含的脚本我们就准备好了。否则，我们从数组中取出并删除第一个元素并需要脚本。当它被加载时，我们在数组的其余部分和相同的回调上调用该函数。

就是这样。这是一个有效的例子：JSFiddle

扩展basket js功能以动态加载脚本

1 个答案: