javascript - $.getScript 返回什么，它对范围有何作用？

Question

我正在创建一个插件，我想在其中加载一些脚本，并为每个脚本运行函数 plugin。

我创建了一个set of tests/examples (代码如下)。

问题:

1. AJAX 传递常用的data、textStatus、jqxhr 参数集。但显然还创建了一个插件功能可用的范围。在文档中找不到任何有关此内容的信息。请提供更多详细信息/解释!

2. 似乎在范围内的 this 到底是什么？

3. 我通过映射脚本名称列表来运行 get 脚本的第三个示例按预期工作。

4. 构建延迟列表，然后使用 when 运行，行为会很奇怪。我没有得到任何指示函数已经运行(没有输出)，并且当我删除延迟时，它似乎总是首先完成(“完成”在其他所有内容之前打印)。功能是否正在运行？我尝试添加警报，但当我使用when时，它没有出现。

index.js

var script_names = ["one.js", "two.js", "three.js"];

function as_callback(script_name)
{
  console.log("plugin function run as callback");
  console.log(`$.getScript(${script_name}, (data, textStatus, jqxhr) => plugin());`);
  $.getScript(script_name, (data, textStatus, jqxhr) => plugin());
  console.log();
}

function from_this(script_name)
{
  console.log("plugin function referred to from 'this'");
  console.log(`$.getScript(${script_name}, (data, textStatus, jqxhr) => this.plugin());`);
  $.getScript(script_name, (data, textStatus, jqxhr) => this.plugin());
  console.log();
}

function with_map(script_names)
{
  console.log("with map");
  console.log("string_names: " + JSON.stringify(script_names));
  console.log(`
  script_names.map((x) => 
  {
    $.getScript(x, (data, textStatus, jqxhr) => plugin())
  });
  `);
  script_names.map((x) => 
  {
    $.getScript(x, (data, textStatus, jqxhr) => plugin())
  });
  console.log();
}

function with_push_and_when(script_names)
{
  console.log("build array of deferred and run with when");
  console.log(`
  var plugs = [];
  script_names.map(x => $.getScript(x, (data, textStatus, jqxhr) => plugs.push(plugin)));
  $.when(plugs).done(console.log("done"));
  `);
  var plugs = [];
  script_names.map(x => $.getScript(x, (data, textStatus, jqxhr) => plugs.push(plugin)));
  $.when(plugs).done(console.log("done"));
  console.log();
}

as_callback('one.js');

setTimeout("from_this('two.js')", 2000);

setTimeout("with_map(script_names)", 4000);

setTimeout("with_push_and_when(script_names)", 6000);

var plugs = [];
script_names.map(x => $.getScript(x, (data, textStatus, jqxhr) => plugs.push(plugin)));
setTimeout("console.log('run when in global scope');$.when(plugs).done(console.log('done'))", 8000);

one.js

var plugin = function()
{
  console.log("one.js\n\n");
  // alert("one");
  return "one";
}

two.js

var plugin = function()
{
  console.log("two.js\n\n");
  return "two";
}

三个.js

var plugin = function()
{
  console.log("three.js\n\n");
  return "three";
}

输出

plugin function run as callback
$.getScript(one.js, (data, textStatus, jqxhr) => plugin());

one.js


plugin function referred to from 'this'
$.getScript(two.js, (data, textStatus, jqxhr) => this.plugin());

two.js


with map
string_names: ["one.js","two.js","three.js"]

  script_names.map((x) => 
  {
    $.getScript(x, (data, textStatus, jqxhr) => plugin())
  });


two.js


three.js


one.js


build array of deferred and run with when

  var plugs = [];
  script_names.map(x => $.getScript(x, (data, textStatus, jqxhr) => plugs.push(plugin)));
  $.when(plugs).done(console.log("done"));

done

run when in global scope
done

注意:我将接受的答案添加到了 repl.it。

Answer 1

1. 加载脚本后，回调函数在全局上下文中运行。由于脚本定义了全局变量plugin，因此可以从回调函数中访问它。

2. $.getScript 没有设置特定的上下文，因此 this 将是全局 window 对象。 this.plugin 与 window.plugin 相同，都是全局变量。

3. 正确。

4. $.getScript 返回一个 promise ，但您没有将它们推送到 plugs 上，您只是推送 plugin 。

将 .map() 的结果分配给 plugs 以获取正确的 Promise 数组。

var plugs = script_names.map(x => $.getScript(x, (data, textStatus, jqxhr) => plugin()));
$.when(plugs).done(console.log("done"));