Forum : Novice JS Question - Front-End

Salut à tous, je suis vraiment un débutant en matière de javascript, mais il y a une chose qui m'a vraiment déconcerté - j'espère que quelqu'un pourra m'orienter dans la bonne direction.

Je suis conscient qu'il est préférable d'inclure tous les JS dans un seul fichier, plutôt que d'avoir plusieurs fichiers JS. Mais, le problème que j'ai du mal à comprendre est le suivant - par exemple, disons que j'ai un site Web de base avec cinq pages : https://omegle.onl/

Toutes les pages incluent une navigation simple qui utilise quelques lignes de JS.

Une page a un simple modal basé sur JS.

Une autre page a un popup basé sur JS.

Tout le JS pour la navigation, modal et le popup est dans un seul fichier JS.

Les cinq fichiers HTML ont le fichier JS lié.

Dans mon exemple, la navigation fonctionne sur toutes les pages et le modal fonctionne également sur sa page. Mais, la fenêtre contextuelle échoue car le fichier JS recherche les éléments HTML modaux qui n'apparaissent pas sur la page avec la fenêtre contextuelle.

Alors, quelle est la meilleure pratique pour résoudre ce problème ? Je suppose que vous pourriez utiliser une instruction if pour vérifier si certains éléments HTML se trouvent sur une page avant d'exécuter le JS pour cet élément particulier (par exemple, vérifiez si le modal existe sur une page avant d'exécuter ce bloc de JS, et si ce n'est pas le cas n'existe pas, passez au bloc de JS pour le popup), mais cela me semble un peu compliqué.

Toute aide serait très appréciée car cela me dérange depuis un moment!

Chelios

Réponse acceptée

"Je suis conscient qu'il est préférable d'inclure tous les JS dans un seul fichier, plutôt que d'avoir plusieurs fichiers JS."

Pas du tout ! Au contraire ! C'est mieux de bien séparer son code histoire de pouvoir s'y retrouver.
La plupart des technos moderne compilent tous les fichiers javascript en un seul, d'où le fait que ce soit la norme. Mais au développement on sépare evidemment tout
Il y a une grosse différence entre le code qu'écrit le développeur et ce que tu trouves dans le code source de la page au final.

Et donc pour répondre à ta question, il s'agit d'inclure ce script uniquement dans la page concerné, et pas sur ton template

Chelios

"Je suis conscient qu'il est préférable d'inclure tous les JS dans un seul fichier, plutôt que d'avoir plusieurs fichiers JS."

Et donc pour répondre à ta question, il s'agit d'inclure ce script uniquement dans la page concerné, et pas sur ton template

popotte

Hello :)

Alors la bonne pratique est de standardiser le comportement

Dans tes pages tu as un élément qui déclenche une popin ou un modal, tu places ton emmeteur d'event dans l'élément déclencheur, tu ajoutes un data pour identifier la bonne popin ou le bon modal (uniquement si tu as plusieurs popin ou plusieurs modals dans la même page, sinon pas besoin) et tu fais un code générique pour qu'il fonctionne dans toutes les pages

HTML

PAGE 1

<div>
    <button class="popin_target" onclick="handlePopin" data-popin-target="popin1">Click</button>
    <div class="popin1">Contenu de la popin</div>

    <button class="popin_target" onclick="handlePopin" data-popin-target="popin2">Click</button>
    <div class="popin2">Contenu de la popin</div>

    <button class="modal_target" onclick="handleModal" data-modal-target="modal">Click</button>
    <div class="modal">Contenu de la popin</div>
</div>

PAGE 2

<div>
    <button class="popin_target" onclick="handlePopin" data-popin-target="popin5">Click</button>
    <div class="popin5">Contenu de la popin</div>

    <button class="modal_target" onclick="handleModal" data-modal-target="modal">Click</button>
    <div class="modal">Contenu de la popin</div>
</div>

PAGE 3

<div>
    <button class="modal_target" onclick="handleModal" data-modal-target="modal1">Click</button>
    <div class="modal1">Contenu de la popin</div>

    <button class="modal_target" onclick="handleModal" data-modal-target="modal2">Click</button>
    <div class="modal2">Contenu de la popin</div>
</div>

JS (le même code pour toutes les pages)

/**
  * SI TU AS PLUSIEURS POPIN/MODAL DANS UNE SEULE PAGE ET QUE T'AS BESOIN DU DATASET
  */
handlePopin(event) {
    let popin = document.querySelector(event.target.dataSet('popin-target')

    // Et la tu fais apparaitre la popin
}

handleModal(event) {
    let modal = document.querySelector(event.target.dataSet('modal-target')

    // Et la tu fais apparaitre la modal
}

/**
  * SI TU N'AS Q'UNE POPIN/MODAL PAR PAGES ET QUE T'AS PAS BESOIN DU DATASET
  */
handlePopin() {
    let popin = document.querySelector('popin')

    // Et la tu fais apparaitre la popin
}

handleModal() {
    let modal = document.querySelector('modal')

    // Et la tu fais apparaitre la modal
}

Après pour ce que tu veux faire, le plus simple ce serait d'utiliser StimulusJS, c'est vraiment adapté (en gros stimulus c'est comme ReactJS mais plus simple, orienté controller, créé par les devs de RubyOnRails): https://stimulus.hotwired.dev

Novice JS Question - Front-End

3 réponses