如何从插件调用 jQuery 插件中的公共函数

Question

我正在开发一个 jQuery 插件。这是我的第一次，所以如果这是一个愚蠢的问题，我很抱歉。

我在插件中有几个公共方法。

我正在尝试从插件定义内部和插件外部调用这些方法，其方式类似于 public 关键字在 Java 中用于方法的方式，但我不断收到 @987654326 @错误。

我尝试了几种调用方式，但仍然无法正常工作。

关于如何做到这一点的任何想法？

这是我的代码库示例：

$(document).ready(function() {    

    (function($) {

        // Plugin Definition
        $.fn.popup = function(options){
            // code here...

            // SUBMIT FORM
            $(settings.popupSubmitSelector).on("click", function(e) {
                submitForm();             // call to my method
                this.submitForm();
                $.fn.popup.submitForm();   
            });

            // more code here...

            // my public method
            this.submitForm = function(){
                // method code here
            }

            // more code...
        }
    }(jQuery));
});

Answer 1

来自Provide Public Access to Secondary Functions as Applicable，实现目标的一种方法是定义方法如下：

$.fn.popup.submitForm = function() {
    //method body
};

你可以在插件外部或内部以同样的方式调用它：

$.fn.popup.submitForm();

Answer 2

我想我现在明白你的问题了。如果要在同一对象的实例中执行公共方法，则必须正确引用当前实例。在 JS 中，您可以通过这种方式实现：

var MyObj = function() {
  var instance = this;

  this.publicMethod = function() {
    alert('test');
  }

  var privateMethod = function() {
    instance.publicMethod();
  }

  return this;

}

更新这是使用代理函数公开​​功能的插件的基本框架

(function($) {
    var settings = { ... };

    var methods = {
        init: function(options) { ... submitForm() ... },
        submitForm: function() { /* code here */ }
    };

    $.fn.popup = function(method) {
        if (methods[method]) {
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof method === 'object' || !method) {
            return methods.init.apply(this, arguments);
        } else {
            $.error('Method ' + method + ' does not exist on jQuery.popup');
        }
    };

})(jQuery);

然后您可以从外部访问

$('selector').popup('submitForm');

Answer 3

尝试类似：

$(document).ready(function () {

$(selector).click(function() {
    nameFunc();
});

});

var nameFunc = function () {

//Code

};

或者：

$(document).ready(function () {

$(selector).click(function() {
    OtherFunc();
});

function OtherFunc() {
 //Code
};

});