0

我正在尝试学习开发 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");
});

而且，像我一样在插件之前声明元素变量是正确的吗？

4

3 回答 3

0

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

这是如何开发插件的绝佳教程。

于 2013-01-24T00:33:02.890 回答
0
  1. 在方法中声明事件处理程序init，但使用.on而不是.bind. 我假设这些是您希望作为插件行为的一部分绑定到按钮的事件。
  2. 像你一样声明元素是不正确的，因为你的插件根本不应该依赖于现有的 DOM。
于 2013-01-24T00:33:03.320 回答
0

您可以在方法之外完全定义您showAlert的私有实用程序函数。在外部声明它们并在内部定义它们没有任何优势，并且可能会造成混淆。mathWorksinit()

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

于 2013-01-24T01:31:47.267 回答