jQuery Plugin Concept

Viele Probleme wie der Zugriff auf das aktuelle Element (this), auf dass das Plugin angewendet wurde, oder die Verwendung von CSS Klassen und IDs auf einer Weise, daß sie von außen noch beinflussbar sind, konnte ich damit lösen.

1. Pluginkonzept

// Create closure.
(function( $ ) {
// Plugin definition. 
$.fn.SlavleeCom = function( Options ) { 
// Extend our default options with those provided.
// Note that the first argument to extend is an empty 
// object – this is to keep from overriding our "defaults" object.
var PluginInstance = this;
PluginInstance.Opts = $.extend( {}, $.fn.SlavleeCom.Defaults, Options );
// Our plugin implementation code goes here.
InitializePlugin(PluginInstance);
};
/**
 * Initialize this plugin instance
 * @param jQuery PluginInstance
 * @return void
 */
function InitializePlugin(PluginInstance) {

}
// Plugin defaults – added as a property on our plugin function.
$.fn.SlavleeCom.Defaults = {

};
// End of closure.
})( jQuery );

Das closure ist meines Erachtens sehr wichtig um Konflikte zu mit anderen Javascript Bibliotheken oder anderen jQuery Einbindugnen zu vermeiden. Es kostet uns lediglich zwei Zeilen Code (Anfang und Ende). Der Konstruktor erwartet ein Parameter: Options, welche in der ersten Zeile mit den globalen Standardeinstellungen gemischt werden. Dadurch haben wir alle Standardeinstellungen + den individuellen Einstellungen in ein JSON Objekt.
Ich weise das Ergebnis der neuen Eigenschaft Opts von PluginInstance zu, was widerum das jQuery Objekt selbst ist. Der Vorteil es als Eigenschaft und nicht als seperate Variable zuzuweisen ist es, dass wir nur die Variable: PluginInstance für alle weiteren Funktionen übergeben müssen und haben alle Informationen.

Die angesprochenen globalen Standardeinstellungen setze ich immer direkt vor dem Ende des closures. Die Einstellungen ist eine statisches Property und im JSON Format. Damit sind die Standardeinstellungen für alle Plugininstanzen gleich.

2. Pluginkonzept

Das erste Pluginkonzept lässt sich eigentlich für alle Anwendungsfälle nutzen. Falls man jedoch ein Plugin schreibt, welches vom Grundverständnis einer Mehrfachnutzung auf einer Seite genutzt werden soll bzw. für mehrere HTML Elemente gleichzeitig genutzt werden soll. Dann ist diese Struktur besser geeignet:

// Create closure.
(function( $ ) {
// Plugin definition. 
$.fn.SlavleeCom = function( Options ) { 
// Extend our default options with those provided.
// Note that the first argument to extend is an empty 
// object – this is to keep from overriding our "defaults" object.
var Opts = $.extend( {}, $.fn.SlavleeCom.Defaults, Options );

// Loop through all Instances
return this.each(function(){
var PluginInstance = this;
PluginInstance.Opts = Opts;
// Our plugin implementation code goes here. 
InitializePlugin(PluginInstance);
});
};
/**
 * Initialize this plugin instance
 * @param jQuery PluginInstance
 * @return void
 */
function InitializePlugin(PluginInstance) {

}
// Plugin defaults – added as a property on our plugin function.
$.fn.SlavleeCom.Defaults = {

};
// End of closure.
})( jQuery );

Dieses Konzept ist fast identisch mit der ersten mit einem entscheidenen Unterschied. Ab Zeile 11 durchlaufen wir alle Elemente die dieses Plugin zugewiesen wurde. Und wir haben den Vorteil das wir gewisse Prozesse nur einmal ausführen müssen und in allen Plugininstanzen nutzen können. Der andere Vorteil ist es, daß wir jedes Element unterschiedlich behandeln können.
Im obigen Beispiel werden die Einstellungsparameter einmal erzeugt und sind somit für alle Plugininstanzen nutzbar.

Falls du Probleme oder Fragen hast oder weitere QuickTips wünscht, dann besuch mich auf meiner Facebook Seite und sende mir eine Nachricht oder schreibe es auf der Pinnwand. Du kannst mir natürlich auch eine E-Mail schreiben.