11480 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

Je me demandais quelles étaient les bonnes pratiques concernant l'organisation de son code JS.

Le contexte : petit site mais avec pas mal de JS : des fonctions qui se lancent au chargement, au click, au scroll etc.

J'ai tous mis dans un même fichier main.js, donc quand je suis sur une page de contenu, des fonctions concernant ma homepage se lance à l'initialisation, au scroll et évidemment la console me dit que telle ou telle variable n'est pas définie.

Bref, existe-t-il un moyen pour garder tout mon code dans un seul fichier pour limiter le nombre de requête mais en appelant certaines fonctions uniquement sur LA page pour laquelle elles sont destinées ?

Je me contenterai d'un aiguillage, je peux approfondir en cherchant sur google :- )

Merci
Bonjour,

En général un script s'applique sur tel ID ou classe, il suffit donc de mettre une condition permettant d'appeler un script en ajax si présence de la classe concernée dans la page (en jQuery ça se fait avec getScript() ). Exemple : getScript in Scriptura

Mais cela ne vaux le coup que pour des scripts un minimum conséquents, sinon vous pouvez vous permettre de tout laisser dans un main.js.

JimmyW a écrit :
évidemment la console me dit que telle ou telle variable n'est pas définie.

Là par contre je ne comprends pas, cela ne devrait jamais arriver, les scripts concernés doivent être mal conçus.
Modifié par Olivier C (25 Aug 2016 - 20:58)
@h_wiz > Merci je vais me pencher sur cette manière de faire mais plutôt pour un prochain projet car manque de temps. J'étais tombé aussi sur cette page et ça a l'air intéressant.

@Olivier C > Merci ! je vais me pencher sur getScript().

J'utilise Pace.js (http://github.hubspot.com/pace/), un systeme de loader. Je pense que dans les options, le script propose de charger certaines choses uniquement en fonction de la présence d'un élément de class '.xxx' sur la page...

Si la solution est de type 'si un élément est sur la page, je lance mon script' : un simple if du genre :
var slider = $('.slider');
if (typeof slider=== undefined) {
    ne rien faire
} else {
   faire mon action
}



ne pourrait-il suffir ?

je ne fais presque pas de JS du coup je me renseigne sur les bonnes façons de faire :- )

Là par contre je ne comprends pas, cela ne devrait jamais arriver, les scripts concernés doivent être mal conçus.

ben en fait, c'est surtout des animations d'éléments :
genre une fois la homepage chargée > un élément se dévoile en fondu.
ou bien, ma home page qui est un genre de slider full screen réagi au scrollUp et scrollDown.
Mais une fois sur une autre page du site, quand je scroll, la console me reporte des bugs (en l'occurence au scrollUp il ne trouve pas la slide "suivante"... logique).

Bref, merci encore pr vos réponses ; - )
Modifié par JimmyW (26 Aug 2016 - 16:17)
a écrit :
ben en fait, c'est surtout des animations d'éléments :
genre une fois la homepage chargée > un élément se dévoile en fondu.
ou bien, ma home page qui est un genre de slider full screen réagi au scrollUp et scrollDown.
Mais une fois sur une autre page du site, quand je scroll, la console me reporte des bugs (en l'occurence au scrollUp il ne trouve pas la slide "suivante"... logique).


Ca c'est typiquement le genre de code à mettre dans un fichier spécifique plutôt que dans les communs, à ne charger que sur la page X ou que si l'élément X existe.

Perso j'ai opté pour requirejs dans mes projets non-pro et j'en suis très content.