如何通过其原型扩展jquery插件的公共方法

你能做的最好的结构根本不涉及原型。检查此插件库：

(function($) {
   // Set private defaults.
    var Defaults = {
        param1: 'param1',
        param2: 'param2',
        onSuccess: function() {}
    };
    // Define the public api and its public methods.
    var PluginApi = {
        extend: function(name, method) {
            PluginApi[name] = method;
            return this;
        },
        init: function(PublicOptions) {
            // Do a deep copy of the options.
            var Options = $.extend(true, {}, Defaults, PublicOptions);
            return this.each(function() {
                console.log('set up plugin logic', this.tagName);
            });
        },
        method1: function() {
            console.log('called: method1');
            return this;
        }
    };
    // Create the plugin name and defaults once
    var pluginName = 'MyPlugin';
    // Attach the plugin to jQuery namespace.
    $.fn[pluginName] = function(method) {
        if (PluginApi[method]) {
            return PluginApi[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } 
        else if (typeof method === 'object' || !method) {
            return PluginApi.init.apply(this, arguments);
        } 
        else {
            $.error('Method ' + method + 'does not exist');
        }
    };
})(jQuery);

此插件结构允许您按预期链接方法：

$('h1').MyPlugin('method1').css('color', 'red');

如果需要使用不存在的方法，您可以这样做：

// Extend plugin "prototype" with method2 and use it
$('h1, h2').MyPlugin('extend', 'method2', function(prop, value) {
    return this.css(prop, value);
}).MyPlugin('method2', 'color', 'green');

查看下面演示中的使用示例。

(function($) {
   // Set private defaults.
    var Defaults = {
        param1: 'param1',
        param2: 'param2',
        onSuccess: function() {}
    };
    // Define the public api and its public methods.
    var PluginApi = {
        extend: function(name, method) {
            PluginApi[name] = method;
            return this;
        },
        init: function(PublicOptions) {
            
            // Do a deep copy of the options.
            var Options = $.extend(true, {}, Defaults, PublicOptions);
            
            return this.each(function() {
                console.log('set up plugin logic', this.tagName);
            });
        },
        method1: function() {
            console.log('called: method1');
            return this;
        }
    };
    // Create the plugin name and defaults once
    var pluginName = 'MyPlugin';
    // Attach the plugin to jQuery namespace.
    $.fn[pluginName] = function(method) {
        if (PluginApi[method]) {
            return PluginApi[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } 
        else if (typeof method === 'object' || !method) {
            return PluginApi.init.apply(this, arguments);
        } 
        else {
            $.error('Method ' + method + 'does not exist');
        }
    };
})(jQuery);
// Call existen method1: should make h1 and h2 red
$('h1, h2').MyPlugin('method1').css('color', 'red');
// Call non-existent method2: should throw error in console
try {
    $('h1, h2').MyPlugin('method2').css('color', 'green');
}
catch (e) {
  // Extend "plugin" prototype with method2
  $('h1, h2').MyPlugin('extend', 'method2', function(prop, value) {
      return this.css(prop, value);
  }).MyPlugin('method2', 'color', 'green');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>H1</h1>
<h2>H2</h2>

或者，在命名空间中定义extend静态方法可能更合适$[pluginName]：

// Attach the plugin to jQuery namespace.
$.fn[pluginName] = function(method) {
    if (PluginApi[method]) {
        return PluginApi[method].apply(this, Array.prototype.slice.call(arguments, 1));
    } 
    else if (typeof method === 'object' || !method) {
        return PluginApi.init.apply(this, arguments);
    } 
    else {
        $.error('Method ' + method + 'does not exist');
    }
};
$[pluginName] = {};
$[pluginName].extend = function(name, method) {
    PluginApi[name] = method;
};

然后在必要时像这样使用它来添加其他方法：

$.MyPlugin.extend('method2', function(prop, value) {
    return this.css(prop, value);
});
$('h1, h2').MyPlugin('method2', 'color', 'green');

最终演示：http://plnkr.co/edit/qqlfRqAM84goscU5BFNU?p=preview

你不能将原型扩展到外面，因为你使用隐藏对象插件Api。

您可以尝试将 PluginApi 存储在插件函数之外：

$[pluginName] = function(Element, Options) {
    this.Element   = Element;
    this.Options   = Options;
};
$[pluginName].prototype = {
    method1: function(PublicOptions) {
        // Process the options.
        var Options = $.extend(true, {}, this.Options, PublicOptions);
        return this.Options;
    }
};
$.fn[pluginName] = function(PublicOptions) {
    // Set private defaults.
    var Defaults = {
        param1:       'param1',
        param2:       'param2',
        onSuccess:    function(){}
    };
    // Do a deep copy of the options.
    var Options = $.extend(true, {}, Defaults, PublicOptions);
    return new $[pluginName](this, Options);
};

然后你可以扩展原型：

$.MyPlugin.prototype.method2 = function() {
    return this;
}