创建并扩展一个jQuery插件

我已经通过各种主题发布在stackoverflow和其他论坛，这解释了如何编写和扩展一个jQuery插件。创建并扩展一个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，并显示警告信息。但我无法通过$().myPlugin().secondAPI("Hello")访问secondAPI。 $().myPlugin()对象没有secondAPI。

另外，我观察到的一件事，myPlugin对象每次在$().myPlugin()对象上调用API时都会被初始化。我也尝试通过DOM元素$('#divid')，然后调用。它在这种情况下也失败了。

来源

2012-03-16 Sanmoy

您可以告诉我们您到目前为止看过哪些教程来生成此代码。这将有助于查看您正在使用哪种插件架构。有几个不同的，我个人更喜欢在官方插件教程中讨论并由jQuery UI团队使用的。 – Simon 2012-03-16 06:15:55

http：//forum.jquery。com/topic/how-to-extend-plugins-ui-plugins – Sanmoy 2012-03-16 08:55:23

http://stackoverflow.com/questions/2050985/best-way-to-extend-a-jquery-plugin – Sanmoy 2012-03-16 08:55:49

我想这不是扩展插件读取正确的方式这 http://docs.jquery.com/Plugins/Authoring

当您使用$.extend(true, $['fn']['myPlugin'].prototype, extensionMethods);，U错过我猜的报价，你实际上是增加一个功能，为myplugin它的关闭范围不能被称为$（）。myPlugin（）。Function（）;，如果你使用$.extend($.fn.myPlugin, extensionMethods);它会向myPlugin上下文添加一个方法，但实际上并没有扩展它。

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

来源

2012-03-16 07:11:34 Deepu

我太累了，不能保持在它，但如果你想继续戳，到目前为止这里是一个小提琴：http://jsfiddle.net/wGCkn/3/ - 使用推荐的方法（首先传入一个对象字面值）后续的$ .extend（ $ .fn.myPlugin，extensionMethods）'也不添加额外的方法。我现在放弃了。 – 2012-03-16 07:15:49

是这样，你只需将它添加到关闭中，这不是推荐的方式，或者 – Deepu 2012-03-16 09:33:40

正在接近我的尝试作为一个学习练习，所以我并不意味着暗示我是建议的权威。我只是想在这里：http://docs.jquery.com/Plugins/Authoring#Defaults_and_Options在“插件方法”部分，他们给出了明确的信息“这是好的！”用于将方法的对象字面量传递给新的插件对象。不过，这并不是jQuery API文档第一次提供误导性或不完整的信息。 – 2012-03-16 14:45:48

编辑：根据提供的参考。

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

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

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

我建议你阅读源文件和文档，以了解发生了什么。那么对你来说，为你自己的插件使用Widget Factory可能是一个好主意。这确实是一件很好的工作，并且可以为编写自己插件的扩展部分节省很多工作。

来源

2012-03-16 07:47:27 Simon

创建并扩展一个jQuery插件

回答

相关问题