Come aggiungerei un metodo a questo modello di plugin jQuery?

Question

Sto utilizzando il seguente codice come base per un plugin su cui sto lavorando per un progetto - è da un articolo su Smashing Magazine si trova qui sotto il titolo 'A Leggera Start':

http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/

Finora funziona bene per i miei scopi, ma il resto dell'articolo si sviluppa su una tangente e parla di cosa sono i widget di jQuery UI che presumo avrei bisogno della libreria dell'interfaccia utente jQuery, che non voglio veramente usare .

/*! 
* jQuery lightweight plugin boilerplate 
* Original author: @ajpiano 
* Further changes, comments: @addyosmani 
* Licensed under the MIT license 
*/ 

// the semi-colon before the function invocation is a safety 
// net against concatenated scripts and/or other plugins 
// that are not closed properly. 
;(function ($, window, document, undefined) { 

    // undefined is used here as the undefined global 
    // variable in ECMAScript 3 and is mutable (i.e. it can 
    // be changed by someone else). undefined isn't really 
    // being passed in so we can ensure that its value is 
    // truly undefined. In ES5, undefined can no longer be 
    // modified. 

    // window and document are passed through as local 
    // variables rather than as globals, because this (slightly) 
    // quickens the resolution process and can be more 
    // efficiently minified (especially when both are 
    // regularly referenced in your plugin). 

    // Create the defaults once 
    var pluginName = 'defaultPluginName', 
     defaults = { 
      propertyName: "value" 
     }; 

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

     // jQuery has an extend method that merges the 
     // contents of two or more objects, storing the 
     // result in the first object. The first object 
     // is generally empty because we don't want to alter 
     // the default options for future instances of the plugin 
     this.options = $.extend({}, defaults, options) ; 

     this._defaults = defaults; 
     this._name = pluginName; 

     this.init(); 
    } 

    Plugin.prototype.init = function() { 
     // Place initialization logic here 
     // You already have access to the DOM element and 
     // the options via the instance, e.g. this.element 
     // and this.options 
    }; 

    // A really lightweight plugin wrapper around the constructor, 
    // preventing against multiple instantiations 
    $.fn[pluginName] = function (options) { 
     return this.each(function() { 
      if (!$.data(this, 'plugin_' + pluginName)) { 
       $.data(this, 'plugin_' + pluginName, 
       new Plugin(this, options)); 
      } 
     }); 
    } 

})(jQuery, window, document); 

ora ho bisogno di aggiungere un metodo per questo, ma io sono piuttosto confusi su come farlo.

Il metodo deve funzionare in modo che un'istanza di ciò che il plugin sta creando nella pagina possa avere una proprietà modificata dinamicamente chiamando il metodo con un valore tramite la console (eventualmente ciò avverrà tramite qualche altro processo , ma la console è buona per ora).

Come posso modificare il codice sopra per consentire questo? O sto abbaiando sull'albero sbagliato?

Qualsiasi aiuto sarebbe molto apprezzato, JavaScript complesso può lasciarmi un po 'perso nel buio a volte ho paura, ma mi piace provare a fare le cose come' migliori pratiche 'possibile.

Answer 1

La documentazione jQuery raccomanda vivamente di chiamare metodi plugin passare una stringa al metodo del plugin principale. Questo serve per impedire che lo spazio dei nomi $.fn diventi ingombrante dai metodi del tuo plugin. Così si fa qualcosa di simile:

$.fn.yourPlugin = function(options) { 
    if (typeof options === "string") { 
     //Call method referred to by 'options' 
    } else { 
     //Setup plugin as usual 
    } 
}; 

nel vostro modello, hai già il luogo ideale per definire i metodi: Plugin.prototype. Ad esempio, per aggiungere un metodo changeColor:

Plugin.prototype.changeColor = function(color) { 
    $(this.element).css("color", color); 
} 

Avviso l'uso di $(this.element). Questo perché nel costruttore Plugin, una proprietà element è definita, e l'elemento su cui viene applicato il plugin è assegnato ad esso:

this.element = element; 

che rappresenta l'elemento effettivo DOM, non un oggetto jQuery, da qui la necessità chiamare jQuery su di esso.

Quindi ora avete un metodo, è necessario aggiungere un meccanismo per chiamarlo.In seguito alle raccomandazioni dei docs jQuery:

$.fn[pluginName] = function (options) { 
    return this.each(function() { 
     if (typeof options === "string") { 
      var args = Array.prototype.slice.call(arguments, 1), 
       plugin = $.data(this, 'plugin_' + pluginName); 
      plugin[options].apply(plugin, args); 
     } else if (!$.data(this, 'plugin_' + pluginName)) { 
      $.data(this, 'plugin_' + pluginName, 
      new Plugin(this, options)); 
     } 
    }); 
}; 

È quindi possibile chiamare il metodo changeColor in questo modo:

$("#example").defaultPluginName("changeColour", "red");​​​​​​​​​​​​​​​​​​​​​​​​​​​ 

Ecco un fiddle with a working example. Potresti voler aggiungere un po 'di controllo sul metodo di chiamata del codice per assicurarti che il plugin sia effettivamente istanziato sull'elemento (s) su cui lo stai chiamando.

Answer 2

uso

Plugin.prototype.reset = function() { 

}; 
Plugin.prototype.destroy = function() { 

}; 

e così via. aggiungere le opzioni che si desidera

Answer 3

Invece di partire con un testo standard che è difficile per voi capire, il miglior inizio è alle origini:

http://docs.jquery.com/Plugins/Authoring