EaselJS: Vererbung

Neue Klassen Definitionen zu erschaffen, die Display Objekte erweitern, ist einfach und unterstützt Verkapselung und leicht wieder verwendbare visuelle Elemente. In diesem Tutorial wird eine Methode gezeigt, eine Klasse zu erweitern. Aber es gibt viele andere Optionen. Benutze die für dich komfortabelste und wende die Lektion an, die du hier lernst.
(Anmerkung von mir) Schaue dir zu diesem Beispiel die Original Button.js an, um das Ganze besser zu verstehen. Außerdem verweise ich auf folgendes Javascript Tutorial zum Thema Klassen und Objekte in Javascript.

Wir erzeugen eine Button Klasse , die die Container Klasse erweitert. (function() { var Button = function(label) { this.initialize(label); } Button.prototype = new createjs.Container(); Button.prototype.Container_initialize = p.initialize; Button.prototype.initialize = function(label) { this.Container_initialize(); // add custom setup logic here. } window.Button = Button; }());

In Zeile 1 & 15 wird eine anonyme wrapper Funktion erstellt und aufgerufen ( damit der globale Bereich nicht "verunreinigt" wird). In Zeile 3 wird eine neue Konstruktor Funktion definiert, dann wird in Zeile 6 sein prototype auf eine neue Container Instanz gesetzt. Das bewirkt, dass die neue Klasse alle Eigenschaften und Methoden von der Container Klasse erbt.

Im Konstruktor in Zeile 4, rufen wir die initialize Methode auf und lassen die Konstruktor Parameter durchlaufen. Die initialize Methode behandelt das Set Up für neue Instanzen und es ist lebensnotwendig, dass es aufgerufen wird.

In dieser Klasse überschreiben wir die Container's initialize Methode, um ein selbst erstelltes Setup zu erzeugen, allerdings müssen wir sicherstellen, dass die übergeordnete, super Klassen initialize Methode aufgerufen wird. Das ist sehr wichtig, besonders bei Klassen, die vom Container erben.

Um das zu erreichen, speichern wir die existierende initialize Methode (Zeile 8), definieren sie neu (Zeile 9), und stellen sicher, dass wir sie als erstes in der neuen Methode aufrufen (Zeile 10).

Zum Schluß in Zeile 14 übertragen wir unsere Klasse zurück in den globalen (window) Bereich, um ihn für unsere Anwendung erreichbar zu machen. Nun kann die Klasse instanziiert werde und der Display Liste hinzugefügt werden, wie jedes andere Display Objekt.

Check out demo.html and Button.js to see an example this in action.