Comment écrire de la JS OOP et utiliser jQuery en même temps ?

Question

Habituellement (si ce n'est toujours), lorsque jQuery vous permet d'ajouter un callback à un événement JS comme un clic, dans la fonction de callback ils changent la "signification" de this dans l'élément DOM qui a déclenché l'événement.

Cela peut être très utile, mais cela vous gênera lorsque vous écrirez du code OOP en js, comme dans cet exemple :

function MyClass() {}

MyClass.prototype = {

    init: function() {
        $("#someSpan").click(this.doSomething);
    },

    doSomething: function() {
        alert("Here 1");
        this.test();
        return false;
    },

    test: function() {
        alert("Here 2");
    }
}

Dans cet exemple, this.test() ne fonctionnera pas, car this n'est plus une instance sur MyClass mais plutôt un élément DOM jQuery (le span).

Mes questions sont les suivantes : existe-t-il un moyen de continuer à écrire du code OOP en JS en utilisant ce modèle et d'utiliser également jQuery ? Et : pourquoi jQuery change-t-il this dans la fonction de rappel alors qu'il pourrait tout aussi bien envoyer l'élément DOM de jQuery comme premier argument ?

Answer 1

JQuery a $.proxy qui peut être utilisé comme suit :

function MyClass() {
    this.clicked = $.proxy(this.clicked, this);
}

MyClass.prototype = {

    clicked: function(e) {
        alert("Here 1");
        this.test();
        e.currentTarget; //this replaces "this"-the keyword used in "non OOP" contexts
//see http://api.jquery.com/event.currentTarget/
    },

    init: function() {
        $("#someSpan").click(this.clicked);
    },

    test: function() {
        alert("Here 2");
    }
}

Lorsque vous créez une instance, celle-ci reçoit sa propre .clicked qui fait de l'ombre à la fonction générique dans le prototype. Elle aura toujours la même this contraignant, quel que soit le nom qu'on lui donne. Vous pouvez donc passer this.clicked et que cela fonctionne.