Introduction à jQuery (partie 3): attente de chargement de la page et fonctions anonymes

Publicité

jQuery est sans doute une compétence essentielle pour le moderne développeur web Quel langage de programmation apprendre - Programmation WebAujourd'hui, nous allons jeter un œil aux différents langages de programmation Web qui alimentent Internet. Ceci est la quatrième partie d'une série de programmation pour débutants. Dans la partie 1, nous avons appris les bases de ... Lire la suite , et dans cette courte mini-série, j'espère vous donner les connaissances nécessaires pour commencer à l'utiliser dans vos propres projets Web. dans le première partie de notre tutoriel jQuery Tutoriel jQuery - Prise en main: bases et sélecteursLa semaine dernière, j'ai parlé de l'importance de jQuery pour tout développeur Web moderne et pourquoi il est génial. Cette semaine, je pense qu'il est temps de nous salir les mains avec du code et d'apprendre comment ... Lire la suite , nous avons examiné certains principes fondamentaux de la langue et comment utiliser les sélecteurs; dans la partie 2, nous sommes passés à

méthodes de manipulation du DOM Introduction à jQuery (Partie 2): Méthodes et fonctionsCela fait partie d'une introduction continue aux débutants de la série de programmation Web jQuery. La partie 1 a couvert les bases de jQuery sur la façon de l'inclure dans votre projet et les sélecteurs. Dans la partie 2, nous allons continuer avec ... Lire la suite .

Dans la partie 3, nous aborderons le problème de la façon de retarder jQuery jusqu'au chargement de la page, puis j'essaierai d'expliquer ce que sont les fonctions anonymes et pourquoi vous devez les connaître.

Chargement différé: comment et pourquoi?

Si vous avez essayé une partie du code des parties 1 et 2, vous avez peut-être rencontré des erreurs, des comportements étranges ou des choses qui ne fonctionnent tout simplement pas. L'erreur la plus courante que j'ai rencontrée lors de l'apprentissage de jQuery était celle des éléments DOM introuvables - même bien que je puisse les voir clairement dans la source de la page, jQuery ne cessait de me dire qu'il ne pouvait tout simplement pas trouver leur! Pourquoi donc?

Eh bien, tout dépend de l'ordre dans lequel les choses sont chargées par le navigateur. C'est plus simple, si vous avez un script jQuery en cours d'exécution dans le navigateur avant l'élément DOM qu'il recherche a été créé, le script se charge d'abord, mais ne fait rien car il ne trouve pas l'élément, puis l'élément DOM se charge plus tard. C'est moins un problème si vous placez tous vos scripts près du pied de page, mais cela peut toujours arriver.

La solution consiste à envelopper vos scripts dans ce qu'on appelle un événement prêt pour le document. Cela fait attendre le code joint jusqu'à ce que le DOM soit complètement chargé (jusqu'à ce qu'il soit prêt). Son utilisation est simple:

$ (document) .ready (fonction () { // votre code à retarder va ici. });

Il existe une manière encore plus courte de procéder décrite dans le Documentation jQuery, mais je vous suggère fortement d'utiliser cette méthode pour la lisibilité du code.

Cet événement prêt pour le document est un autre bon exemple de fonction anonyme, essayons donc de comprendre ce que cela signifie.

Fonctions anonymes

Si, comme moi, vous avez une expérience de programmation de niveau débutant à votre actif, l'idée de fonctions anonymes - qui est au cœur de jQuery et Javascript - pourrait être un peu déconcertant. D'une part, il fait des erreurs dues à des accolades incompatibles, c'est pourquoi je vais l'expliquer maintenant. Si vous souhaitez une explication approfondie des raisons pour lesquelles les fonctions anonymes sont meilleures que les fonctions classiques fonctions à un niveau plus technique, je vous suggère de lire ce billet de blog assez complexe [No Longer Disponible].

Jusqu'à présent, vous n'avez probablement rencontré que fonctions nommées. Ce sont des fonctions qui ont été déclarées avec un nom et qui peuvent donc être appelées n'importe où ailleurs, autant de fois que vous le souhaitez. Considérez cet exemple trivial, qui enregistrera un message sur la console lorsque la page sera chargée.

fonction doStuffOnPageLoad () { console.log ("faire des trucs!"); } $ (document) .ready (doStuffOnPageLoad);

C'est utile si votre fonction est conçue pour être réutilisée, mais dans ce cas, elle est un peu compliquée car nous ne voulons vraiment qu'elle se déclenche qu'une seule fois lorsque la page est chargée. Au lieu de cela, nous ne prenons pas la peine de définir une fonction distincte, et la déclarons simplement en ligne en tant que paramètre selon les besoins. L'exemple précédent serait donc mieux réécrit:

$ (document) .ready (fonction () { console.log ("faire des choses"); });

Vous ne voyez peut-être pas beaucoup d'avantages pour le moment - c'est seulement un peu moins de code dans ce cas - mais comme vos scripts progressent en complexité, vous apprécierez de ne pas avoir à sauter pour essayer de trouver une fonction définitions. Malheureusement, cela rend les choses un peu plus difficiles pour les débutants - il suffit de regarder toutes ces accolades - alors assurez-vous de vérifier les points suivants si vous rencontrez des erreurs:

• Nombre correct d'accolades correspondantes - indentation de votre code aide.
• Bretelles bouclées vs rondes.
• Instruction se fermant par un point-virgule - mais pas nécessaire après une accolade fermante.

Utiliser un éditeur de code comme Sublime Text 2 Essayez Sublime Text 2 pour vos besoins d'édition de code multiplateformeSublime Text 2 est un éditeur de code multiplateforme dont je n'ai entendu parler que récemment, et je dois dire que je suis vraiment impressionné malgré l'étiquette bêta. Vous pouvez télécharger l'application complète sans payer un sou ... Lire la suite peut vraiment aider car il met en évidence les accolades correspondantes et indente automatiquement le code pour vous. Un éditeur de code dédié est vraiment essentiel.

C’est tout pour cette leçon, mais vous devriez prendre l’habitude d’enfermer quelques manipulations DOM de base dans l'événement prêt pour le document avant de continuer, et commencez à modifier les fichiers dans un éditeur de code si vous n'êtes pas déjà. La prochaine fois, nous examinerons les événements et la façon dont ils sont utilisés pour ajouter de l'interactivité à une page, comme faire en sorte que jQuery fasse quelque chose lorsqu'un bouton est cliqué. Les questions ou commentaires sont toujours les bienvenus ci-dessous.