IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

[DOM] comment améliorer un tableau dynamique ?


Sujet :

JavaScript

  1. #1
    Membre régulier Avatar de tavarlindar
    Profil pro
    Inscrit en
    Janvier 2007
    Messages
    262
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Janvier 2007
    Messages : 262
    Points : 97
    Points
    97
    Par défaut [DOM] comment améliorer un tableau dynamique ?
    Bonjour,

    Voilà, j’ai une petite application qui permet de calculer combien un client devra payer via un tableau qui permet d’ajouter ou supprimer des lignes de prestations .

    j’ai mis en place un code qui fonctionne à priori:

    voir page de test
    (simple voir code source...)


    Ne me dites pas que je programme comme un cochon ou un bourrin , je le sais déjà ! C’est justement l’objet de mon post.

    Avant d’aller plus loin dans le développement de cette appli qui est ici réduite à sa plus simple expression, je souhaite recueillir vos avis.
    Si vous aviez du à mettre en place une telle appli comment auriez-vous fait ?
    Comme simplifier, optimiser le code javascript ?
    Quelle mauvaise stratégie de code ai-je choisie ?

    Ici, je n’ai pas encore implémenté de code de validation des données. Exemple : interdire les valeurs non numérique pour les montants par exemple. Cela fera l’objet d’une prochaine étape.
    Je dois préciser que derrière j’ai un code php et une base mysql. Pour des raisons de choix de traitement, injection, modification, suppression dans la base, je préfère avoir des champs nommés avec des indices plutôt que des arrays.


    Je suis avide de toutes remarques. A votre bon cœur, à votre bon code !

    Par avance merci,

    Je suis sûr qu'après je programmerai différemment ...

  2. #2
    Expert confirmé
    Avatar de le_chomeur
    Profil pro
    Développeur informatique
    Inscrit en
    Février 2006
    Messages
    3 653
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Février 2006
    Messages : 3 653
    Points : 4 835
    Points
    4 835
    Par défaut
    c'est partit mon kiki ^^

    alors après avoir parcourus rapidement ton code , je vois que tu veux t'orienter pur dom la classe hein , mais attention a bien tester sous ie6/7 et FF ( tu couvriras déja plus de 95% des navigateurs si ton code fonctionne sous ces 3 la.

    ensuite coté code pur :
    HO MY GOD , pourquoi es tu si cruel , avec nous autre pelerin hup's je m'égare :

    tu utilises très souvent les mêmes méthoes avec justes quelques paramètre différent exemple :

    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
     
    // Champ Prix de vente au client
    	var newCell3 = row.insertCell(3);
    	var champPrix_vente = document.createElement('input');
    	champPrix_vente.setAttribute('type','text');
    	champPrix_vente.setAttribute('size','10');
    	champPrix_vente.setAttribute('name','prix_vente');
    	champPrix_vente.setAttribute('value','');
    	champPrix_vente.setAttribute('id','');
    	champPrix_vente.onchange = function () {majTotal_Vente()};
    	newCell3.appendChild(champPrix_vente);
     
    	// Champ Devise client
    	var newCell4 = row.insertCell(4);
    	var devise_client_affichage = '£';
    	var textNode4 = document.createTextNode(devise_client_affichage);
    	newCell4.appendChild(textNode4);
     
    	// Colonne vide
    	var newCell5 = row.insertCell(5);
     
    	// Champ Montant achat fournisseur
    	var newCell6 = row.insertCell(6);
    	var champPrix_achat = document.createElement('input');
    	champPrix_achat.setAttribute('type','text');
    	champPrix_achat.setAttribute('size','20');
    	champPrix_achat.setAttribute('name','prix_achat');
    	champPrix_achat.setAttribute('value','');
    	newCell6.appendChild(champPrix_achat);
    pourquoi ne pas créer une méthode du genre creerChamps() avec les paramètre ? tu diviserais le poid de ta page par au moins 3 !
    ce n'est qu'un exemple mais tu pourrais l'appliquer a plusieurs partie de ton code.

    coté ergonomie , j'aurais plutôt vu les bouton add a droite

    voila en gros le conseil principal : créer des sous méthodes

  3. #3
    Membre régulier Avatar de tavarlindar
    Profil pro
    Inscrit en
    Janvier 2007
    Messages
    262
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Janvier 2007
    Messages : 262
    Points : 97
    Points
    97
    Par défaut
    Créer des sous méthodes ?

    Je veux bien mais je ne vois pas trop comment faire ?

  4. #4
    Membre expérimenté Avatar de DoubleU
    Profil pro
    Inscrit en
    Janvier 2006
    Messages
    1 106
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Janvier 2006
    Messages : 1 106
    Points : 1 388
    Points
    1 388
    Par défaut
    Mouais, je suis pas sur que t'y gagnes grand chose, parce que meme si certains blocs se ressemblent, ya toujours une petite différence, genre un attribut en plus ou en moins, un onclick qui traine, etc... ce qui fait que pour avoir une fonction générique qui couvre tout, bah soit le corps de la fonction est très gros, soit c'est l'appel qui va etre gros, donc tu vas pas y gagner grand chose (a la limite un peu en clarté)

    Coté ergonomie, moi je vois pas les boutons a droite ^^, par contre, tu devrais peut etre séparer un peu plus tes "ensembles" (option, discount, total), parce que perso, j'ai mis un peu de temps avant de comprendre le principe ^^

  5. #5
    Expert confirmé
    Avatar de le_chomeur
    Profil pro
    Développeur informatique
    Inscrit en
    Février 2006
    Messages
    3 653
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Février 2006
    Messages : 3 653
    Points : 4 835
    Points
    4 835
    Par défaut
    Citation Envoyé par DoubleU Voir le message
    Mouais, je suis pas sur que t'y gagnes grand chose, parce que meme si certains blocs se ressemblent, ya toujours une petite différence, genre un attribut en plus ou en moins, un onclick qui traine, etc... ce qui fait que pour avoir une fonction générique qui couvre tout, bah soit le corps de la fonction est très gros, soit c'est l'appel qui va etre gros, donc tu vas pas y gagner grand chose (a la limite un peu en clarté)

    Coté ergonomie, moi je vois pas les boutons a droite ^^, par contre, tu devrais peut etre séparer un peu plus tes "ensembles" (option, discount, total), parce que perso, j'ai mis un peu de temps avant de comprendre le principe ^^
    Ha ? et les hash ? option:valeur ?

    allez faire un petit tour sur ce topic :

    http://www.developpez.net/forums/sho...wpost&t=535848

    et reviens me dire ce que tu en penses

  6. #6
    Membre expérimenté Avatar de DoubleU
    Profil pro
    Inscrit en
    Janvier 2006
    Messages
    1 106
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Janvier 2006
    Messages : 1 106
    Points : 1 388
    Points
    1 388
    Par défaut
    soit le corps de la fonction est très gros, soit c'est l'appel qui va etre gros,
    Je pensais justement au hash en disant ca, tu déportes la complexité du code de ton traitement initial dans l'appel de ta fonction,

    Sinon, bah je suis désolé, mais je vois pas ce qu'il va y gagner à utiliser le code de Spaffy.

    Pas que je dénigre l'intérêt de ce qu'il a proposé hein, mais simplement, je trouve pas que le gain en vaille la peine dans ce cas la. Si tu regardes le code de tavarlindar, t'as en gros une quarantaine de lignes qui peuvent etre "factorisées" (tout ce qui est création des cellules), et le code de spaffy fait a peu près autant... donc tu gagnes rien et tu complexifies quand meme pas mal l'application.

  7. #7
    Expert confirmé
    Avatar de le_chomeur
    Profil pro
    Développeur informatique
    Inscrit en
    Février 2006
    Messages
    3 653
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Février 2006
    Messages : 3 653
    Points : 4 835
    Points
    4 835
    Par défaut
    Le but au final , est toujours d'avoir une application la plus simple a maintenir et a faire évoluée, demain s'il a un problème de code ou doit implémenté une méthode qui créer une célulle verte au lieu de rouge ,il suffit de changer un paramètre dans l'appel de la méthode ce qui ne prendrait qu'une seule ligne en créer des méthode pour créer des cellule , créer des input etc ...

    la , a chaque nouvel élément il doit réécrire un bloc complet , ici nous somme dans le cas d'un petit programme , imagine le gain sur de grosse applications ...

    aujourd'hui toutes les applications fonctionne sur un modèle bien définit qui consiste a différencier , le code , du rendu de la bdd , ici on améliore le traitement pour une lisibilité et une maintenabilité ...

    autre point, la performance , regarde l'exemple :

    http://www.developpez.net/forums/sho...d.php?t=475149

    qui montre l'avantage de créer des méthodes pour ce type d'utilisation

  8. #8
    Membre régulier Avatar de tavarlindar
    Profil pro
    Inscrit en
    Janvier 2007
    Messages
    262
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Janvier 2007
    Messages : 262
    Points : 97
    Points
    97
    Par défaut
    Merci pour la qualité de vos interventions.
    Pour changer de méthode de programmation, cela changerait.
    Je vais conserver ce sujet en mémoire et l'étudier très attentivement.

    Sauf erreur de ma part, en mettant en place de de telles sous méthodes, on tombe un peu dans l'utilisation de librairie maison. Non ?
    Là où je suis hésitant, au delà du fait que c'est un peu du chinois pour moi, c'est que par la suite, j'y vois quelques soucis :
    1) Quand vous êtes dans le code de l'appli, tout baigne, vous savez comment faire, comment utiliser les méthodes, mais 1 an après lorsqu'il faut modifier, il faut de rappeler comment fonctionne le bazard.
    2) Quand vous avez un bug et que vous avez besoin d'aide, il faut tout simplifier pour que les autres puissent vous aider.


    Ceci tant dit, je pense que l'utilisation de méthodes, sous méthodes, etc, c'est justifier lorsqu'on programme toute la journée. Cela fait gagner du temp.


    Pour ce qui est de l'ergonomie de ma page de test, c'est tout sauf ergonomique, j'en suis pas là. Par contre, vos impressions sont toujours les bienvenues.
    Bouton 'add' à droite ou à gauche : c'est une bonne question.

    Bien à Vous.

    Tavar

  9. #9
    Expert confirmé
    Avatar de le_chomeur
    Profil pro
    Développeur informatique
    Inscrit en
    Février 2006
    Messages
    3 653
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Février 2006
    Messages : 3 653
    Points : 4 835
    Points
    4 835
    Par défaut
    1) Quand vous êtes dans le code de l'appli, tout baigne, vous savez comment faire, comment utiliser les méthodes, mais 1 an après lorsqu'il faut modifier, il faut de rappeler comment fonctionne le bazard.
    2) Quand vous avez un bug et que vous avez besoin d'aide, il faut tout simplifier pour que les autres puissent vous aider.
    d'ou l'utilitée de commenter ton code ,e t de faire une mini faq sur l'utilisation des méthodes

    Bon courage pour la suite

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 1
    Dernier message: 03/05/2007, 08h15
  2. Comment redimensionner un tableau dynamique ?
    Par Mickey.jet dans le forum Langage
    Réponses: 13
    Dernier message: 07/09/2006, 18h16
  3. Réponses: 9
    Dernier message: 22/06/2006, 20h06
  4. FAQ: Comment allouer un tableau dynamique
    Par beb30 dans le forum C
    Réponses: 14
    Dernier message: 02/05/2006, 16h13
  5. Comment passer un tableau dynamique en paramètre ?
    Par Charette dans le forum Langage
    Réponses: 2
    Dernier message: 21/04/2005, 11h28

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo