eigene jQuery Funktion/Plugin erstellen

  • Schwierigkeit/Anforderungen: Fachausdrücke wie Objekt, Parameter oder Framework sollten geläufig sein, außerdem sollte man die Funktionsweise von jQuery Plugins kennen.
    Benötigte Software/Frameworks jQuery Framework
    Verwendete Technik JavaScript


    Einleitung
    Eine eigene jQuery Funktion bzw. ein eigens jQuery Plugin zu erstellen ist oft nach ein wenig Einarbeitung in JS(JavaScript) und JQ(jQuery) ein echtes Ziel.
    Der Vorteil eines JQ Plugins ist die einfache Mehrfachverwendung.. bzw. allgemein eine einfache, schon bekannte Verwendung von JQ Plugins.
    Ein typischer Aufruf eines solchen JQ Plugins:

    JavaScript
    1. $('selector').plugin({
    2. option1: 'value'
    3. });


    Die erste Zeile des Plugins
    Unser Ziel ist es ein Plugin zu erstellen, was beim klicken auf das Element, ein bestimmtes Attribut setzt.
    Zuerst erstellen wir eine anonyme, selbst aufrufende Funktion, in der unsere Funktion dann definiert wird. Dadurch schützen wir unser typisches JQ $ vor Kompatibilitätsproblemen mit anderen Frameworks und haben gleichzeitig einen schönen Wrapper der das Setzten/Ändern globaler Variablen verhindert.


    Funktionsdefinition mit Parameter
    Anschließend definieren wir unsere Funktion mit einem Parameter (options) an den spezifische Einstellungen übergeben werden können.
    'AttrSet' ist der Name der Funktion


    Standartwerte und Optionen
    Wir definieren ein paar Standard werte und ersetzten diese, wenn durch options andere werte gesetzt werden. Das ganze werden dann unsere Einstellungen für das Plugin. Aus Faulheit sind in meinen JS oft benutze variablen unter Abkürzungen zun erreichen, in diesem Fall kann man die Einstellungen über 'settings' oder eben '_' aufrufen, dies hat den Vorteil nicht jedes mal settings schreiben zu müssen, allerdings erschwert es teilweise die Lesbarkeit. Jeder so wie er mag.. :)
    Zusammen sieht das so aus


    Natürlich braucht man kein Objekt wenn darin sowieso nur ein key/value pärchen ist, allerdings werdet ihr nach und nach merken das man doch mehr als einen oder zwei parameter gerne mitgibt..


    Benutzen von this
    Jetzt wollen wir auf den Klick reagieren.
    Um den entsprechenden EventHandler setzten zu können, benötigen wir das HTML-Element, worauf die Funktion initialisiert wurde.
    Dieses steckt immer in 'this', der Performance wegen konvertieren wir dieses einmal zu einem jQuery Objekt/Element und speichern dieses in '$this'

    JavaScript
    1. /**
    2. * @var object $this holds the plugins init element
    3. */
    4. var $this = $(this);


    Nun können wir den Klick-Handler definieren. Innerhalb des Click-Handlers steckt das geklickte Element wieder in 'this' .. gleiches Spielchen..:

    JavaScript
    1. /**
    2. * initialize the event handler for the click event
    3. */
    4. $this.on('click', function(){
    5. $this = $(this);
    6. }


    Funktionalität hinzufügen & callback Funktion
    Im nächsten schritt sorgen wir dafür, dass das Attribut gesetzt wird und fügen eine Funktion (callback) hinzu, die nach dem setzten das Attributes aufgerufen wird und an die zwei Parameter übergeben werden:


    zur besseren code-überfliegbarkeit ^^ hier mal ohne diese ganzen Block-Kommentare


    Komprimierung
    Wenn man das Plugin life nutzen will, sollte man es vorher mit einem tool wie http://jscompress.com/ komprimieren, um Dateigröße einzusparen.

    JavaScript
    1. !function(t){t.fn.AttrSet=function(c){var n={attribute:"data-selected",callback:function(){}},a=(_=t.extend(n,c),t(this));a.on("click",function(){a=t(this),a.attr(_.attribute,!0),_.callback(this,_)})}}(jQuery);


    Am besten nennt man es dann nach diesem schema
    <framework>.<plugin>.<art>.[<version>.]js
    Also z.B. jquery.attrset.min.js


    Aufrufen
    Und schon ist das Plugin fertig, wir müssen es nurnoch aufrufen und unsere parameter übergeben.. :)

    JavaScript
    1. //aufrufen der Funktion ohne Parameter (defaults werden benutzt)
    2. $('selector').AttrSet();
    3. //aufrufen mit verändertem 'attibut'
    4. $('selector').AttrSet({
    5. attribute: 'data-my-own-attribute'
    6. });



    hier in Action

    Hoffe es ist alles verständlich, ansonsten fragt einfach & korrigiert mich wenn was nicht richtig ist c:

  • Müsste das Plugin nicht "AddOnClickAttrSetCallback" heißen? :D
    Ich weiß - ist nur ein Bsp


    Würde noch beim callback verdeutlichen, dass dort weiterführender code angegeben werden kann/sollte -- wenn denn überhaupt ein callback gebraucht wird.

    JavaScript
    1. /**
    2. * function callback got called after the attribute was set
    3. * @param object element clicked DOM element
    4. * @param object settings current settings
    5. */
    6. callback: function(element, settings){
    7. // ... <-- hier
    8. }


    (muss mir jquery angucken :S )

  • Habe das Tutorial mal angeschaut und auch gut verstanden.
    Jedoch verstehe ich Javascript noch nicht so ganz, wann was this ist.
    Was Prototype z.b. ist verstehe ich auch nicht so ganz und wie macht man Funktionen so das man die Optionen z.b. nicht immer mitgeben muss ?


    Wäre schön wenn du ein kleines Beispiel erstellen könntest was folgendes kann :
    Man gibt dem Plugin ein Div mit wo weitere 2 Divs erstellt werden und die zwei Divs auch gestylt werden (css).
    Zudem soll das erstellen der Divs in einer Draw/Build Methode gemacht werden, in einer Init Methode können z.b. weitere Sachen geprüft und ggf. in den Optionen geändert werden.