1. Packen Sie den gesamten Code in eine Closure

Das ist der Tipp, den ich am häufigsten verwende. Aber manchmal können Methoden außerhalb der Closure nicht aufgerufen werden.

Da der Code Ihres Plugins jedoch nur Ihrem eigenen Plugin dient, gibt es dieses Problem nicht. Sie können den gesamten Code in eine Closure packen. Und Methoden sollten wahrscheinlich innerhalb der Prototype-Methoden platziert werden.

(function($)  {
    //code here
})(jQuery);

2. Standardoptionen für das Plugin bereitstellen

Ihr Plugin sollte über einige Optionen verfügen, die Entwickler festlegen können. Daher ist es notwendig, Standardoptionen für die Wiederherstellung bereitzustellen. Sie können diese Optionen über die extend-Funktion von jQuery festlegen:

var defaultSettings = {      mode            : 'Pencil',
lineWidthMin    : '0',
lineWidthMax    : '10',
lineWidth       : '2' };
settings = $.extend({}, defaultSettings, settings || {});

3. Ein Element zurückgeben

JavaScript/jQuery hat eine großartige Funktion: die Methodenverkettung. Daher sollten wir diese Funktion nicht zerstören und aus Methoden immer ein Element zurückgeben. Ich befolge dies in jedem meiner jQuery-Plugins.

$.fn.wPaint = function(settings)  {
    return this.each(function()  {
    var elem = $(this);
    //run some code here
    }
}

4. Einmaligen Code außerhalb der Hauptschleife platzieren

Dieser Punkt ist wichtig, wird aber oft ignoriert. Einfach gesagt: Wenn Sie einen Codeabschnitt haben, der eine Reihe von Standardwerten darstellt und nur einmal instanziiert werden muss (und nicht bei jedem Aufruf Ihrer Plugin-Funktion), sollten Sie diesen Code außerhalb der Plugin-Methode platzieren. Dies lässt Ihr Plugin effizienter laufen und spart Speicher.

var defaultSettings = {
    mode            : 'Pencil',
    lineWidthMin    : '0',
    lineWidthMax    : '10',
    lineWidth       : '2' };
    settings = $.extend({}, defaultSettings, settings || {});

    $.fn.wPaint = function(settings)  {
    return this.each(function()  {
        var elem = $(this);
        //run some code here
    }
}

Du kannst feststellen, dass "defaultSettings" im obigen Code vollständig außerhalb der Plugin-Methode liegt. Da sich dieser Code innerhalb der Closure befindet, müssen wir uns keine Sorgen machen, dass diese Variablen überschrieben werden.

5. Warum man Klassen-Prototyping einrichten sollte

Methoden und Funktionen, als Fleisch und Blut deines Codes, sollten in den Prototyp-Funktionen platziert werden. Dafür gibt es zwei Gründe:

• Es kann viel Speicher sparen, weil du diese Methoden nicht wiederholt erstellen musst.
• Das Referenzieren einer vorhandenen Methode ist viel schneller, als eine neue zu erstellen.

Einfach gesagt, erweitert der Prototyp ein Objekt und stellt Methoden dafür bereit, ohne diese Methoden in jedem Objekt instanziieren zu müssen. Es macht deinen Code außerdem organisierter und effizienter. Sobald du dich an diesen Entwicklungsstil gewöhnt hast, wirst du feststellen, dass er dir bei zukünftigen Projekten viel Zeit spart.

6. Wie man Klassen-Prototyping einrichtet

Das Einrichten einer Prototyp-Methode hat zwei Teile. Zuerst müssen wir unsere anfängliche Klassendefinition erstellen, was in den meisten Fällen bedeutet, ein Objekt zu erstellen. Diese Definition enthält die Teile, die sich für jede Objektinstanz unterscheiden. In meinem Paint jQuery Plugin habe ich es so geschrieben:

function Canvas(settings)  {
    this.settings = settings;
    this.draw = false;
    this.canvas = null;
    this.ctx = null;
    return this;  
}

Füge nun die globalen Methoden hinzu:

Canvas.prototype =  {
    generate: function() {
    //generate code
    }
}

Der Schlüssel hier ist, die Prototyp-Methoden generisch zu halten, während die Daten für jede Instanz eindeutig sind und mit "this" referenziert werden können.

7. Verwende das "this"-Objekt

Durch die Verwendung von "$this" können wir die korrekte Referenz an andere Closures übergeben. Möglicherweise müssen wir die $this-Referenz auch an andere Methoden übergeben. Beachte, dass der Name $this geändert werden kann; jeder Variablenname funktioniert.

Canvas.prototype =  {
    generate: function()   {
        //some code
        var $this = this;
        var buton = //...some code
        button.click(function(){
        //using this will not be found since it has it's own this
        //use $this instead.
        $this.someFunc($this);
        });
    },

    someFunc: function($this)      {
    //won't know what "this" is.
    //use $this instead passed from the click event
    }
}

8. Einstellungen in jedem Objekt speichern

Ich speichere Einstellungen immer in jedem Objekt und arbeite dann mit dessen eigenen Einstellungen. Auf diese Weise müssen Sie nicht viele Parameter zwischen verschiedenen Methoden übergeben. Wenn Sie diese Variablen im Objekt ablegen, ist es außerdem praktisch, sie an anderer Stelle aufzurufen.

function Canvas(settings)  {
    this.settings = settings;
    return this;
}

9. Trennen Sie die Logik Ihrer Prototype-Methode

Dies mag ein Grundprinzip sein. Wenn Sie zögern, ob Sie eine Methode bereitstellen sollen, können Sie sich fragen: „Wenn jemand anderes diese Methode neu schreiben möchte, kann Ihr Code die Bedürfnisse dieser Person erfüllen?“ oder „Wie schwierig wäre es für jemand anderen, diese Methode zu schreiben?“ Natürlich ist dies eine Frage der Abwägung von Flexibilität. Hier sind die Methoden aus meinem Color Picker jQuery Plugin als Referenz:

generate()
appendColors()
colorSelect()
colorHoverOn()
colorHoverOff()
appendToElement()
showPalette()
hidePalette()

10. Setter/Getter-Optionen bereitstellen

Dies ist nicht erforderlich, aber ich stelle fest, dass alle meine Plugins es verwenden. Denn es erfordert nur ein wenig Code, um anderen eine Funktion bereitzustellen, die sie möglicherweise benötigen.

Im Grunde müssen wir Entwicklern nur erlauben, die Werte, die bereits auf dem Element vorhanden sind, zu setzen oder abzurufen:

var lineWidth = $("#container").wPaint("lineWidth");  $("#container").wPaint("lineWidth", "5");