Javascript portée addEventListener et ce

Que peu de choses:

• La plupart des gens suggèrent quelque chose comme var self = this parce qu'il est rapide et facile.

• Mais var self = this ne pas séparer les objet de vue entièrement à partir de la vue logique, qui, à partir d'un cadre plus formel de C# arrière-plan et en regardant ton code, ça sonne comme quelque chose que vous voulez faire.

• Afin d'avoir le rappel s'exécute que lorsque l'événement est déclenché, envelopper le gestionnaire dans une fonction, de sorte qu'il est évalué tout de suite, mais n'est exécutée que si un keydown événement se déclenche (voir le code ci-dessous).

• Compréhension de la portée en JS: Quel que soit le contexte d'exécution est, est également le champ d'application actuel. Votre auditeur a été ajouté dans une méthode (appelée listen) sur Keyboard.prototype, mais le keydown événement est en fait tiré sur window -- le gestionnaire est en cours d'exécution dans un contexte différent de celui où il a été défini; il est en cours d'exécution dans le contexte de ce qui est en l'invoquant, dans ce cas, window, il est donc portée à window à moins que vous lier à un autre objet, par bind ou apply lorsqu'il est défini.

Dans votre code, window est le point de vue d'un utilisateur d'interagir avec, et Keyboard est que de la vue du contrôleur. Dans les motifs MVC comme ce que vous êtes probablement habitué à en C#/.NET, points de vue ne pas dire à eux-mêmes quoi faire quand les choses se passent, les contrôleurs de vues dire quoi faire. Donc, si vous assignez une référence au contrôleur en utilisant var self = this comme beaucoup, le point de vue de la gestion elle-même, mais uniquement ce que le gestionnaire pour keydown événements. C'est incohérent, et il est devenu difficile à gérer dans un projet de grande envergure.

Une solution:

Keyboard.prototype.listen = function() {
    window.addEventListener('keydown', function(e) {
        this.handle_keydown(e);
    }.bind(this), false);
}

Une meilleure solution:

Keyboard.prototype.view = window;

Keyboard.prototype.listen = function() {
    this.view.addEventListener('keydown', function(e) {
        this.handle_keydown(e);
    }.bind(this), false);
}

La meilleure solution (jusqu'à ES6 class est prêt):

//define
function addViewController(view) {

    function ViewController() {

        this.handle_keydown = function(args) {
            //handle keydown events
        };

        this.listen = function() {
            this.view.addEventListener('keydown', function(e) {
                this.handle_keydown(e);
            }.bind(this), false);
        };

        this.view = view;
        return this;

    }

    return new ViewController(view);

}

//implement
var keyboard = addViewController(window);
keyboard.listen();

• Remarque: .bind() est compatible avec ECMAScript 5+; si vous avez besoin d'une solution pour les anciens navigateurs, Mozilla a publié une excellente alternative à .bind() à l'aide de functions et .call():

https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind

Edit: Voici ce que votre instancié keyboard objet à l'aide de cette nouvelle solution modulaire:

Comment sur

function Keyboard() {
    this.keys = {};
    var self = this;
    this.handle_keydown = function(args) {
        self.keys[args.keyCode] = true;
    }
    this.listen = function() {
        window.addEventListener('keydown', this.handle_keydown);
    }
}
app.util.keyboard = new Keyboard();