Wie würde ich eine Methode zu diesem jQuery-Plugin-Muster hinzufügen? Ich arbeite an einem Projekt für

Question

ich den folgenden Code als Grundlage für ein Plugin - es ist aus einem Artikel auf Smashing Magazine hier befindet sich unter der Überschrift ‚A Leichte Start‘:

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

Es funktioniert bisher gut für meine Zwecke, aber der Rest des Artikels geht auf eine Tangente und spricht darüber, was jQuery UI Widgets, von denen ich vermute, dass ich die jQuery UI-Bibliothek für, die ich nicht wirklich verwenden möchte .

/*! 
* 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); 

Ich muss jetzt eine Methode hinzufügen, aber ich bin ziemlich ratlos, wie das geht.

Die Methode muss so funktionieren, dass eine Instanz von dem, was das Plugin auf der Seite erstellt, dynamisch eine Eigenschaft ändern kann, indem sie die Methode mit einem Wert über die Konsole aufruft (eventuell geschieht dies über einen anderen Prozess) , aber Konsole ist gut für jetzt).

Wie würde ich den obigen Code ändern, um dies zu ermöglichen? Oder belle ich den falschen Baum an?

Jede Hilfe würde sehr geschätzt werden, komplexe JavaScript kann mich ein bisschen verloren im Dunkeln manchmal fürchte ich aber ich versuche, Dinge als 'Best Practices' wie möglich zu tun.

Answer 1

Die Dokumentation jQuery empfiehlt dringend Plugin Methoden Aufruf von Übergeben einer Zeichenfolge an die Haupt-Plugin-Methode. Dies soll verhindern, dass der Namespace $.fn durch die Methoden Ihres Plugins überladen wird. So können Sie etwas tun:

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

In Ihrem Muster, haben Sie bereits den perfekten Ort, um Ihre Methoden zu definieren: Plugin.prototype.

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

Beachten Sie die Verwendung von $(this.element): Um zum Beispiel eine changeColor Methode hinzuzufügen. Das ist, weil in dem Plugin Konstruktor, eine Eigenschaft, element definiert ist, und das Element, auf das das Plugin angewandt wird, wird es zugeordnet:

this.element = element; 

, dass das tatsächliche DOM-Element ist, nicht ein jQuery-Objekt, daher die Notwendigkeit jQuery darauf anzurufen.

So, jetzt haben Sie eine Methode, Sie müssen einen Mechanismus hinzufügen, um es aufzurufen.Im Anschluss an die Empfehlungen der jQuery docs:

$.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)); 
     } 
    }); 
}; 

Sie können dann die changeColor Methode wie folgt nennen:

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

Hier ist ein fiddle with a working example. Möglicherweise möchten Sie die Methode, die den Code aufruft, etwas überprüfen, um sicherzustellen, dass das Plugin tatsächlich für die Elemente instanziiert wurde, auf denen Sie es aufrufen.

Answer 2

Verwendung

Plugin.prototype.reset = function() { 

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

}; 

und so weiter. fügen Sie so viele Optionen wie Sie

Answer 3

wollen Statt mit einem vorformulierten des Beginnens, die für Sie schwer zu verstehen, ist der beste Start in den Ursprüngen:

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