La création d'une simple classe de JavaScript avec jQuery

J'essaie de comprendre jQuery classes, mais il ne va pas très bien.

Mon but est d'utiliser une classe de cette façon (ou à apprendre une meilleure façon de le faire):

var player = new Player($("playerElement"));
player.InitEvents();

L'aide d'autres exemples, c'est ce que j'ai essayé:

$.Player = function ($) {

};

$.Player.prototype.InitEvents = function () {

    $(this).keypress(function (e) {
        var key = e.which;
        if (key == 100) {
            MoveRight();
        }
        if (key == 97) {
            MoveLeft();
        }
    });
};

$.Player.prototype.MoveRight = function () {
    $(this).css("right", this.playerX += 10);
}

$.Player.prototype.MoveLeft = function () {
    $(this).css("right", this.playerX -= 10);
}

$.Player.defaultOptions = {
    playerX: 0,
    playerY: 0
};

L'objectif final est d'avoir un personnage se déplaçant sur l'écran à gauche et à droite à l'aide du clavier de lettres A et D.

J'ai le sentiment que je suis en train de faire quelque chose de très mal avec cette "classe"
mais je ne suis pas sûr pourquoi.

(désolé pour mon anglais)

this l'intérieur de l'instance méthodes de références de l'instance de l'objet lui-même de sorte que vous ne pouvez pas utiliser $(this).keypress, $(this).css etc comme this ne faisant pas référence à un élément du DOM, ni de chaîne de requête. Vos appels de fonction sont trop mal, il faut lire this.MoveRight() mais comme vous êtes à l'intérieur d'un jQuery gestionnaire qui définit la this contexte de l'élément DOM lui-même, vous devez l'affecter l'instance this à une variable d'un niveau dans le champ d'application de la chaîne de sorte que vous pouvez accéder à l'intérieur du gestionnaire d'appeler son MoveRight/MoveLeft méthodes.
pouvez-vous me montrer comment vous allez modifier mon code pour résoudre le problème j'ai fait? il sera beaucoup plus facile pour moi de voir ce que j'ai fait worng si je pouvais une un bon code vs la mienne. (si ce n'est pas trop dur)
Je peux essayer de l'homme, mais il est plus proche d'une réécriture complète que celle d'un "fix". :P Je vais voir si je peux prendre un exemple simple.
Voici la version commentée jsfiddle.net/gVhj8

OriginalL'auteur samy | 2013-01-19

Est une question importante que vous devez assigner le passé l'objet jQuery/élément à un this.element - ou un autre this.propertyName - de sorte que vous pouvez accéder par la suite à l'intérieur de l'instance méthodes.

Vous aussi ne peut pas appeler MoveRight()/MoveLeft() directement comme ça, parce que ces fonctions ne sont pas définies dans le cadre de la chaîne, mais plutôt dans le prototype de votre Constructeur de l'instance, par conséquent, vous avez besoin d'une référence à l'instance elle-même à les appeler.

Mis à jour et code commenté ci-dessous:

(function ($) { //an IIFE so safely alias jQuery to $
$.Player = function (element) { //renamed arg for readability
//stores the passed element as a property of the created instance.
//This way we can access it later
this.element = (element instanceof $) ? element : $(element);
//instanceof is an extremely simple method to handle passed jQuery objects,
//DOM elements and selector strings.
//This one doesn't check if the passed element is valid
//nor if a passed selector string matches any elements.
};
//assigning an object literal to the prototype is a shorter syntax
//than assigning one property at a time
$.Player.prototype = {
InitEvents: function () {
//`this` references the instance object inside of an instace's method,
//however `this` is set to reference a DOM element inside jQuery event
//handler functions' scope. So we take advantage of JS's lexical scope
//and assign the `this` reference to another variable that we can access
//inside the jQuery handlers
var that = this;
//I'm using `document` instead of `this` so it will catch arrow keys
//on the whole document and not just when the element is focused.
//Also, Firefox doesn't fire the keypress event for non-printable
//characters so we use a keydown handler
$(document).keydown(function (e) {
var key = e.which;
if (key == 39) {
that.moveRight();
} else if (key == 37) {
that.moveLeft();
}
});
this.element.css({
//either absolute or relative position is necessary 
//for the `left` property to have effect
position: 'absolute',
left: $.Player.defaultOptions.playerX
});
},
//renamed your method to start with lowercase, convention is to use
//Capitalized names for instanceables only
moveRight: function () {
this.element.css("left", '+=' + 10);
},
moveLeft: function () {
this.element.css("left", '-=' + 10);
}
};
$.Player.defaultOptions = {
playerX: 0,
playerY: 0
};
}(jQuery));
//so you can use it as:
var player = new $.Player($("#playerElement"));
player.InitEvents();

Violon

Également noter que le JavaScript n'a pas de "classes" (au moins pas jusqu'à ce que ES6 mise en œuvre), ni les Méthodes (qui, par définition, sont associés exclusivement à des Classes), mais plutôt les Constructeurs qui fournissent une douce syntaxe qui ressemble à des classes. Voici un très bon article écrit par TJ Crowder concernant JS "faux" méthodes, il est un peu avancé, mais tout le monde devrait être en mesure d'apprendre quelque chose de nouveau à partir de la lecture:

http://blog.niftysnippets.org/2008/03/mythical-methods.html

OriginalL'auteur Fabrício Matté

5

Lorsque vous utilisez this à l'intérieur de votre Player prototype des fonctions, this points pour le Joueur actuel de l'objet.

Mais lorsque vous utilisez $(this).keypress il exige que this points à un élément HTML.

Les deux sont tout simplement incompatibles. Il y a un seul this et il points de l'actuel Joueur de l'objet, et non pas à un élément HTML.

Pour résoudre votre problème, vous aurez besoin de passer à l'élément HTML dans le Lecteur de l'objet lors de sa création ou dans les appels de fonction.

Vous pouvez passer l'élément dans le Lecteur de l'objet lors de la construction comme ceci:
```
$.Player = function ($, element) {
this.element = element;
};
$.Player.prototype.InitEvents = function () {
$(this.element).keypress(function (e) {
var key = e.which;
if (key == 100) {
MoveRight();
}
if (key == 97) {
MoveLeft();
}
});
};
$.Player.prototype.MoveRight = function () {
$(this.element).css("right", this.playerX += 10);
}
$.Player.prototype.MoveLeft = function () {
$(this.element).css("right", this.playerX -= 10);
}
$.Player.defaultOptions = {
playerX: 0,
playerY: 0
};
```
désolé pour mon ignorance, mais comment puis-je utiliser cette classe? je veux dire, si je l'utilise le pourquoi je montre dans ma qustion il travail dosnt. (si ce n'est pas si dur), vous pouvez ajouter un exemple? (merci d'avoir pris le temps de répondre à ma question)

OriginalL'auteur Frank van Puffelen

Vous devez vous connecter pour publier un commentaire.