Question

我正在努力学习开发jQuery插件。我在jQuery网站上阅读了基础教程，并尝试了解它是如何工作的以及如何构建插件。

我做了一些快速测试，但我现在卡住了，我不知道如何过去。

以下是代码：

var myElement = $("#Foo");
var myButton = $("#Bar");
(function($) {
var showAlert;
var mathWorks;
var methods = {
    init : function(options) {

    // Declaring Default Options
    var defaults = 
    {
        option1 : 'Default',
        option2 : false
    }

    // Merge Options
        var opt =  $.extend(defaults, options);

    showAlert = function(txt)
    {
        alert(txt);
    }

    mathWorks = function(a,b)
    {
        alert('Result of '+a+'*'+b+' = '+ a*b);
    }


    methods.doSomething(opt.option1);
},

doSomething: function(text)
{
    alert(text);
},

doMathWorks: function(a,b)
{

    mathWorks(a,b)
}

};

$.fn.testPlugin = function() {
    var method = arguments[0];

    if(methods[method]) {
        method = methods[method];
        arguments = Array.prototype.slice.call(arguments, 1);
    } else if( typeof(method) == 'object' || !method ) {
        method = methods.init;
    } else {
        $.error( 'Method ' +  method + ' does not exist on jQuery.pluginName' );
        return this;
    }
    return method.apply(this, arguments);   

}
})(jQuery);

我在哪里声明事件处理程序？

像：

myButton.bind('click', function()
        {
            alert('test');
            //methods.doSomething("Testing");
});

而且，正如我所做的那样，在插件之前声明元素变量是正确的吗？

Answer 1

您应该使用插件的单一范围，将其与页面上的其他插件和javaScript代码隔离开来。

This是如何开发插件的好教程。

Answer 2

使用init方法声明事件处理程序，但使用.on代替.bind。我假设这些是你想要绑定到按钮的事件，作为插件行为的一部分。
声明像你这样的元素是不正确的，因为你的插件根本不应该依赖现有的DOM。

Answer 3

您可以在showAlert方法之外完全定义私有效用函数mathWorks和init()。在外面声明它们并定义内部没有任何优势，并且可能令人困惑。

事件处理程序可以附加到传递jQuery集合的任何方法（或由此类方法调用的实用程序函数）中。在方法内部，一定要有一个return this.each(function(){...})结构，从而解决集合中的所有成员，并返回它进行方法链接。

jQuery插件开发事件处理程序

3 个答案: