Grundlagen der jQuery Plugin Entwicklung
Wenn man sich mit jQuery beschäftigt und damit arbeitet kommt man früher oder später mit Plugins in Berührung. Meist nutzt man welche von anderen Entwicklern, obwohl es gar nicht so kompliziert selbst welche zu schreiben. Um meine Kollegen mal ein bisschen in die Entwicklung von jQuery Plugins einzuführen, hab ich ein kleines Einsteiger Tutorial verfasst, welches ich auch hier veröffentlichen möchte.
Es zeigt die Grundstruktur eines Plugins und ein paar Kleinigkeiten die man beachten sollte. Wer schon ein wenig mit jQuery gearbeitet hat wird damit hoffentlich einen Einstieg in der Entwicklung eigener Plugins bekommen.
Die Grundstruktur eines Plugins
// es gibt verschiedene Ansätze Plugins zu schreiben,
//aber dieser hat sich am besten bewährt.
// Durch die Namensraumzuweisung am Ende gibt es keine
// Konflikte wenn andere Librarys geladen
// werden, die ebenfalls $ benutzen. Somit kann im
// kompletten Plugin Code mit $ gearbeitet werden
(function ($) {
$.fn.myPlugin = function (options) {}
})(jQuery);
// Aufruf des Plugins
jQuery(document).ready(function() {
jQuery('#myDiv').myPlugin();
});Übergabe von Optionen
In den meisten Fällen ist es Sinnvoll das Plugin über Optionen zu steuern. Sei es das man CSS Klassen festlegt, über die Elemente im DOM identifiziert werden. Oder ob man festlegen möchte welcher Effekt genutzt werden soll. Optionen werden immer als Key => Value Paare übergeben. Im Plugin selbst legt man die Defaults fest, die genutzt werden wenn keine Optionen übergeben werden.
(function ($) {
$.fn.myPlugin = function (options) {
// damit wir weniger Schreibarbeit haben weisen
// wir den Namensraum einer Variablen zu
plug = $.fn.myPlugin;
// Optionen mergen
// auf die Optionen können wir dann über
// o.optionskey zugreifen
o = $.extend({},
plug.defaults,
options);
}
// Default Optionen
$.fn.myPlugin.defaults = {
'cssClass': 'order'}
)(jQuery);
jQuery(document).ready(function() {
jQuery('#myDiv').myPlugin({'cssClass' : 'item});
});Ausführen des Plugins - die eigentliche Logik
(function ($) {
$.fn.myPlugin = function (options) {
// damit wir weniger Schreibarbeit haben weisen
// wir den Namensraum einer Variablen zu
plug = $.fn.myPlugin;
// Optionen mergen
// auf die Optionen können wir dann über
o.optionskey zugreifen
o = $.extend({},
plug.defaults,
options);
// das ist die eigentliche Logik, die ausgeführt wird
// this bezieht sich auf das DOM Objekt das beim Instanzieren übergeben wird
// in unserem Beispiel aus Punkt 2 wäre das das DOM Element mit der ID myDiv
// each wäre in diesem Fall nicht nötig, da es eigentlich nur ein Element mit
// dieser ID geben darf
return this.each(function() {
// um im weiteren Ablauf wieder auf das Ursprunsobjekt zugreifen zu können
// weisen wir es der Variablen self zu, da $(this) u.U. später auf ein anderes
// Objekt verweist
var self = $(this);
// ab hier machen wir was mit self, suchen Elemente innerhalb von self, binden Events an self
// oder seinen Children, oder oder oder
})
}
// Default Optionen
$.fn.myPlugin.defaults = {
'cssClass': 'order'}
)(jQuery);Private and Public Methods
Auch in jQuery Plugins gibt es private, also nur innerhalb des Plugins nutzbare und public Methoden. Wobei das Plugin aber in jedem Fall instanziert werden muss um die public Methoden nutzen zu können. Im einfachsten Falle würde das Plugin also einfach einen return setzen und die public Methoden zur Verfügung stellen. Private und Public Methoden unterscheiden sich nur an der Schreibweise.
// public
myPublicFunc = function() {}
// private
function myPrivateFunc() {}Callback Handling
Warum ein Callback Handling?
JS wird Zeile für Zeile abgearbeitet und bei Effekten kann es einfach passieren, daß ein Statement noch nicht abgearbeitet wurde, während das nächste schon angefangen wird. Um das zu verhindern gibt es Callbacks. Oder man möchte einfach ein zweites Plugin auf den Code lassen, nachdem das erste seine Funktion erfüllt hat.
(function ($) {
$.fn.myPlugin = function (options, callback) {
plug = $.fn.myPlugin;
o = $.extend({},
plug.defaults,
options);
callback = callback;
return this.each(function() {
var self = $(this);
// hier die Logik
// und dann überprüfen wir ob es sich beim callback
// um eine Funktion handelt und führen sie aus
if($.isFunction(callback)) {
// hier sieht man auch warum wir die Variable self erzeugt haben
// this bleibt nicht immer das gleiche this ;-)
callback.call(this);
}
});
}
// public
myPublicFunc = function() {}
// private
function myPrivateFunc() {}
// Default Optionen
$.fn.myPlugin.defaults = {
'cssClass': 'order'}
)(jQuery);
// hier können wir jetzt beim Aufruf noch eine Callback Methode übergeben
jQuery(document).ready(function() {
jQuery('#myDiv').myPlugin(
{}, function() {}
);
});Wie gesagt, es handelt sich hier nur um einen kleinen Einstieg in die Plugin Entwicklung für jQuery, die mehr oder weniger gerade mal die Grundstruktur eines Plugins aufzeigt. Bei Gelegenheit gibts noch mehr davon.
Zugriffe: 8134