HTML5-Segmentfarbe?

Dieser Code ist ein hervorragendes Beispiel dafür, warum das Prototypmuster viel besser ist als das funktionale Muster. Dieses Plugin ist als De-facto-Factory-Funktion definiert, die eine bunte Auswahl von funktional-lokalen Statusvariablen ( startAngle , arc , pplArray usw.) deklariert, die durch die verschiedenen Methoden, die das Plugin implementieren, geschlossen werden Darüber hinaus sind einige der Methoden definiert als expressionsierte Funktionsliterale in einem funktionslokalen ( methods ) unter Verwendung der Objektliteralsyntax, wobei one -Methode definiert ist ein expressionisiertes Funktionsliteral, das einer einmaligen Funktion zugeordnet ist - local ( var rotateWheel ), die an den Anfang des Bereichs gehängt und durch verschiedene andere Methoden geschlossen wird, und der Rest ( genHex() , stopRotateWheel() usw.) sind als Funktionsanweisungen definiert, die an den oberen Rand des Geltungsbereichs gehängt und ebenfalls durch verschiedene andere Methoden geschlossen werden. Was für ein Durcheinander!

Darüber hinaus müssen nicht alle Abschlussvariablen wirklich Closures sein, da sie den Status zwischen Methodenaufrufen nicht wirklich beibehalten müssen. arc ist ein gutes Beispiel dafür.

Ein weiterer Kritikpunkt, der hier gemacht werden kann, ist, dass ein bestimmter Zustand tatsächlich im DOM-Baum gespeichert ist, was absurd und unnötig ist. Ich beziehe mich speziell auf params.participants , das ist ein jQuery-Selektor, der ein <ul> -Element irgendwo im DOM findet (spielt eigentlich keine Rolle), dessen Children <li> -Elemente iteriert werden, um den Radsegment-Text aufzubauen von ihrem innerenHTML. Diese Daten müssen nicht im DOM gespeichert werden. Es könnte leicht in einem Array auf einer Klasseninstanz gespeichert werden.

Und dann gibt es natürlich die klassische Kritik am funktionalen Muster, dass es bewirkt, dass neue Funktionsobjekte für jeden Aufruf der Konstruktor / Factory-Funktion ( $.fn.spinwheel() in diesem Fall) definiert werden, während das Prototypmuster einen einzelnen enthält Definition jeder Funktion des Klassenprototyps, wenn die Klasse definiert wird.

Jedenfalls habe ich das gesamte Plugin unter Verwendung des Prototypmusters neu geschrieben. Das Widget ist jetzt als globale Konstruktorfunktion für window.SpinWheel definiert (natürlich könnte es bei Bedarf in einen Namespace verschoben werden). Alle Instanzmethoden werden mit einer einheitlichen Syntax definiert, indem dem Klassenprototyp, SpinWheel.prototype , expressionisierte Funktionsliterale zugewiesen werden.

In Bezug auf die Zustandsdaten gibt es ein wenig Standardkonfigurationsdaten, die statisch in der Konstruktorfunktion definiert sind (im Grunde genommen habe ich das $.fn.spinwheel.default_options -Objekt im ursprünglichen Code genommen und es SpinWheel.config zugewiesen, aber einen Schreibfehler korrigiert und entfernte params.participants ), dann wird das config-Objekt, das als Argument an die Konstruktorfunktion übergeben wird, (zusammen mit dem $canvas jQuery-Wrapper des Canvas-Knotens und seinem Kontextobjekt) für die Instanz selbst als this.config erfasst. . Schließlich wird der tatsächliche Status der veränderbaren Instanz als Eigenschaften für die Instanz gespeichert, z. B. this.segmentTexts (der Text für jedes Segment), this.colors (die aktuell ausgewählten Segmentfarben) und this.curAngle (der aktuelle Winkel des Rads). . Das ist es, wirklich nur drei Arten von Daten: statische Standardkonfiguration (Fallback), Instanzkonfiguration und Instanzattribute. Alle Methoden sind in ihrem Definitionsstil einheitlich und haben den gleichen Zugriff auf alle Objektdaten.

Das jQuery-Plugin ist jetzt nur ein dünner Wrapper um die SpinWheel -Klasse; Im Grunde instanziiert es es, hängt es an den Zielbereich an (nicht wirklich notwendig, es sei denn, externer Code möchte nach der Erstellung darauf zugreifen) und initialisiert es. Die Plugin-Schnittstelle ist die gleiche wie beim ursprünglichen Code, aber mit dem neuen Code können Sie auch SpinWheel unabhängig vom jQuery-Plugin-Framework instanziieren, wenn Sie das möchten (obwohl natürlich die Implementierung immer noch gesagt werden sollte) hängt davon ab, ob jQuery geladen wird.)

Außerdem habe ich nur die Tasten Delete , Clear und Reset hinzugefügt, um mehr Kontrolle über das Rad zu demonstrieren. Sie können jetzt Segmente durch Regex-Abgleich mit dem Text löschen, das gesamte Rad löschen, damit Sie es von Grund auf neu erstellen können, und es auf die ursprüngliche Konfiguration zurücksetzen (obwohl, wenn Sie keine Farben über die anfängliche Konfiguration konfiguriert haben, werden sie generiert nach dem Zufallsprinzip wieder, was sicherlich anders sein wird als in der ursprünglichen Anzeige, aber Sie können Anfangsfarben konfigurieren, falls gewünscht).

Hier ist das neue HTML:

Hier ist das neue IIFE, das die Klasse SpinWheel definiert:

Und hier ist der Thin-Wrapper, der die jQuery-Plugin-Schnittstelle bereitstellt:

Der Code für die Instanziierung durch jQuery-Plugin ändert sich nicht (außer ich habe den primären Konfigurationsparameter umbenannt):

Demo:

Ссылка

Lass es mich wissen, wenn du Fragen hast.

Fügen Sie etwas wie das Raphael-Farbrad hinzu und binden Sie es an ein Formular-Eingabefeld (möglicherweise sogar ein verstecktes).

Dann haben Sie den Farbcode wie folgt: