把数组变成函数，用jquery做一个javascript加载器
Posted
技术标签:
【中文标题】把数组变成函数，用jquery做一个javascript加载器【英文标题】：turn array into function, making a javascript loader with jquery 【发布时间】：2011-10-25 03:44:36 【问题描述】：我们如何从像这样的数组中创建一个函数
$.loader(
js: [
['1.js','3.js','2.js'],
['4.js'],
['5.js']
]
);
做某事
$.when(
$.getScript("1.js"),
$.getScript('3.js'),
$.getScript('2.js'))
.then(
function()
$.getScript('4.js').then(function()
$.getScript('5.js');
)
);
这是我目前正在做的事情
loader: function(arg)
var js = arg;
var phase = 0;
for (var i = 0; i < o.length; i++)
console.log(o[i]);
$.each(o[i], function(key,src)
//append javascript
);
;
问题是我不知道从哪里开始。 这就是我的想法
-
我把它们分成几个阶段。
设置阶段 0，它将运行第一个阵列，但我该怎么做？
$.getScript(src) 用于每个 src 剂量堆栈。或链。也许把它一个 var 刺痛？像string + = $.getScript(src). 所以它会像$.getScript("1.js").getScript("3.js").getScript("2.js") 直到有字符串数组，在这个例子中是3。然后在字符串前面附加$.when(，然后在字符串后面加上.then(function()，直到它完成，然后以某种方式关闭字符串。
好吧，我不知道（这里是 *** 上的帖子）
【问题讨论】：
【参考方案1】：function lScripts(startAt)
for (var i = startAt; i < js.length; i++)
if (js[i].constructor == Array)
for (var j = 0; j < js[i].length; j++)
if(j==js[i].length)
$.getScript('js[i][j]',function()
lScripts(startAt+1);
);
else
$.getScript('js[i][j]');
else
$.getScript('js[i]',function()
lScripts(startAt+1);
);
lScripts(0);
【讨论】：
是的，我正在尝试制作一个像这样更苗条的功能。从我们得到的数组中。无论如何，这篇文章显示它将加载 1,3，如果加载 2，则加载到 4，如果加载 4，则加载到 5。不加载 1,3,2，然后加载 4，然后加载 5。如果我正确 我认为我明白你想要什么，试试看 是否需要等到 js 数组的每个索引都加载完毕后再移动到下一个索引？就像在 2.js 之后暂停，一旦加载，然后移动到下一个索引？ 是的，但它不仅仅是 2.js，它的 1.js,3.js,2.js 在 array[0] 然后到 array[1] 是 4.js 然后到 array[2 ] 就是 5.js，就像我的问题示例中一样。使用when 和then 是正确的做法吗？
也许吧？这将加载 js[0] 中的所有项目，然后一旦加载它就会移动到 js[1] 一旦加载它就会移动到 js[2]【参考方案2】：
为了清楚起见，您是在谈论自己编写一个加载一堆脚本的解决方案吗？如果是这样，请不要自己做。站在别人的肩膀上。
RequireJS 已经完成了您的要求。 http://requirejs.org/
它甚至还有用于 jQuery 的文档。 http://requirejs.org/docs/jquery.html
其他人已经完成了艰苦的工作，编写并测试了一个好的产品。节省自己的时间和压力。
【讨论】：
【参考方案3】：我希望这就是你的意思：http://jsfiddle.net/pimvdb/hdN3Q/1/。
(function($)
function load(files, index)
var arr = [];
// fill arr with getScript requests (fake here)
for(var i = 0; i < files[index].length; i++)
arr.push(console.log(files[index][i]));
// call $.when with arr as array of arguments (using apply)
$.when.apply(null, arr).then(function()
if(index < files.length - 1)
// if we have to move to the next chunk,
// load that next one
setTimeout(function()
// timeout is to show they get processed in chunks
load(files, index + 1);
, 1000);
);
$.loader = function(obj)
load(obj.js, 0);
)(jQuery);
$.loader(
js: [
['1.js','3.js','2.js'],
['4.js'],
['5.js']
]
);
.apply 本质上与调用函数的作用相同。但是，由于$.when 的参数数量因输入而异，因此您不能只调用$.when(...)，因为您没有固定数量的参数。使用可变数量的参数调用函数的方法是使用.apply。它的工作原理是这样的：
someFunction(1, 2, 3);
等于：
someFunction.apply(null, [1, 2, 3]);
（null 指的是此处超出范围的执行上下文。）这样做的好处是您可以构建任意大小的数组。因此，您可以通过这种方式使用任意数量的参数调用函数。
在load 函数中，arr 被getScript 函数填充，其工作方式相同：
var arr = [getScript('file1'), getScript('file2')];
$.when.apply(null, arr);
等于：
$.when(getScript('file1'), getScript('file2'));
在load 中，我们用一个块的文件填充arr，例如在您的情况下，第一个块是 1.js、3.js 和 2.js。这是使用for 循环完成的，但您最终得到的数组可以传递给.apply。
当所有文件都加载完毕后，.then 被调用。我们传递给那里的函数应该加载下一个块，但前提是 是 下一个块。如果有 3 个块，当 index 为 0 或 1 时，它应该转到下一个块。当块 2 完成时，没有下一个块，所以它不应该继续到下一个，因为没有下一个。
所以我们需要这个if 子句：
if(index < files.length - 1)
说files.length 是3。那么这个if 条件只有在index 是0 或1 时才会通过，这就是我们想要的。
【讨论】：
效果很好！但我仍然不太明白它是如何工作的，尤其是$.when.apply(null, arr).then(function() 和 if(index < files.length - 1) 请给我一些时间阅读文档。
顺便说一句，有时$.when.apply(null, arr).then(function() 不通过我想知道为什么。增加一些奖金。很好的答案
@Adam Ramadhan：我不知道为什么。 getScript 是这样吗？当脚本无法加载时，.then 将不会执行，因为并非所有请求都成功。
不，它完成了。再次感谢很好的问答。真的很喜欢这个，我的错。顺便说一句，你是对的。以上是关于把数组变成函数，用jquery做一个javascript加载器的主要内容，如果未能解决你的问题，请参考以下文章