Javascript – Abriß

Javascript Plugins, die jQuery nutzen sind meist nach dem selben Prinzip angelegt. Grundlagen dazu werden hier erklärt.

Der jQuery FullCalendar ist nach diesem Prinzip programmiert. Es wird der Prototype des jQuery Objektes genutzt, um alle jQuery Objekte mit einer Funktion zum Aufruf des Plugin zu ergänzen. Das macht Sinn, da der FullCalendar ein DOM-Element verändert (einen Kalender mit Tabell, Divs etc. erzeugt). Im Quelltext des FullCalendar Plugin findet man die Definition wie folgt:

$.fn.fullCalendar = function(options) {...};

FullCalender wird also über eine Funktion initialisiert die einfach „fullCalendar“ heißt. jQuery arbeitet mit Shortcuts im Syntax: $ === jQuery und $.fn == jQuery.prototype. Die Funktion fullCalendar wird also dem jQuery Prototype hinzugefügt. Dadurch steht sie jedem jQuery Objekt (da es vom jQuery Prototype erbt) zur Verfügung. Für ein div-Element mit der id=“calendar“ sieht die Erzeugung des FullCalendar wie folgt aus:

$('#calendar').fullCalendar({

// options here

});

Durch $() wird ein jQuery Objekt erzeugt. Man gibt den Selektor ‚#calendar‘ mit an wenn man ein jQuery Objekt aus einem bestimmten DOM Element erzeugen will. Da jedes DOM Element nach der Inkludierung des FullCalendar Plugin die Methode fullCalendar im Prototype zur Verfügung hat, kann man sie jetzt vom erzeugten jQuery Objekt aufrufen.

Ein weiteres typische Muster wird oft in jQuery Plugins angewandt um Namenskollisionen, vor allem mit dem $-Kürzel und anderen Libraries, die dieses ebenfalls nutzen zu vermeiden:

function($)
{
  $.fn.jqueryPlugin = function() {
    // Plugin code here
  };
}(jQuery);

Die äußere Funktion ist eine spezielle Konstruktion die man als Immediately-Invoked Function Expression bezeichnen könnte. Das ist einfach eine Funktion die zum einen definiert und zum anderen direkt aufgerufen wird. Im obigen Fall ist sie außerdem anonym d.h. es wurde kein Bezeichner für die Funktion angegeben. Der direkte Aufruf wird durch das Klammerpaar (jQuery) direkt nach dem Funktionskörper erreicht. Der Parameter jQuery wird dabei übergeben und kommt als $ direkt in die Funktion. Innerhalb der Funktion steckt der eigentliche Plugin Code der nun ungestört von anderen geladenen Libraries das $ Kürzel in seinem Scope für jQuery verwenden kann. Im FullCalendar Plugin wird dieses Konstrukt in einer ausgebauten Form verwendet. Details dazu sind hier erklärt.

(function(factory) {
if (typeof define === 'function' && define.amd) {
define([ 'jquery', 'moment' ], factory);
}
else {
factory(jQuery, moment);
}
})(function($, moment) {

// all plugin code here

}

Da FullCalendar neben jQuery das Plugin Moment.js verwendet, wird dies ebenfalls in diese Fabrik-Methode gepackt. jQuery selbst empfiehlt diese Vorgehensweise für Plugins.

Parameter zur Initialisierung des Plugin werden oft als ein Javascript Objekt übergeben. Das lässt sich besser umsetzen als eine lange Parameterliste, in der die Parameter in der richtigen Reihenfolge anzugeben sind.

Ein vollständiges Template für ein jQuery Plugin das DOM Elemente (wie FullCalendar.js) nutzt wird hier gegeben:

// jQuery plugin template for plugin that does work on element
(function($) {
  $.extend($.fn, {
      pluginName: function(param, options) {
          options = $.extend({
              // Options Defaults
          }, options);

          this.each(function() {
              // Operations for each DOM element
          }).data('pluginName', {
              // Plugin interface object
          });
      
          return this;
      }
  });
})(jQuery);

Mehr lesen: jQuery Plugin Guide