Discussion :

[Gregco]

Bonjour,

Pour la réalisation d'un futur projet, je vais devoir (ré)apprendre à coder en javascript. Les "best-practices" et le langage ayant évolués avec les années, je dois me (re)mettre à niveau.

Le web ne manque pas d'informations valables, mais... il est facile de tomber également sur des informations erronées/désuètes/ou tout simplement fausses. Ci-dessous quelques classes que j'ai écrite pour me faire un petit exercice. Je sollicite donc l'avis des plus expérimentés qui découvriront au fil des commentaires de mon code les questions que je me pose.

Mes 2 principaux objectifs sont les suivants :

• La sécurité
• L'optimisation (par exemple : éviter les objets "closures")

Voici mes classes :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
/* CLASS caracteristiques
 * Comportes des variables et méthodes utiles à d'autres CLASS
 * (cf. CLASS humain et CLASS animal
 */
var caracteristiques = function() {
	this.attaque = 0;
	this.defense = 0;
};
caracteristiques.prototype.setAttaque = function(attaque) {
	this.attaque = attaque;
};
caracteristiques.prototype.setDefense = function(defense) {
	this.defense = defense;
};

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 
/* CLASS animal
 * C'est une CLASS parente
 * (cf. CLASS animalOurs ou animalLoup)
 */
var animal = function(nom) {
	this.nom = nom;
	this.niveau = 1;
	this.caracteristiques = new caracteristiques();
	/*QUESTION : a chaque nouvel objet enfant hérité de la CLASS "animal", comment se comporte la variable "this.caracteristiques"? contiendra-t-elle un objet "closure" ? Y a-t-il une meilleure manière de faire en terme de mémoire ? */
};
animal.prototype.toString = function() {
	return(this.nom);
};
 
/* CLASS animalOurs
 *
 */
var animalOurs = function(nom) {
	animal.call(this, nom?nom:"Ours");
	this.caracteristiques.setDefense(3);
};
animalOurs.prototype = new animal();
animalOurs.prototype.constructor = animalOurs;
 
/* CLASS animalOurs
 *
 */
var animalLoup = function(nom) {
	animal.call(this, nom?nom:"Loup");
	this.caracteristiques.setDefense(1);
};
animalLoup.prototype = new animal();
animalLoup.prototype.constructor = animalLoup;

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
/* CLASS humain
 * 
 */
var humain = function(nom, prenom) {
	this.nom = nom;
	this.prenom = prenom;
	this.caracteristiques = new caracteristiques();
	this.animauxInvoques=[]; 
	/*QUESTION : "this.animauxInvoques" est un tableau d'objet. Comment javascript s'en sort-il ? Stock-t-il juste un pointer vers les objets ou copie-t-il l'objet au total ? Y a-t-il une meilleure manière de faire en terme de mémoire/performance ? */
};
/* cette méthode permet d'ajouter un animal à un humain */
humain.prototype.invoqueAnimal = function(animalClassName) {
	var newAnimal = new window[animalClassName]();
	this.animauxInvoques.push(newAnimal);
	return newAnimal;
};

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
/* programme principal */
var game = function()
{
	var gameName = "Game name";
	var humain1 = new humain("Smith", "John");
	var humain2 = new humain("Hollande", "Angella");
 
	humain1.caracteristiques.setAttaque(2);
 
	var newAnimal = humain2.invoqueAnimal("animalOurs");
	newAnimal.caracteristiques.setAttaque(5);
 
	var newAnimal = humain2.invoqueAnimal("animalLoup");
	newAnimal.caracteristiques.setAttaque(1);
};
(function() {
	var g = new game();
	/* QUESTION : En procédant de cette manière, est-ce que j'empêche l'appel et l’exécution de mes objets depuis un script externe ?*/
})();

Je remercie d'avance ceux qui auront eu la gentillesse de lire mon poste.
Cordialement,
Greg

[SpaceFrog]

optimisation ... je veux bien .

par contre a quel niveau intervient ton besoin de sécurité ?

[SylvainPV]

C'est quoi ça un objet closure ?
Une closure est une fonction utilisée pour isoler le scope de variables, pour les rendre "privées" en somme. C'est ce que tu fais avec ta variable g dans ton dernier code. Ce n'est pas quelque-chose à éviter, si on les utilise c'est qu'il y a de bonnes raisons !

[Gregco]

Merci à vous 2 pour vos réponses.

Pour répondre à Sylvain au sujet de "closure":

Pourquoi est-il conseillé d'utiliser la méthode "prototype" plutôt que la méthode "closure" ?

C'est principalement une question de performances. Lors de la création d'un objet "closure", le constructeur est parsé/executé, il y a donc création des différentes méthodes qui appartiennent alors à l'instance de l'objet. Avec une classe "prototype" les méthodes sont déjà instanciées lors de la création du type et appartiennent à l'instance du prototype de l'objet, deux instances d'une même classe partagent le même prototype. Cela a deux incidences :

• La création de l'objet sera plus longue à cause de la création des méthodes membres.
• L'instance de l'objet prendra plus de mémoire car les méthodes membres ne sont pas partagées entre les objets.

Je dois être attentif aux performances de l'application. Pour en revenir à mes besoins et garder les quelques lignes de codes que j'ai indiquées plus haut, ce n'est pas 2 objets de ma CLASS "humain" avec 2 objets animaux (animalOurs et animalLoup) qui vont être lourd à charger. A terme, l'interface doit pouvoir charger en une seule fois une bonne dizaine de millier d'objets "humain" avec pour chacun une 100ène d'animaux (10'000 * ~100 => 1 millions d'objets avec chacun des caractéristiques différentes). D'où l'importance de savoir comment Javascript gère mes variables et mes objets.

Pour répondre à SpaceFrog :
Je ne sais pas encore trop de quoi me méfier au niveau sécurité avec Javascript.

J'effectuerais des requêtes AJAX qui modifieront des informations dans la base de donnée. Je pense donc à des risques de XSS et par extension à des CSRF. Évidement, je serais vigilant sur la partie serveur, mais je préfaire multiplier les gardes-fous à tout les niveaux (JS compris).

Par rapport aux quelques lignes que j'ai présenté plus haut, j'aimerais déjà pouvoir "encapsuler" de manière sécurisée mes objets et mes méthodes, quelles ne soient pas accessibles depuis un script externe. Je sais déjà que ce n'est pas bon, puisque j'ai trouvé un moyen de contourné le code que j'ai écrit. Voilà donc le genre de conseils que je cherche.

Cordialement,
Greg

EDIT : ma répondre c'est croisée avec celle de Kaamo... je vais lire ton poste dans la minute

[SpaceFrog]

Pour répondre à SpaceFrog :
Je ne sais pas encore trop de quoi me méfier au niveau sécurité avec Javascript.

De tout ...
la sécurité n'existe pas avec javascript

[fredoche]

De ce que j'apprends sur le sujet, en principe le strict respect des principes de base de la programmation POO permet de construire des applis sures ou sécuritaires.

Je n'ai pas hélas à ce stade le recul suffisant ni les compétences pour défendre ces concepts.

Cette dernière phrase est plutôt troublante SpaceFrog, et doit certainement s'appliquer de la même façon à tous les langages.

Gregco, puisque tu parles de script externe, tu peux regarder du coté de Google Caja :
https://developers.google.com/caja/docs/about/

et du coté de adsafe :
http://www.adsafe.org/

[SpaceFrog]

Javascript est un langage client totalement ouvert et accessible par le client.
il est visible en clair dans les consoles, dans lesquelles on peut directement injecter du javascript. L'obfuscation du code ne représente pas une barrière énorme, juste une étape supplémentaire et un peu plus de temps de compréhension du code.

Ce qui m'amène à dire que "POO" ou pas la sécurité n'est pas de mise avec javascript.

[Kaamo]

Qu'entends tu par objets "closures" ? Et pourquoi veux-tu les éviter ?

- Par convention, les fonctions faisant office de "constructeurs d'instance" commencent par une majuscule. (par exemple caracteristiques)
- Question 1 : à chaque nouvel animal, tu vas créer un nouvel objet construit à partir de caractéristique. Donc, chaque instance d'animal aura son propre objet caractéristique. Ils ne se partageront pas un objet commun. Au contraire, setAttaque étant de la propriété "prototype", elle sera commune à chaque instance d'Animal.
- Question 2 : pour tout ce qui n'est pas "primitif", JavaScript stocke une référence. Donc :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
var monObj1 = [];
var monObj2 = monObj1;
monObj2.push('coucou');
console.log(monObj1); // affiche 'coucou' car monObj1 et monObj2 pointent à la même adresse

Au contraire :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
var monPrimitif1 = 5;
var monPrimitif2 = monPrimitif1;
monPrimitif2 = 'coucou';
console.log(monPrimitif1); // affiche 5

- Question 3 : Oui et non. Ce que tu utilises est le pattern module. En gros, tout ce qui sera défini à l'intérieur de cette fonction immédiatement invoquée (IIFE en anglais) ne sera pas visible par les scripts externes. Donc, il faut que tu encapsules aussi toutes tes "pseudo classes". Si tu veux néanmoins rendre disponibles des fonctions, il faut attacher l'instance de game à l'objet global (window dans les navigateurs) :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
(function(){
 
var maVarPrivee = 1337;
 
var maFonctionPrivee = function maFonctionPrivee() {
  console.log("On ne peut pas m'appeler via l'objet global window (à l'extérieur du module)");
}
 
app.maFonctionPublique = function maFonctionPublique() {
  maFonctionPrivee();
  return maVarPrivee;
};
 
}(window.app = window.app || {})); // app sera la seule variable accessible dans l'objet global window
 
// On peut appeler la fonction publique
app.maFonctionPublique(); // retourne 1337 et log "On ne peut pas m'appeler via l'objet global window (à l'extérieur du module)"

Enfin, tu utilises l'héritage "pseudo classique" pour créer tes objets. J'opterais plutôt pour l'héritage orienté prototype. J'en parle ici.