如何编写和/或调用jQuery插件？

Question

我试图按照这篇文章编写一个简单的jQuery插件：http://brolik.com/blog/how-to-create-a-jquery-plugin/

我似乎总是在我的控制台中收到以下错误：

HTML

<div id="prod-part">TODO write content</div>   

的Javascript

(function($){
    $.blogPost = function(el, options) {
        var base = this;

        base.$el = $(el);
        base.el = el;

        base.$el.data('blogPost', base);

        base.init = function(){
            console.log("hello");
        };
    };
})(jQuery);

$(function () {
    $('#prod-part').blogPost();

});

这是一个简单的jsfiddle仍然会产生问题。我不确定如果我错误地调用插件或者插件编码错误。我已经尝试过jQuery版本1.7.2和1.11.0，但仍然会得到相同的结果。任何建议将不胜感激。 http://jsfiddle.net/45oLp31m/1/

Answer 1

背景：

jQuery函数（jQuery()或$()）充当工厂，在传入选择器时返回jQuery集合的新实例。所以$('#foo')返回一个jQuery集合的实例。为了调用该实例的方法，例如$('#foo').somePlugin()，必须在实例上定义这些方法。我们将方法引入实例的主要方法是将它们添加到构造函数的原型中。

解决方案

因此，您的特定错误的解决方案是jQuery插件是在jQuery集合构造函数的原型上定义的。此原型在jQuery.fn处显示别名（jQuery别名为$，因此$.fn也可以。向原型添加方法就像$.fn.somePlugin = function () {}一样简单。

因此，您的插件需要定义为：

$.fn.blogPost = function(el, options) {

更多

正如我所说，这是针对您引用的特定错误。我在这一点上假设你没有在你的教程中做得更多，所以我不会在你的代码中讨论其他问题（比如你的插件没有返回链接集合的事实）。

Answer 2

而不是

$.blogPost = function(el, options) {...}

尝试

$.fn.blogPost = function(el, options) {...}

$.fn命名空间中的函数可用作jQuery集合的方法，这正是您想要的。

$(selector).blogPost();

此类方法通常称为“插件”。

在其他（更罕见）的情况下，您可能希望扩展jQuery命名空间本身，在这种情况下，您的$.foo = function() {...}将适用。这些功能称为“静态方法”。