javascript - 可以从 javascript 文件中提取函数吗？

Question

不确定这是否是一个“好”问题的正确方法，但我正在加载一个 javscript 作为插件样式架构的一部分，我遇到了以下问题:

如果一个特定的节点有一个插件的引用，我想根据通过该插件的 json 描述提供的 url 加载该插件。描述将包含如下内容(或等效功能):

{
  "pluginSrc" : "http://mysite.com/plugins/1204.js",
  "configData" :
    {
      "someData", "someValue",
      "someMoreData", "etc"
    }
}

当 javascript 加载时，我将有一个 onload 处理程序，它将检查窗口对象上是否存在函数名称，如果存在，则创建该函数的新实例并将配置数据传递给它(或多或少)，除了少数异常(exception)，这部分工作得很好。

有时我没有对我需要调用的函数名称的引用，也无法从 json 中获取它。理想的情况是，如果我可以在脚本的 onload 回调中告诉 window 对象添加了哪个函数并创建该函数的实例。这可能吗？我只需要担心现代浏览器，尤其是 webkit。如果问题不清楚，我深表歉意，我很乐意澄清，但制作 fiddle 可能很困难，因为要编写大量代码才能达到最小的示例。

到目前为止，我正在考虑的是在加载的脚本文件中创建某种全局变量，例如

function MediaAnalytics(){};
var LoadedClass = MediaAnalytics;

并且只是在加载脚本时创建一个 LoadedClass 实例，但这不是万灵药，因为我不会总是编写插件。

编辑:这些脚本很可能不是来自同一个域。

Answer 1

您还没有指定如何加载脚本文件。我希望您能在 onload 处理程序中获得脚本文本。

无论如何，我正在解释如何使用 jQuery.getScript 来做到这一点。在此您将获得成功处理程序中的脚本文本作为 data。所以你可以使用它来获取加载的函数。

假设脚本文件dynamic.js包含

function MediaAnalytics(){};

使用 getScript 加载它

$.getScript("dynamic.js", function (data, textStatus, jqxhr) {
    var NewFunction;
    eval("NewFunction = " + data);
    alert(NewFunction.name); // here you will get alert showing MediaAnalytics
});

这里的 NewFunction 是 MediaAnalytics。这将是脚本的第二次执行，因为 getScript 在执行脚本并将其添加到窗口对象后调用成功处理程序。你可以给 new NewFunction() 来实例化。

如果您不喜欢使用 eval，另一种方法是使用 RegEx 查找函数的名称

$.getScript("dynamic.js", function (data, textStatus, jqxhr) {
    alert(data.match(/function(.*)\(/)); 
});

这将警告 函数 MediaAnalytics(。match 返回一个数组。可以从中检索函数的名称。

您可以使用更好的 RegExp 来提取确切的函数名称并获取窗口对象的属性。

编辑:(无 jquery)

或者您可以将脚本作为文本加载，并在 onload 处理程序中作为脚本标记添加到窗口。即使插件脚本不是您的，您也可以在那里使用您的技巧。

var dynamicjs = "function MediaAnalytics(){};";  // script loaded as text

var modified = "LoadedClass = " + dynamicjs;

var head= document.getElementsByTagName('head')[0];
var script= document.createElement('script');
script.type= 'text/javascript';
script.textContent= modified;  // innerText in some browsers
head.appendChild(script);

alert(LoadedClass);  // LoadedClass is MediaAnalytics