[DOM] comment améliorer un tableau dynamique ?

Bonjour,:D

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 :oops:, je le sais déjà ! C’est justement l’objet de mon post.:mrgreen:

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 ...

c'est partit mon kiki ^^

alors après avoir parcourus rapidement ton code , je vois que tu veux t'orienter pur dom :mouarf: 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 :roll: hup's je m'égare :

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

Code:

---

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 :)

Créer des sous méthodes ?

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

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 ^^

Citation:

---

Envoyé par DoubleU

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 ;)

Citation:

---

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.

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 :)

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.:D

Tavar

Citation:

---

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 :)