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

Question

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

Mon JavaScript existant dans mon 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> 

Cette affiche des boutons pour [Ajouter] et [Trouver]. Pour trouver, il est nécessaire de soumettre le formulaire, et j'utilise MyFormSubmit() qui valide les données, ajoute un effet visuel à la page, puis POST les données.

Je pourrais ajouter une classe ou ID à pour le bouton Rechercher et JQuery je pouvais écrire quelque chose comme:

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

A mon stade « novice » d'accord avec JQuery Je ne obtenir pourquoi je le ferais de cette façon

Mon ancienne méthode identifie la méthode près de l'objet. Il y a peut-être un risque que le JS ne soit pas chargé avant que l'utilisateur n'appuie sur le bouton (est-ce que le chargement du JS est juste en haut de la page). La méthode JQuery Document Ready ne sera pas activée tant que le document n'est pas chargé (ce qui, je présume, garantit que le JS est présent et prêt à être exécuté?), Mais déplace le code vers une partie distincte de mon HTML. fichier - donc quand je vois la DIV MyButtonArray dans la source HTML, il n'est pas évident pour moi quels objets ont des méthodes, et lesquels ne le font pas.

Pouvez-vous s'il vous plaît m'aider à comprendre quelles sont mes options et les avantages/getchas que je devrais rechercher?

Modifier: Je suis à l'aise que la manipulation DOM - comme un LightBox qui peut apparaître quand une vignette avec classe « LightBoxThumb » est cliqué - utiliserait Javascript Unobtrusive.

Cependant, j'ai du mal à me persuader qu'un bouton qui a une action spécifique devrait avoir sa méthode appliquée de cette façon. (Je ne mettrais certainement pas de code sur le bouton autre qu'un seul appel de fonction à quelque chose "ailleurs", mais à mon avis c'est mon meilleur indice quant à ce que fait ce bouton, et les couches de Javascript discret peuvent rendre plus difficile pour déterminer)

Edit2 -. réponse

Accepté J'ai pris réponse Russ Cams. Il décrit Javascript discret d'une manière qui m'a été utile pour comprendre plus sur comment & quand cela devrait être utilisé.

Pour le moment (peut changer quand j'ai plus d'expérience!) Je vais m'en tenir à un événement OnClick pour une seule action, non changeante, sur un objet car je pense que ce sera plus facile pour moi de déboguer - et diagnostiquer si des problèmes surviennent. Pour ZebraStripes sur une table qui permet de cliquer sur la rubrique colonne pour trier (et les situations de ce type), je peux voir les avantages de l'approche Unobtrusive Javascript

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

"@Kristen - Vous avez raison, comme beaucoup des sujets de programmation, il y a plus de qu'une approche et les gens vont se tenir avec véhémence par leurs croyances!Si nous parlons d'une seule méthode pour un seul bouton, je comprends tout à fait où vous venez ...

Si nous parlons beaucoup de JavaScript, avec la même fonction pour les appels plus d'un élément, une fonction différente appelle des méthodes différentes, etc. Je pense qu'il serait plus difficile pour soi-même à mélanger les approches inline et discret, et il serait préférable d'adopter l'une ou l'autre approche »

Answer 1

Unobtrusive JavaScript est le principal moteur pour séparer le code JS de balisage

• Séparation des fonctions (la "couche de comportement") à partir d'une structure/contenu de la page Web
  et la présentation
• les meilleures pratiques éviter les problèmes de programmation JavaScript traditionnelle (tels que les incohérences de navigateur et l'absence d'évolutivité )
• amélioration progressive pour soutenir les agents utilisateurs qui ne peuvent pas soutenir
  fonctionnalité JavaScript avancée

Avec le code document.ready, il ne sera pas exécuté jusqu'à ce que le DOM est chargé et avant que le contenu de la page sont chargés

de Learning jQuery

Avec $ (document) .ready(), vous pouvez obtenir vos événements pour charger le feu ou tout ce que vous les voulez faire avant les charges de fenêtre.

Vous pouvez jeter un oeil à jQuery in Action, je le recommande fortement. Vous pouvez échantillonner Chapter 1 et Chapter 5 sur le book's homepage. Je pense que cela pourrait donner un meilleur aperçu de la raison pour laquelle la séparation peut bien fonctionner.

Enfin, jetez un oeil à this question qui a des réponses qui détaillent comment vous trouveriez les écouteurs d'événement sur un nœud DOM.

EDIT:

Quelques réflexions qui peuvent vous persuadent pourquoi JavaScript discret peut être une bonne idée.

Imaginez que vous avez une fonction liée comme un gestionnaire d'événements pour le même événement soulevé sur chacun d'un certain nombre d'éléments -

• Serait-il plus facile de savoir quels é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 du balisage ? Et si vous voulez ajouter aux éléments qui appellent cette fonction lorsque l'événement est déclenché sur chacun d'eux? Serait-il plus facile/mieux d'ajouter le gestionnaire d'événements à chaque élément ou de changer le code en un seul endroit?

Answer 2

Vous le faites de cette façon pour séparer la logique de l'interface utilisateur de la conception HTML réelle.

Answer 3

l'événement document prêt est bien avant l'événement de chargement de document. document prêt se produit une fois que le DOM est chargé, de sorte que tous les éléments existent avant de commencer à travailler dessus.

Alors oui, le JS sera prêt à mesure que le document est rendu. L'autre point à propos de la liaison est qu'il est utile pour changer les liaisons aux éléments lorsque des actions se produisent.

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

Answer 4

Au fil du temps, je pense que vous avez utilisé la syntaxe jQuery et la lecture:

class = "MyFormSubmit" devient aussi informative que la lecture onClick = "return MyFormSubmit();

Lorsque la puissance commence vraiment kick (en dehors de tous les avantages mentionnés par d'autres affiches) est la facilité avec laquelle vous pouvez modifier la liaison onClick via des sélecteurs liés à d'autres actions sur la page Web de manière à ne jamais se présenter d'abord ..

Une question Je me demande à quelle profondeur je prévois d'aller avec un nouvel outil, si je prévois de m Utilisation intensive d'un cadre ou d'une bibliothèque, puis écrire mon code dans son style de codage "plus natif" deviendra beaucoup plus naturel et d'autres développeurs qui savent que l'outil trouvera le code beaucoup plus propre et plus compréhensible.