Discussion :

[grinder59]

Bonjour,

Je viens de récupérer un projet dont la couche front intègre beaucoup de javascript implémenté avec jQuery.
Le projet fonctionne mais il est rendu très complexe car, de ce que j'en comprends, et pardonnez moi / corrigez moi si je n'utilise pas les bons termes, en jQuery, on ne peut manipuler des objets qu'après la fin de l'exécution d'une fonction.
Ainsi j'ai des fonctions imbriquées dans des fonctions imbriquées dans des fonctions imbriquées dans des fonctions... etc etc

J'envisage de refaire le projet en JS natif afin de retirer la complexité et la profondeur des fonctions (qui du coup perdent en réutilisabilité). Que me conseilleriez-vous ?

Merci de vos avis.

[mathieu]

vous pouvez regardez les pages suivantes pour des informations sur les équivalents entre jquery et javascript de base :
https://github.com/camsong/You-Dont-...r/README-fr.md
https://youmightnotneedjquery.com/

par contre jquery est uniquement une bibliothèque qui permettait d'harmoniser les différences entre les navigateurs, cela ne devrait pas influencer sur la façon d'utiliser les objets.
pouvez vous nous montrer un exemple de code avec les imbrications dont vous parlez ?

[grinder59]

Merci Mathieu pour ces liens qui me seront très utiles !

Je suis encore en découverte du code, peut être que les imbrications évoquées sont obligatoires, par exemple :
- je crée un tableau
- une fois le tableau créé j'ajoute une ligne
- une fois la ligne crée je mets des valeurs dans les cellules
- une fois une valeur positionnée dans une cellule, je positionne un $('.maClasse').on('click', function(){ remplir une modale et l'afficher })
- une fois la modale affichée, je positionne des sélecteurs sur les classes pour créer des actions

En fait, il y a ces imbrications car chaque instruction nécessite que la précédente ait été faite.

Le truc c'est que cela me crée des fonctions que je ne peut pas réutiliser ailleurs :
Dans l'exemple ci-dessous, la fonction qui positionne les actions sur les sélecteurs est imbriquée dans 3 autres fonctions. Ainsi si je veux positionner, ailleurs, des actions sur les sélecteurs, je dois faire un autre fonction (ceci dit, je ne suis pas expert en JS et le code que j'ai récupéré est un peu complexe. Peut être que même en jQuery, il y a moyen de faire des choses plus simples et d'avoir des fonctions unitaires qui sont appelées dans les imbrications. J'avoue que je viens seulement d'y penser... )

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
$.ajax({			
	// créer un tableau
})
.done(function( retour ) {
	$.ajax({			
		// ajouter une ligne
	}).done(function( retour ) {
		$.ajax({			
			// ajouter des valeurs dans la ligne
		}).done(function( retour ) {
			$.ajax({			
				// actions sur les sélecteurs
			})

[Doksuri]

salut, le lien github you don't need jquery a ete ma bible le temps de la transition "back to natif"

il faut y aller progressivement, n'essaye pas de traduire tout ton code existant en natif, mais plutot : le nouveau code, ecris-le en natif. et si tu galere trop, tant pis, laisse trainer du jquery... petit a petit, tu ecriras moins de jquery sans meme t'en rendre compte.

pour ce qui est du $.ajax()... en natif, c'est un fetch() (qui n'est autre qu'une promesse) developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise

Code javascript :

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

1
2
3
4
fetch(..)
.then(...)
.then(...)
etc

je ne peux aussi que te conseiller d'aller lire la doc a chaque fois que tu ne sais pas comment quelque chose fonctionne (la doc MDN est vraiment claire & complete) developer.mozilla.org/fr/

[SpaceFrog]

Il faut de toute façon comprendre que tu ne pourras pas traiter les données coté client avant que le fetch n'ait terminé son process...
Donc Jquery ou natif, même combat.
Je pense que tu es plutôt confronté à la lisibilité, et facilité de maintenance d'un code existant.

[grinder59]

Merci à tous les 2 !
Au boulot maintenant !