JQuery: Pourquoi la fonction JavaScript / Document Ready discrète plutôt que l'événement OnClick?

https://stackoverflow.com/questions/621574

05-07-2019
|

Question

Je viens de commencer à regarder JQuery. Je n'ai actuellement aucune application AJAX dans mon application Web.

Mon code JavaScript existant dans mon code HTML ressemble à:

<form ...>
<p>Find what? <input ...></p>
<div class="ButtonArray">
  <a href="AddRecord.ASP&amp;Action=ADD">ADD</a>
  <a href="#" onClick="return MyFormSubmit();">FIND</a>
</div>
</form>

Ceci affiche les boutons pour [Ajouter] et [Trouver]. Pour trouver, il est nécessaire de soumettre le formulaire. J'utilise MyFormSubmit () pour valider les données, ajouter un effet visuel à la page, puis poster les données.

Je pourrais ajouter une classe ou un identifiant au bouton Rechercher et, dans JQuery, écrire quelque chose du type:

$(function() {
  $(".MySearchButtonClass").click(function() {
    // validate and process form here
  });
});

Chez mon "novice" stade de compréhension avec JQuery je ne ne comprends pas pourquoi je le ferais de cette façon

Mon ancienne manière identifie la méthode près de l'objet. Il se peut que le JS n'ait pas été chargé avant que l'utilisateur appuie sur le bouton (y a-t-il? La charge pour le JS se trouve tout en haut de la page).

La méthode Document Ready de JQuery ne sera activée qu'une fois le document chargé (ce qui, je suppose, garantit que le JS est présent et prêt à être exécuté?), mais le code est déplacé dans une partie distincte de mon fichier HTML. - Ainsi, lorsque je vois la DIV MyButtonArray dans la source HTML, il m'est impossible de savoir quels objets ont des méthodes et lesquels n'en ont pas.

Pouvez-vous m'aider à comprendre quelles sont mes options et quels sont les avantages et les inconvénients que je devrais rechercher?

Modifier : je suis à l'aise avec la manipulation DOM, telle qu'une LightBox pouvant apparaître lorsqu'une vignette portant la classe " LightBoxThumb " est cliqué - utiliserait du Javascript non intrusif.

Cependant, j'ai du mal à me persuader qu'un bouton ayant une action spécifique devrait avoir sa méthode appliquée de cette manière. (Je ne mettrais certainement pas de code sur le bouton autre qu'un simple appel de fonction à quelque chose d '"ailleurs", mais je pense que c'est mon meilleur indice quant à ce que fait ce bouton, et des couches de Javascript discret peuvent en faire beaucoup plus difficile à déterminer.)

Modifier2 - Réponse acceptée

J'ai pris la réponse de Russ Cams. Il décrit le Javascript non intrusif d’une manière qui m’a aidé à mieux comprendre comment & amp; quand cela devrait être utilisé.

Pour le moment (cela peut changer si j'ai plus d'expérience!), je vais m'en tenir à un événement OnClick pour une action unique et non changeante sur un objet, car je sens qu'il sera plus facile pour moi de déboguer - et de diagnostiquer si des problèmes surviennent. Pour ZebraStripes sur un tableau qui permet de cliquer sur la colonne d’en-tête pour trier (et les situations de ce type), je peux voir les avantages de l’approche javascript discrète

Le dernier commentaire de Russ a été particulièrement utile, répété ici:

" @Kristen - Vous avez raison, j'aime beaucoup   des sujets de programmation, il y a plus   qu'une approche et les gens vont   tenez fermement à leurs croyances! Si   on parle d'une seule méthode   pour un seul bouton, je suis totalement   comprenez d'où vous venez ...

Si nous parlons de beaucoup de   JavaScript, avec les mêmes appels de fonction   pour plus d'un élément, différent   la fonction appelle différentes méthodes,   etc. Je pense que ce serait plus   difficile pour soi de mélanger inline   et des approches discrètes, et il   serait mieux d'adopter un ou le   autre approche "

La solution

JavaScript discret est le principal moteur permettant de séparer le code JS du balisage

Séparation des fonctionnalités (la "couche de comportement") de la page Web

  structure / contenu et présentation

Meilleures pratiques pour éviter les problèmes de JavaScript traditionnel   programmation (telle que navigateur   incohérences et manque de   évolutivité)

Amélioration progressive pour prendre en charge les agents utilisateurs susceptibles de ne pas prendre en charge
  fonctionnalité JavaScript avancée

Avec le code dans document.ready, il ne sera exécuté que lorsque le DOM sera chargé et avant que le contenu de la page ne soit chargé

De Apprentissage de jQuery

Avec $ (document) .ready (), vous pouvez charger ou déclencher vos événements ou tout ce que vous voulez qu'ils fassent avant le chargement de la fenêtre.

Vous pouvez consulter jQuery en action , I Je le recommande vivement. Vous pouvez tester le chapitre 1 et Chapitre 5 sur le page d'accueil du livre . Je pense que cela pourrait donner une idée plus précise des raisons pour lesquelles la séparation peut bien fonctionner.

Enfin, consultez cette question qui contient des réponses détaillées sur la manière dont les écouteurs d’événements seraient trouvés sur un nœud DOM.

EDIT:

Certaines idées peuvent vous convaincre pourquoi un code JavaScript discret peut être une bonne idée.

Imaginez que vous ayez une fonction liée en tant que gestionnaire d'événement pour le même événement généré sur chacun des éléments -

Serait-il plus facile de savoir lequel les éléments appellent cette fonction pour gérer un événement lorsque la déclaration est en ligne dans chaque élément, ou la déclaration est dans un endroit, en dehors de la balisage?
Et si vous voulez ajouter à la éléments qui appellent cette fonction quand l'événement est soulevé sur chacun d'eux? Serait-il plus facile / préférable d’ajouter le gestionnaire d'événement intégré à chaque élément ou pour changer le code en un seul endroit?

Autres conseils

l'événement de document prêt est bien avant l'événement de chargement de document. le document est prêt lorsque le DOM est chargé, de sorte que tous les éléments existent avant que vous ne commenciez à travailler dessus.

Donc oui, le JS sera prêt au rendu du document. L’autre aspect de la liaison est qu’elle est utile pour modifier les liaisons aux éléments lorsque de telles actions se produisent.

Vous pouvez toujours déclarer l'action sur l'élément si vous préférez cependant.

Au fil du temps, je pense que vous vous habituez à la syntaxe jQuery et à la lecture:

class = " MyFormSubmit " devient aussi informatif que lire onClick = & return; renvoyer MyFormSubmit ();

Là où le pouvoir commence vraiment à entrer en jeu (à part tous les avantages mentionnés par d'autres affiches), c'est la facilité avec laquelle vous pouvez modifier la liaison onClick via des sélecteurs liés à d'autres actions sur la page Web d'une manière qui semble ne jamais se présenter. eux-mêmes initialement.

Une question que je me pose est la suivante: quelle est la profondeur de mon projet avec un nouvel outil, si je prévois de faire un usage intensif d’un framework ou d’une bibliothèque, puis d’écrire mon code dans son "plus natif"? Le style de codage deviendra beaucoup plus naturel et les autres développeurs connaissant l'outil trouveront le code plus propre et plus compréhensible.

Vous procédez de cette manière pour séparer la logique de l'interface utilisateur de la conception HTML réelle.

Licencié sous: CC-BY-SA avec attribution

Non affilié à StackOverflow