Javascript-Bereich addEventListener und diese
Ich bin ein C# - Entwickler Experimentieren mit JavaScript und ich versuche, meinen Kopf um den Rahmen 🙂
Ich habe den folgenden code enthält eine addEventListener
in die möchte ich ein Feld aus meinem Objekt:
(function(window) {
function Keyboard() {
this.keys = {};
}
Keyboard.prototype.handle_keydown = function(args) {
this.keys[args.keyCode] = true;
}
Keyboard.prototype.listen = function() {
window.addEventListener('keydown', this.handle_keydown);
}
app.util.keyboard = new Keyboard();
})(window);
Möchte ich durch das Schlüssel-array in meinem hander, aber verstehen, dass ich nicht zugreifen kann ist mit diesem, denn dies ist das Fenster, in diesem Zusammenhang (richtig?).
Wenn ich es ändern zu
app.util.keyboard.keys[args.keyCode] = true;
funktioniert es, aber ich bin mir nicht sicher, das ist ein guter Weg, um es zu beheben.
Fand ich diese Frage, das scheint ziemlich ähnlich, aber ich bin nicht sicher, wie kann ich es passend in meinem Beispiel.
Vielen Dank für Ihre Hilfe!
Sie haben, um die Funktionen hinzuzufügen, die durch Vorbild, können Sie legen Sie Sie in die Tastatur-Funktion statt?
Gibt es einen Grund, warum man mit einem self-executing-Funktion?
Ich möchte rufen Sie die listen-Funktion in eine andere Funktion, als, wo ich erstellen Sie die Tastatur, so dass ich glaube, ich habe zu?
Ich denke, ich mache es auch garantieren meine Variablen bezieht sich auf die Tastatur, 'class'?
Das stimmt, und das scheint die Verantwortlichen Weg, es zu benutzen, einfach Fragen.
Gibt es einen Grund, warum man mit einem self-executing-Funktion?
Ich möchte rufen Sie die listen-Funktion in eine andere Funktion, als, wo ich erstellen Sie die Tastatur, so dass ich glaube, ich habe zu?
Ich denke, ich mache es auch garantieren meine Variablen bezieht sich auf die Tastatur, 'class'?
Das stimmt, und das scheint die Verantwortlichen Weg, es zu benutzen, einfach Fragen.
InformationsquelleAutor Raf | 2012-12-21
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ein paar Dinge:
Meisten Leute etwas vorschlagen wie
var self = this
weil es schnell und einfach ist.Aber
var self = this
nicht trennen view-Objekt ganz aus der view-Logik, die aus einem mehr formalen C# - hintergrund und schauen auf Ihren code, klingt wie etwas, was Sie wollen.Haben, um die callback nur ausgeführt, wenn das Ereignis ausgelöst wird, wickeln Sie die Prozedur in eine Funktion, so dass es ausgewertet, aber nur dann ausgeführt, wenn und wenn eine
keydown
Ereignis feuert (siehe code unten).Verständnis Bereich in der JS: Was auch immer der Kontext für die Ausführung ist, ist auch der aktuelle Bereich. Der listener Hinzugefügt wurde, in eine Methode (namens
listen
) aufKeyboard.prototype
, aber diekeydown
Ereignis tatsächlich ausgelöst aufwindow
-- der handler die Ausführung in einem anderen Kontext, als dort wo es definiert wurde; es ist die Ausführung im Kontext von was ist die Berufung auf Sie, in diesem Fallwindow
, so dass es bezieht sich aufwindow
es sei denn, Sie binden Sie es an einem anderen Objekt überbind
oderapply
wenn er definiert wird.In Ihrem code
window
ist die Ansicht eines Benutzers interagieren undKeyboard
ist, dass die view den controller. Im MVC-Muster, wie das, was Sie wahrscheinlich gewöhnt sind, in C#/.NET, Ansichten nicht sagen, selber was zu tun ist, wenn Dinge passieren, die Controller sagen, das zeigt, was zu tun ist. Also, wenn Sie wurden um eine Referenz zuweisen der controller durch den Einsatzvar self = this
wie so viele tun, die Sicht wäre die Verwaltung selbst, sondern nur für diesen spezifischen handler fürkeydown
Veranstaltungen. Dies ist inkonsistent und würde Sie zu schwer zu verwalten in einem großen Projekt.Eine Lösung:
Eine bessere Lösung:
Die beste Lösung (bis ES6
class
bereit ist):.bind()
ist kompatibel mit ECMAScript 5+; wenn Sie brauchen eine Lösung für ältere Browser, Mozilla geschrieben hat, eine tolle alternative zu.bind()
mitfunctions
und.call()
:https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind
Edit: Hier ist, was Ihre instanziiert
keyboard
Objekt Aussehen wird, mit diesem neuen, modularen Lösung:removeEventListener
? Ich brauche eine benannte Funktion.. ho zu verwenden, diebind
Sache?Dann geben Sie einfach den Namen, die Funktion und verwenden Sie es als argument statt der anonym-Funktion oben verwendet. Zum Beispiel
addEventListener('keydown', handler)
stattaddEventListener('keydown', function () {})
. Auf diese Weise können Sie später entfernen Sie es, indem Referenz.Aber indem wir dies tun, verlieren Sie "dieses", weil der Rahmen (dieser) wird geändert element, genannt Ereignis.
addEventListener("click".onclick.bind(this), false)
InformationsquelleAutor Benny
, Wie dieser code funktioniert:
this
variable.this
Punkte, um das dom-Objekt, währendself
Punkte aus dem keyboard-Objekt.event
als parameter geben wir an die member-Funktion der Tastatur-Objekt.Sorry, in der Tat ich war.
funktioniert es?
Nein, ich glaube nicht, dass dem so ist, könnten Sie mir zeigen, der komplette code vielleicht?
Dies ist der komplette code. Ich rufe Ihr Objekt mit den richtigen Griff. Der event-handler, die Teil des Objekts abgerufen. Wo ist das Problem? Wir brauchen keine andere änderung im code.
InformationsquelleAutor closure
Wie etwa
InformationsquelleAutor Musa