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

Question

我正在尝试按照本文编写一个简单的jQuery插件： http : //brolik.com/blog/how-to-create-a-jquery-plugin/

我的控制台似乎总是出现以下错误：

的HTML

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

Java脚本

(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名称空间中的函数$.fn jQuery集合上的方法，这就是您想要的。

$(selector).blogPost();

这种方法通常称为“插件”。

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