Discussion :

[Lorenzo77]

bonjour,

j'ai plusieurs classes AS3 remplis de fonction statique que j'aimerais convertir en JS afin de manipuler plus facilement les tableaux, objets, chaines, ....

hors j'ai plusieurs facon de faire en JS, exemple 1 :

Code :

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

1
2
3
4
5
6
7
8
9
function tableau() {
    this.creationPoids = function (valeurs, poids) {
        console.log('creationPoids:function', valeurs, poids);
    }
    this.valeurAleatoire = function (tableau) {
        console.log('valeurAleatoire:function', tableau);
    }
}
tableau.creationPoids([1, 2, 3], [1, 2, 1]);

c'est la facon la plus simple il me semble, elle est dans tous les bouquins.


mais cette méthode fonctionne aussi, exemple 2 :

Code :

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

1
2
3
4
5
6
7
8
9
tableau = {
    creationPoids: function (valeurs, poids) {
        console.log('creationPoids:function', valeurs, poids);
    },
    valeurAleatoire: function (tableau) {
        console.log('valeurAleatoire:function', tableau);
    }
};
tableau.creationPoids([1, 2, 3], [1, 2, 1]);

mes tests de performances n'ont pas montrés de différence entre les 2 facon.
même chose pour l'auto-completion et autres fonctionnalités des IDE (netbean).

est ce quelqu'un connait les avantages a utiliser l'une ou l'autre ?
le seul gros avantage que je vois pour l'instant a utiliser un objet c'est de pouvoir cacher certaines méthodes ...

merci

[Kaamo]

le seul gros avantage que je vois pour l'instant a utiliser un objet c'est de pouvoir cacher certaines méthodes ...

Qu'est-ce que tu entends par là ?? Encapsulation ? Si tel est le cas, ce n'est pas possible en javascript, même si on peut vaguement le simuler.

L'exemple 1, tel que tu le présentes, ne fonctionne pas. Il faut :
- soit exécuter la fonction tableau() ce qui aura pour conséquence d'attacher deux fonctions à l'objet global window.
- soit créer une instance de l'objet à l'aide du mot clef new => var tab = new tableau(); qui aura pour conséquence d'attacher un objet tab (contenant les deux fonctions) à l'objet global window

Au final,
avec la première méthode, tu appelleras ainsi les fonctions : creationPoids([1, 2, 3], [1, 2, 1])
avec la deuxième méthode : tab.creationPoids([1, 2, 3], [1, 2, 1])

Et si tu utilises ton exemple 2) : tableau.creationPoids([1, 2, 3], [1, 2, 1])
Donc, dans tous les cas, tu ne fais que créer des fonctions en les attachants à différents niveaux dans l'objet global window.

La meilleure façon de faire est l'exemple 2 qui ne crée qu'une seule propriété dans l'objet global et qui liste toutes les fonctions prêtes à l'emploi :

Code javascript :

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

1
2
3
4
5
6
7
8
9
var utilitaire = {
    creationPoids: function (valeurs, poids) {
        console.log('creationPoids:function', valeurs, poids);
    },
    valeurAleatoire: function (tableau) {
        console.log('valeurAleatoire:function', tableau);
    }
};
utilitaire.creationPoids([1, 2, 3], [1, 2, 1]);

[Lorenzo77]

merci

je pensais a la méthode defineProperty() ou defineProperties() pour cacher ce qui doit l'être de l'exterieur et pour définir des constantes .. mais évidemment ca ne marche pas avec IE

je suis parti sur la 2eme méthode mais j'ai du rajouter un espèce de namespace (un bête : mon_namespace = {}) pour éviter les conflits.

[Kaamo]

En effet, defineProperty n'est compatible que IE >=9 mais aussi IE 8 si c'est un DOM object...

Exemple :

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
var obj = {};
//var obj = document.createElement(); // IE 8
 
Object.defineProperty(obj, "func1", {
  value: function() {
    console.log('Hello DVP !');
  },
  writable: false, // pas sûr que ça fonctionne sur IE 8
  enumerable: false,
  configurable: true
});
 
obj.func1 = 0; // ne fait rien
console.log(obj); // affiche un objet vide {}
obj.func1(); // Hello DVP !

[dragonno]

Pour la première façon, ça s'écrit pas plutôt comme ça ?

Code :

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

1
2
3
var tableau=fonction(){...
....
}

PS: Super, ton site Lorenzo (m'interesse aux jeux)

[Kaamo]

@dragonno : Les deux sont bonnes. Pour expliquer sans rentrer dans les détails : Celle de Lorenzo (function declaration) sera chargée avant que le moindre code soit exécuté tandis que la tienne (function expression) sera chargée quand l'interpréteur javascript arrivera à la ligne de code où tu la définis.

Exemple simple pour comprendre :

Code javascript :

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

1
2
3
// Premier exemple
alert(coucou()); // erreur, coucou() est encore inconnu
var coucou = function() { return 'coucou'; }

Code javascript :

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

1
2
3
// Deuxième exemple
alert(coucou()); // pas d'erreur, alerte bien "coucou" car l'interpréteur a chargé la fonction
function coucou() { return 'coucou'; }

Tout simplement car les fonctions déclarées (ou "function declaration", deuxième exemple) sont "hissées" (le "hoisting" en anglais, je t'invite à lire des sujets la dessus) en "haut du code" tandis que les fonctions "exprimées" (ou "function expression", premier exemple) ont un comportement similaire aux autres variables, seul leur nom est "hissé", pas leur valeur.

[dragonno]

Merci Kaamo
Oui en effet, c'est ce que j'ai vu en lisant des trucs sur le hosting avant-hier

Sinon pour la première façon il paraît qu'elle est pas trop conseillée juste pour bien faire la différence avec une fonction classique, d’après ce que j'ai lu
Mais bon je veux pas non plus etre trop hors sujet^^

[Bovino]

Par convention, on note surtout les constructeurs avec une majuscule initiale.

Code :

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

1
2
function fonctionNormale(){...}
var FonctionConstructeur = function(){...};

Ensuite, pour le reste (notamment fonction constructeur ou objet littéral), c'est un peu selon le développeur, pour ma part, je préfère effectivement une fonction qu'un objet et effectivement, j'ai l'habitude de le déclarer en tant que variable, mais ces choix restent subjectifs.