从我自己的脚本中包含的 Javascript 文件调用函数答案

【问题标题】：Call an function from an included Javascript file in my own script从我自己的脚本中包含的 Javascript 文件调用函数
【发布时间】：2012-09-03 18:26:36
【问题描述】：

我有一个尚未编写的脚本已经在页面上运行。我希望，在我确实编写的脚本中，能够从原始脚本执行一个函数。这是我正在尝试做的一个简化示例：

(function ($) {
$.fn.myExistingFunction = function (options) {
    function doMyThing(text) {
        alert(text);
    }
}
}(jQuery));

jQuery(document).ready(function($) {
    $.fn.myExistingFunction.doMyThing("alert text");
});

但是，当我运行它时，我得到了控制台输出：

Uncaught TypeError: Object function (options) {

    function doMyThing(text) {
       alert(text);
    }

} has no method 'doMyThing'

但它显然有方法！我可以在那里看到它。我在这里做错了什么？

【问题讨论】：

你需要使用var methods = some object，并传递给插件，在plugin authoring文档中有解释！

标签： javascript jquery function

【解决方案1】：

您只能从插件函数的scope 访问该方法。它没有在全局范围内定义。

所以你不能调用那个函数。您在代码中所能做的就是调用函数，这些函数可通过调用函数的scope chain 获得。在您的情况下，这是在您的 function($){} 或全局范围内定义的所有内容。但插件中的功能两者都不是。

当您调用$.fn.myExistingFunction.doMyThing 时，您将doMyThing 视为myExistingFunction 对象中的一个字段。但实际上它是在函数内部定义的。也许这段代码更清楚：

$.fn.myExistingFunction = function (options) {
    var doMyThing = function(text) {
        alert(text);
    }
    var hi = "hello";
}

在 hi 和 doMyThing 中是 myExistingFunction 范围内的局部变量。如果插件的设计目的不是将功能公开给外部代码，则您无法访问变量。

一个旨在公开其内部功能的插件示例是jQuery UI datepicker (documentation)。它需要像 parseDate 和 formatDate 这样的函数，但这些实用函数可能对一般开发也很有用，这就是为什么它们被显式添加到 datepicker 对象中。

【讨论】：

好的，谢谢。所以假设我要更改 doMyThing 以使其工作，我必须像你在上面的示例中那样设置它？使用“var doMyThing = function() {}”？我可以那样做。我只是想避免修改原始文件，因为它很大，可能需要我一段时间才能让一切恢复正常。
@BCDesign 不，如果将其设置为局部变量，它将不起作用。您需要将该函数添加到 $.fn.myExistingFunction 对象，然后您可以从插件外部访问该对象。只需确保 doMyThing 函数不依赖于 myExistingFunction 范围内的变量即可。如果没有任何问题，您可以将函数移动到 $.fn.myExistingFunction 对象。为了尽量减少对插件的更改，我会在 myExistingFunction 代码中保留 doMyThing 的函数声明，然后只执行 function doMyThing(arg){$.fn.myExistingFunction.doMyThing(arg)};

【解决方案2】：

我认为您的代码需要进行重大改写，因为它永远不会工作，实际上您的function doMyThing 不是$.fn.myExistingFunction 的属性不是，它只是在内部声明它，并且由于作用域在 javascript 中的工作方式，您将永远无法调用它。

【讨论】：