Question

我已经阅读了stackoverflow和其他论坛中发布的各种主题，这些主题解释了如何编写和扩展jquery插件。

我编写了以下示例代码来测试我的理解

(function( $ ) {
  $.fn.myPlugin = function() {

    this.firstAPI(param)
    {
        alert(param);
     };
     return this;
  };
})( jQuery );

现在我正在扩展插件。

function($) {
    var extensionMethods = {
            secondAPI: function(param){
            alert(param);
        }
    };

    $.extend(true, $[fn][myPlugin].prototype, extensionMethods);

})(jQuery);

现在，我正在访问插件$().myPlugin().firstAPI("Hello")，它已成功调用API并显示警告消息。但我无法通过secondAPI访问$().myPlugin().secondAPI("Hello")。 $().myPlugin()对象没有secondAPI。

另外，我观察到一件事，每当我在myPlugin对象上调用API时，都会初始化$().myPlugin()对象。我还尝试传递DOM元素$('#divid')，然后调用。它也失败了。

Answer 1

我猜这不是扩展插件的正确方法 http://docs.jquery.com/Plugins/Authoring

当你使用$.extend(true, $['fn']['myPlugin'].prototype, extensionMethods);时，你错过了我猜的引号，你实际上是在myPlugin的闭包范围内添加了一个函数，它不能被称为$（）。myPlugin（）。Function（）;, 如果您使用$.extend($.fn.myPlugin, extensionMethods);，它会向myPlugin上下文添加一个方法，但实际上并没有扩展它。

阅读此https://github.com/mhuggins/jquery-ui-autocomplete-hints/blob/master/jquery.autocomplete.js

Answer 2

编辑：根据提供的参考资料。

secondAPI方法不起作用的原因是$.fn.myPlugin是一个Function对象，因此从该原型链继承。要创建继承自$.fn.myPlugin原型的对象实例，您需要先使用new运算符创建新的$.fn.myPlugin对象。

您使用的方法似乎是基于jQuery小部件工厂。查看jQuery UI Widget的源代码（特别是$.widget方法），然后查看使用jQuery UI小部件工厂的源代码。

首先，Widget将第二个参数作为您要扩展的对象的构造函数。然后在内部使用new运算符创建该类型的对象，然后使用您显示的方法扩展该对象。之后，它使用$.widget.bridge方法创建插件逻辑，以便您可以以正常方式使用插件，即。 $(element).myPlugin();。然后，您可以使用$(element).myPlugin("apiMethod");

调用任何函数

我建议您阅读源代码和文档以了解发生了什么。然后，您可以将Widget Factory用于自己的插件。它确实是一项很好的工作，可以为您编写自己插件的扩展部分节省大量精力。

创建和扩展jquery插件

2 个答案: