jQuery插件-从插件中调用公共方法

jQuery Plugin - Calling a public method from within plugin

本文关键字：插件 方法 调用 jQuery      更新时间：2023-09-26

我很难从插件内部调用公共方法。我不知道问题出在哪里。我做错了什么？

(function($) {
    var MyPlugin = function(){
        /* PUBLIC */
        this.publicFunction = function() {
            // Do public things
        };
        /* PRIVATE */
        var privateFunction = function() {
            // Do private things
            // Call this one public function
            publicFunction(); // WANT THIS but doesn't work
        }
    };
    $.fn.myPlugin = function() {
        var myPlugin = new MyPlugin(options);
        // Binding click to public function
        $("a").bind('click', function(e){
            e.preventDefault();
            myPlugin.publicFunction($(this)); // AND WANT THIS but does
        });
        return myPlugin;
    };
})(jQuery);

您只需要能够从函数本身中引用MyPlugin的this对象，而不会失去作用域。为此，将其分配给一个变量（名称无关紧要，典型的约定是self）

var MyPlugin = function(){
    var self = this;
    ...
    var privatefunction = function () {
        self.publicFunction();
    }
...

在MyPlugin函数缓存中，引用MyPlugin实例：

var self = this;

然后在privateFunction内部调用publicFunction作为self:的成员

self.publicFunction();

问题是，您已经将publicFunction定义为MyPlugin实例的成员，而不是全局的（这很好），但您从不同的范围调用它，由于publicFunction不是全局的，您需要告诉javascript在哪里可以找到它。您不能使用this，因为在您调用它的上下文中，this不会指向MyPlugin实例

(function($) {
    var MyPlugin = function(options){
        /* PRIVATE - one copy for each instance */
        var options = $.extend({},options),
            privateFunction = function() {
                // Do private things
                // ...
                // Call this one public function
                this.publicFunction();
            };
    };
    // Shared by all MyPlugin instances;
    MyPlugin.prototype.publicFunction = function($element) {
            // Do public things
    };
    $.fn.myPlugin = function() {
        var myPlugin = new MyPlugin(options);
        // Binding click to public function
        $("a").bind('click', function(e){
            e.preventDefault();
            myPlugin.publicFunction($(this));
        });
        return myPlugin;
    };
})(jQuery);
相关文章：