Hinzufügen von Funktionen mit WinJS-Mixins (HTML)

Applies to Windows and Windows Phone

Mixins sind Objekte, die eine bestimmte Funktionsklasse implementieren. Die Windows-Bibliothek für JavaScript enthält z. B. Mixins zum Verwalten von Ereignissen und Mixins zum Behandeln der Bindung.

Mixins wurden nicht für die direkte Verwendung entwickelt, aber Sie können sie verwenden, um Ihren Typen Funktionen hinzuzufügen. Mixins enthalten implementierte Funktionen, die vielen Typen hinzugefügt werden können.

Sie können Ihre eigenen Mixins erstellen. Dieser Code zeigt, wie Sie einen Movable-Mixin definieren, der die Funktionen goForward, goBackward, turnLeft und turnRight enthält, und ihn mit WinJS.Class.mix der Robot-Klasse hinzufügen.


var Robot = WinJS.Class.define(function (name) {
    this.name = name;
});

var Movable = {
    direction: "stopped",
    goForward: function () { this.direction = "going forwards" },
    goBackward: function () { this.direction = "going backwards" },
    turnRight: function () { this.direction = "turning right" },
    turnLeft: function () { this.direction = "turning left" },
};

WinJS.Class.mix(Robot, Movable);

WinJS.Namespace.define("Robotics", {
    Robot: Robot
});

var myRobot = new Robotics.Robot("Mickey");

myRobot.goBack();

console.log(myRobot.direction);
// Output: "going backwards"


Verwenden von WinJS-Mixins

Sie können WinJS.Utilities.eventMixin und WinJS.UI.DOMEventMixin verwenden, um Ereignisverwaltungsfunktionen hinzuzufügen, und WinJS.Binding.dynamicObservableMixin, um Bindungsverwaltungsfunktionen hinzuzufügen

Hinzufügen von WinJS.Utilities.eventMixinzu einem Typ

Sie können WinJS.Utilities.eventMixin zu jedem von Ihnen definierten Typ hinzufügen. Er enthält WinJS.Utilities.eventMixin.addEventListener-, WinJS.Utilities.eventMixin.removeEventListener- und WinJS.Utilities.eventMixin.dispatchEvent-Funktionen, mit denen sie benutzerdefinierte Ereignisse, die Sie für den Typ definieren, aufrufen und verarbeiten können.

Der folgende Code zeigt z. B., wie Sie einen Robot-Typ mit einem rename-Ereignis definieren, das ausgelöst wird, wenn der Name des Robot geändert wird. Der Ereignishandler gibt eine neue Meldung an die JavaScript-Konsole in Microsoft Visual Studio aus.


var Robot = WinJS.Class.define(function (name) {
        this._name = name;
    }, {
        name: {
            get: function () {
                return this._name;
            },
            set: function (newName) {
                this._name = newName;
                this.dispatchEvent('rename');
            }
        }
});

WinJS.Class.mix(Robot, WinJS.Utilities.eventMixin);
WinJS.Class.mix(Robot, WinJS.Utilities.createEventProperties("rename"));

var rob = new Robot("Bob");

robot.addEventListener("rename", function () {
    console.log("Robot renamed to " + this.name);
}.bind(robot));

robot.name = "Jim";
// Output: "Robot renamed to Jim"


In diesem Code vermischen Sie den Robot-Typ mit WinJS.Utilities.eventMixin, um die Ereignislistenerfunktion zu erhalten. Außerdem mischen Sie die WinJS.Utilities.createEventProperties-Funktion, um das Ereignis zu definieren. Beachten Sie, dass Sie den Ereignis-Mixin mit dem Typ mischen müssen, bevor Sie WinJS.Utilities.createEventProperties verwenden. Wenn Sie die name-Eigenschaft definieren, verwenden Sie die WinJS.Utilities.eventMixin.dispatchEvent-Funktion im set-Accessor, um das rename-Ereignis aufzurufen.

Hinzufügen von DOMEventMixinzu einem Typ

WinJS.Utilities.eventMixin eignet sich zum Definieren von Ereignissen für Typen, die vollständig in JavaScript verarbeitet werden. Er ist nicht nützlich, wenn Sie mit Ereignissen arbeiten, die DOM-Elementen zugeordnet sind. WinJS steuert das Umbrechen und Manipulieren von HTML-Elementen. Diese Steuerelemente enthalten häufig Ereignisse, die auf den von den zugehörigen DOM-Elementen ausgelösten DOM-Ereignissen basieren. Wenn Sie ein DatePicker-Steuerelement verwenden, ist es z. B. einfacher, auf ein Änderungsereignis vom DatePicker-Steuerelement zu reagieren, als einzelne Änderungsereignisse der drei select-Steuerelemente nachzuverfolgen.

Das Zuordnen von Ereignissen zum Steuerelementtyp anstatt zum DOM-Element schützt außerdem den Code vor Änderungen, zum Beispiel, wenn die Implementierung des DatePicker die darin enthaltenen Steuerelemente ändert.

Das DOM-Ereignismodell ermöglicht die Ereignisweitergabe. DOM-Ereignisse werden in der DOM-Struktur weitergegeben und können auf jeder Ebene verarbeitet werden. Das ist nützlich, wenn Sie viele klickbare Elemente haben. Sie können beispielsweise das DIV-Element, das die Elemente enthält, mit einer einzelnen Klickhandlerfunktion belegen und dann alle Klickereignisse von allen enthaltenen Elementen aus verarbeiten, wenn sie per Bubbling weitergeleitet werden. Weitere Informationen zur DOM-Ereignisverarbeitung finden Sie im Thema zum Bubbling und Aufzeichnen von Ereignissen.

WinJS.UI.DOMEventMixin enthält Methoden, die Ereignisse implementieren, die in der DOM-Struktur weitergegeben werden. Drei Funktionen sind enthalten: addEventListener, removeEventListener und dispatchEvent.

Um diesen Mixin einem von Ihnen erstellten Typ hinzuzufügen, müssen Sie eine Eigenschaft namens _domElement für den Typ festlegen. Dabei handelt es sich um das Feld, das die WinJS.UI.DOMEventMixin-Implementierung sucht, wenn sie das Ereignis aufruft. Es wird zum Zielknoten für das Ereignis.

Der folgende Code zeigt das Erstellen einer minimalen Steuerelementklasse für ein DIV-Element und das Mischen von WinJS.UI.DOMEventMixin. Danach können Sie einen Ereignislistener für das click-Ereignis hinzufügen und darauf antworten.

Damit dieser Code funktioniert, benötigen Sie einen DIV mit der ID "div" und einen zweiten DIV mit der ID "report".


var MyButton = WinJS.Class.define(function (elem) {
    				this._domElement = elem;
   				 elem.winControl = this;
   				 this._numberClicks = 0;
    },
    {
        initialize: function () {

            this._domElement.appendChild(document.createElement('button'));

            function clickHandler(ev) {
                var clicks = ++this._numberClicks;
                document.getElementById("report").innerText = clicks;
            }
            this._domElement.querySelector('button').addEventListener("click", 
												    clickHandler.bind(this));
        }
});

WinJS.Class.mix(MyButton, WinJS.UI.DOMEventMixin);

var button = new MyButton(document.getElementById("div"));
button.initialize();;

Hinzufügen von Bindungsfunktionen mit WinJS.Binding.mixin

Um ein benutzerdefiniertes Objekt an ein HTML-Element zu binden, müssen Sie es feststellbar machen, d.h., es muss Listener benachrichtigen können, wenn seine Eigenschaften geändert werden. Der WinJS.Binding.mixin stellt diese Funktion bereit. Ein Beispiel finden Sie unter So wird's gemacht: Binden eines komplexen Objekts.

 

 

Anzeigen:
© 2014 Microsoft