jQuery Plugin Entwicklung wie man Variablen und Methoden privat hält

Question

Für Übungszwecke erstelle ich ein jQuery Plugin, einen einfachen Image Slider. Ich benutze ein Muster von Boilerplate - jQuery Plugins.

Während des Initialisierungsprozesses funktioniert alles wie erwartet, jede Instanz erhält die richtigen Werte (Breiten und Höhen, auch Ereignisbindung), die für die Einrichtung benötigt werden.

Das Problem beginnt, wenn ich versuche, eine berechnete Dias-Breite an eine Funktion zu übergeben, die die Animation ausführt (geklickt auf Weiter). Jeder Wert, den ich zu speichern versuchte, wurde von der letzten Instanz überschrieben - ok, das ist die Prototyp-Vererbung, wie ich gelernt habe.

Ich googelte viel und fand (nicht nur) diese Lösung auf Lagerbestand: global or local variables in a jquery-plugin. Die akzeptierte Antwort schlägt vor, Werte zu speichern, die im HTML-Markup, dem Attribut "data-whatever", privat sein müssen.

Das funktioniert sehr gut, ist aber nicht sehr nett.

Die zweite Antwort schien elegant zu sein, im Rahmen jeder Instanz reale private Variablen zu halten:

(function($) { 

$.pluginName = function(element, options) { 
.... 
var plugin = this; 
.... 
     // a public method 
    plugin.foo_public_method = function() { 
      .... 
    } 

    // private methods 
    var foo_private_method = function() { 
      .... 
    } 
    plugin.init(); 

} .... 

Sah ziemlich einfach - aber ich bin nicht in der Lage, diese Lösung zu implementieren!

Also meine Frage ist: Wie implementiere ich eine private Variable im folgenden Plugin-Muster? (Und wie nenne ich es richtig von innen Plugin.prototype ...)

Ich habe eine Fiddle mit meinem Plugin erstellt. Ein Auszug aus dem Code:

(function ($, window, document, undefined) { 

var pluginName = "easyCarousel"; 

// default configuration object 
defaults = { 
     ... default values here, css etc 
    } 
}; 

// The actual plugin constructor 
function Plugin(element, options) { 

    this.element = element; 
    this.options = $.extend({}, defaults, options); 
    this._defaults = defaults; 
    this._name = pluginName; 
    this.init(); 
} 

Plugin.prototype = { 

    init: function() { 

     var options = this.options; 
     this.options.stage = $(this.element); 
     .... calling/starting views and controllers 

    }, 

    buildCollectionView: function (options, Helper) { 
     .... setting markup, applying css, calulating dimensions 
    }, 

    buildStageView: function (options, Helper) { 

     .... setting markup, applying css 
     .... storing calculated slide width in data Attribute 

     stage.attr({ 
      'data-slidewidth': width, 
      'data-stagewidth': setWidth 
     }); 
    }, 

    buildTheatreView: function (options, Helper) { 

     .... setting markup, applying css 

    }, 

    buildNavigationView: function (options) { 

     .... setting markup 

    }, 


    navigationController: 

    function (options, slideForward, slideBackward) { 

     .... event binding 

     pubSub.on("navigation:arrownext:click", function (e) { 
      slideForward(options, e); 
     }); 

     $('.carousel__arrownext', options.theatre) 
     .bind('click', function() { 
      pubSub.trigger("navigation:arrownext:click", this); 
     }); 
    }, 

    slideForwardAnimation: function (options, e) { 

     .... reading stored width value from data Attribute 

     $element.animate({ 
      "left": "-=" + slideWidth 
     }) 
    }, 


    setDimensionsHelper: function (options) { 

     .... calculating an returning dimensions of the slider 
    }, 

    eventBusHelper: function (options) { 
     // integrating third party eventbus 
    } 
}; 

$.fn[pluginName] = function (options) { 

    return this.each(function() { 
     if (!$.data(this, "plugin_" + pluginName)) { 
      $.data(this, "plugin_" + pluginName, 
      new Plugin(this, options)); 
     } 
    });  
}})(jQuery, window, document); 

Ich hoffe, mein Codebeispiel ist nicht zu kompliziert/lang zu sehen.

Wie Sie vielleicht sehen, bin ich ziemlich neu zu erweiterten Javascript-Muster - und im Moment steckte ich wirklich. Ich habe schon viele Stunden in diesem Problem verbracht. Daher wird jeder Versuch, zu helfen, sehr geschätzt. Natürlich auch jede Rezension zum Code.

Vielen Dank im Voraus :)

Answer 1

Alles, was Sie tun müssen, ist die Variablen innerhalb des Prototyps (direkt oder aus einem Verfahren in dem Prototyp) zu definieren, anstatt es in Ihrem Konstruktor tun. Im Konstruktor definierte Variablen werden für alle Instanzen Ihres Plugins freigegeben, während im Prototyp definierte Variablen pro Instanz sind.

Außerdem haben Sie kein "var" -Schlüsselwort vor Ihrer "defaults" -Definition, also erstellen Sie tatsächlich eine globale Variable namens "defaults" anstatt einer, die nur auf Ihre Schließung beschränkt ist.

Dies ist, was ich empfehlen würde:

// default configuration object 
var defaults = { 
     ... default values here, css etc 
    } 
}; 

// The actual plugin constructor 
function Plugin(element, options) { 
    this._defaults = defaults; 
    this._name = pluginName; 
    this.init(element, options); 
} 

Plugin.prototype = { 

    init: function (element, options) { 
     this.element = element; 
     this.options = $.extend({}, this._defaults, options); 
     this.options.stage = $(this.element); 
     .... calling/starting views and controllers 

    }, 

oder noch besser:

// The actual plugin constructor 
function Plugin(element, options) { 
    this.init(element, options); 
} 

Plugin.prototype = { 

    _name: 'put your name here', 

    _defaults: { 
     // just define them here, no need for an outside variable 
    }, 

    init: function (element, options) { 
     this.element = element; 
     this.options = $.extend({}, this._defaults, options); 

     // why are you saving stage as an option? That doesn't make sense. 
     this.options.stage = $(this.element); 
     // Makes more sense to just do this ($el is a more standard name for this) 
     this.$el = $(this.element); 
     // .... calling/starting views and controllers 

    },