jQuery插件開發事件處理程序

我在學習開發jQuery插件。我參考了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"); 
});

而且也，這是正確的插件之前申報要素變量，像我一樣？

來源

2013-01-24 Fr0z3n

您可以完全定義您的私人效用函數showAlert和mathWorks的init()方法之外。在外部聲明它們並定義內部沒有任何優勢，並且可能會造成混淆。

事件處理程序可以附加到傳遞jQuery集合的任何方法（或通過這種方法調用的實用程序函數）中。在該方法內部，確保有一個return this.each(function(){...})結構，從而解決集合的所有成員，並將其返回以進行方法鏈接。

來源

2013-01-24 01:31:47

但是，如果我在init方法外定義函數，我不能使用設置，因爲它們是在裏面定義的。如果我在方法中聲明和定義函數，我不能在其他方法中使用它們。我有點困惑.. – Fr0z3n

要正確設置設置，您需要了解兩件事情。（1）設置是特定於調用插件的jQuery集合的DOM元素。（2）插件本身不保留以前對任何方法的調用記錄。爲了允許'init（）'將其設置傳遞給其他方法，它們通常全部或部分地設置爲原始jQuery集合中DOM元素的'.data（）'屬性（它被傳遞給'init （）'）。 [jQuery插件/創作教程]（http://docs.jquery.com/Plugins/Authoring）向您展示瞭如何做到這一點。 –

您應該爲插件使用單個作用域，以將其與其他頁面上的插件和javaScript代碼隔離。

This是如何開發插件的絕佳教程。

來源

2013-01-24 00:33:02 Ph0en1x

在init方法申報的事件處理程序，但使用.on代替.bind。我假設這些是你想要綁定到按鈕的事件，作爲插件行爲的一部分。
聲明像你這樣的元素是不正確的，因爲你的插件應該完全不依賴於現有的DOM。

來源

2013-01-24 00:33:03

jQuery插件開發事件處理程序

回答

相關問題