如何编写and/or调用一个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

而不是

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

尝试

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

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

$(selector).blogPost();

这种方法一般称为"plugins"。

在其他（罕见的）情况下，您可能希望扩展 jQuery 命名空间本身，在这种情况下您的 $.foo = function() {...} 将适用。此类函数称为 "static methods".

Answer 2

背景：

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

解决方案

因此，针对您的特定错误的解决方案是 jQuery 插件是在 jQuery 集合构造函数的原型上定义的。这个原型的别名是 jQuery.fn（jQuery 的别名是 $，所以 $.fn 也可以。向原型添加方法就像 $.fn.somePlugin = function () {}.

一样简单

因此您的插件需要定义如下：

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

如何编写and/or调用一个jQuery插件？

How to write and/or call a jQuery plug-in?

javascript

jquery

jquery-plugins

背景：

解决方案

更多