Discussion :

[Sharcoux]

Bonjour,

J'ai un problème pour charger un objet en javascript. Ma démarche n'est probablement pas du tout la bonne à cause de mes réflexes de langages de classes.

J'ai une "classe" Document :

Code :

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

1
2
Document = function() {... attributs ...}
Document.prototype = {... methodes ...}

voici les méthodes que j'utilise pour les sauvegarde/chargement :

Code :

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

1
2
setCurrentDocument = function(document) {localStorage.setItem("currentDocument",JSON.stringify(document));}
getCurrentDocument = function() {return JSON.parse(localStorage.getItem("currentDocument")));}

mais l'objet ainsi sauvegardé/chargé perd les méthodes propres à sa "classe" Document (celles déclarées dans Document.prototype).
Du coup, est-ce qu'il faut déclarer les méthodes autrement, de façon à ce qu'il les conserve? Ou bien est-ce que je dois écrire

Code :

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

getCurrentDocument = function() {return new Document(JSON.parse(...));}

Dans ce cas, j'en viens à une deuxième question qui va vous paraitre stupide :
j'ai besoin de déclarer deux constructeurs :
Document = function() {...},
et aussi Document = function(doc) {...} afin de charger mon document comme décrit précédemment.
Mon problème, c'est comment faire ça en javscript ?

Encore une fois, je suis conscient que ma logique n'est pas la bonne. N'hésitez pas à m'ouvrir l'esprit

[sylvain230]

Bonjour,

Pourquoi n'essaies tu pas de charger tes objets avec jQuery ?
C'est plus simple il me semble.

Exemple d'un code à moi :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
WebGLBuffer.prototype.bufferTeapot = function() {
 
 
$.getJSON("Objets/Teapot.json",function(teapotData)
    {
...
     });
 
}

Voila

[Sharcoux]

Merci, mais $.getJSON demande une url sauf erreur. Alors pour accéder au localStorage du navigateur, je sais pas trop quoi mettre...

Mais peut-être que JQuery peut effectivement apporter une réponse plus simple à ma question.

[sylvain230]

Sinon tu peux toujours créer un serveur en local et cela marchera normalement.

[Sharcoux]

oO ?!
Tu veux que je crée un server local côté client en javascript juste pour pouvoir utiliser .$getJSON au lieu de JSON.parse(localStorage.getItem(...)) ?
C'est pas un peu tordu comme solution ?

Ou alors j'ai pas du tout compris ce que tu voulais dire par "créer un serveur en local"

[Bovino]

Pourquoi n'essaies tu pas de charger tes objets avec jQuery ?

Parce que jQuery n'est pas du tout adapté à cette situation
Et utiliser jQuery (ou tout autre framework) comme rustine aux lacunes que l'on a en JavaScript est rarement la bonne utilisation

@Sharcoux : il faudrait que tu nous montres plus de code : comment sont créées tes méthodes et tes propriétés et comment tu les appelles. Ceci dit, appeler un paramètre document est suicidaire, comment veux-tu que JavaScript distingue ton paramètre de l'objet window.document (puisque window est implicite) ?

[sylvain230]

Ben oui c'est un peu tordu comme solution j'avoue lol mais cela fonctionne normalement.
Avec FF sur mais avec Chrome je sais plus :s

[sylvain230]

Et utiliser jQuery (ou tout autre framework) comme rustine aux lacunes que l'on a en JavaScript est rarement la bonne utilisation

Oui peut être mais dans certains cas, c'est mieux que de réinventer la roue non ?

[Sharcoux]

appeler un paramètre document est suicidaire, comment veux-tu que JavaScript distingue ton paramètre de l'objet window.document (puisque window est implicite) ?

euh... chépa ^^ En tout cas pour le moment il y arrive
Bon d'accord, en fait il s'appelait doc, et j'ai dû le renommer à cause de conventions de nommage. Mais maintenant que tu le dis, document était peut-être pas l'idée la plus géniale que je puisse trouver pour le nouveau nom

Bon, par contre, pour mon problème, voilà la classe document :

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
35
36
/* JSON document */
var JSONDocument = function() {
    this.type = "text";
    this.author=getCurrentUser().getName();
    this.title="Untitled";
    this.content="";
    this.creation=currentTime();
    this.lastModification=currentTime();
    this.state=Document.states.draft;
 
    this.setAsCurrentDocument();//temp
}
JSONDocument.prototype = {
    //type
    getType: function() {return this.type;},
 
    //content
    getContent:function() {return this.content;},
    setContent:function(content) {this.content=content;},
 
    //title
    getTitle:function() {return this.title;},
    setTitle:function(title) {this.title=title;},
 
    //author
    getAuthor:function() {return this.author;},
    setAuthor:function(userName) {this.author=userName;},
 
    //dates
    getCreation:function() {return this.creation;},
    getLastModification:function() {return this.lastModification;},
    setLastModification:function(date) {this.lastModification=date;},
 
    //state
    getState:function() {return this.state;},
    setState:function(state) {this.state=state;},

Je suis sûr qu'il y a un moyen pour "raccrocher" le prototype de JSONDocument à l'objet que je charge depuis le storage, mais je sais pas comment faire

[p3ga5e]

Attention a la manière dont tu prototype tes objets. Normalement la propriété prototype permet d’ajouter des méthodes ou attributs aux instances déjà créer de l’objet.

par exemple :

Code :

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

1
2
3
4
5
6
7
var JSONDocument = function() { this.title = "Document A" }
 
var doc = new JSONDocument(); 
 
JSONDocument.prototype.DisplayTitle = function() { alert(this.title); };
 
doc.DisplayTitle();

or ceci, chez moi sous Firefox, ne marche pas :

Code :

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

1
2
3
4
5
6
7
8
9
10
var JSONDocument = function() { this.title = "Document A" }
 
var doc = new JSONDocument(); 
 
JSONDocument.prototype = 
{
	DisplayTitle : function() { alert(this.title); }
}
 
doc.DisplayTitle(); // erreur DisplayTitle == undefined

Pour tes problèmes initiaux je te répondrais plus tard la c’est la pause dej !

[Sharcoux]

Hum... Je suis pas convaincu :

Code :

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

1
2
3
4
5
6
7
8
var Document = function() { this.title = "Document A";}
Document.prototype =
{
	DisplayTitle : function() { alert(this.title); }
}
 
var doc = new Document();
doc.DisplayTitle();

marche très bien chez moi.

[Bovino]

Attention a la manière dont tu prototype tes objets. Normalement la propriété prototype permet d’ajouter des méthodes ou attributs aux instances déjà créer de l’objet.

Heu... non pas vraiment. J'aurais même tendance à dire au contraire, il est préférable de déclarer complètement l'objet (donc en incluant les ajouts au prototype) avant d'instancier un objet, même de toute façon, l'ajout au prototype impacte toutes les instances, qu'elles existent déjà ou non.

[Sharcoux]

.. et pour ma question initiale ?

[Bovino]

La seule chose que je vois, c'est dans le constructeur, si par exemple dans

Code :

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

this.lastModification=currentTime();

currentTime() est dans le prototype, alors il faut appeler

Code :

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

this.lastModification=this.currentTime();

[Sharcoux]

currentTime est une fonction globale. Elle n'est pas dans prototype.
Bon, je récapitule les pistes que j'ai proposé :

- ajouter à Document un deuxième constructeur. On aurait :
Document = function() {..}
et Document = function(objet_JSON) {...}
Mais je ne sais pas faire

- ajouter le prototype de Document aux méthodes de mon objet JSON. Un truc du type

Code :

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

1
2
doc = getCurrentDocument() // charge depuis le localStorage
doc.prototype = Document.prototype

ou quelque chose comme ça. (je précise que, tel quel, ça marche pas)

- utiliser autre chose que prototype pour déclarer les méthodes de Document

Si vous voyez un bout de solution pour l'une de ces pistes, votre intervention est la bienvenue.

Merci

[Sharcoux]

Bon, j'ai fini par trouver :

Code :

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

1
2
3
4
5
6
7
8
9
var Document = function() { this.title = "Document A";}
Document.prototype =
{
	DisplayTitle : function() { alert(this.title); }
}
 
var doc = {title: "Document B"};
doc.__proto__ = Document.prototype;
doc.DisplayTitle();

doc représente l'objet tel qu'il a été chargé par la méthode getDocument...().
doc.DisplayTitle() affiche bien "Document B"

[p3ga5e]

Voila comment moi, je procéderais !

Touts d’abord je prototype les objets pour y ajouter une méthode Merge, comme ceci :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
/***
 * Copies all the properties of the obj if they don't already exist or crush it.
 */    
Object.prototype.Merge = function(obj,crush)
{ 
    for(var p in obj)
	{
	    if(crush || this[p]===undefined)
		    this[p] = obj[p];
	}
	return this;
};

Cela me permet d’écrire ce genre de chose :

Code :

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

1
2
3
4
var sum = { A : 3 }.Merge({ A: 5, B : 5 } );
alert(sum.A + sum.B); // == 8
sum = { A : 3 }.Merge( { A: 5, B : 5 }, true );
alert(sum.A + sum.B); // ==  10

Ensuite pour revenir sur l’exemple Document :

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
var Document = function ()
{
    if(arguments.length==0)
    {
        // Default Attributs
        this.Merge({ Title : "New Document" });
    }
    else
        this.Merge(arguments[0])
    //Add Methods
    this.Merge
    ({
        SetTitle : function(title) { this.Title = title; } 
    });
};
// constructeur par default
var doc = new Document();
alert(doc.Title); // "New Document"
doc.SetTitle("Document A");
alert(doc.Title); //"Document A"
 
//constructeur par copie
doc = new Document( { Title : "Document B" });
alert(doc.Title);// "Document B"

Comme tu le voit les fonctions en Javascript n’ont pas de signature, si tu déclare 2 fonctions avec le même nom mais avec un nombre d’arguments différent, la 2eme fonction evalué écrasera la 1ere.

En javascript il n’est pas obligatoire de déclarer les arguments, l’accès aux arguments passé a la fonction est disponible par le tableau arguments …

[p3ga5e]

Heu... non pas vraiment. J'aurais même tendance à dire au contraire, il est préférable de déclarer complètement l'objet (donc en incluant les ajouts au prototype) avant d'instancier un objet, même de toute façon, l'ajout au prototype impacte toutes les instances, qu'elles existent déjà ou non.

Je suis d’accord avec toi, mon exemple été juste pour pointer du doigt l’erreur syntaxique.
Personnellement je me sert du prototypage uniquement sur les objets dont je n’ai pas la possibilité de modifier leur déclarations par example les type de base ( Function, Object, Array) ou un élément du DOM .je m’en passe totalement lors de la déclaration de mes objets.