Introduction à jQuery (Partie 3) Attente de la page pour charger et fonctions anonymes

jQuery est sans doute une compétence essentielle pour le développeur Web moderne. Langage de programmation à apprendre - Programmation Web. Langage de programmation à apprendre - Programmation Web. Nous allons examiner les différents langages de programmation Web utilisés par 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… Read More, et dans cette courte mini-série, j'espère vous donner les connaissances nécessaires pour commencer à les utiliser dans vos propres projets Web. Dans la première partie de notre didacticiel jQuery Tutoriel jQuery - Mise en route: notions de base et sélecteurs Tutoriel jQuery - Mise en route: bases et sélecteurs La semaine dernière, j'ai expliqué à quel point jQuery est important 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é quelques notions de base de la langue et comment utiliser les sélecteurs; dans la partie 2, nous avons abordé les méthodes de manipulation du DOM Introduction à jQuery (partie 2): méthodes et fonctions Introduction à jQuery (partie 2): méthodes et fonctions Ceci fait partie d'une introduction en cours à la série de programmation Web jQuery pour débutants . La première partie couvrait les bases de jQuery sur la manière de l'inclure dans votre projet et les sélecteurs. Dans la partie 2, nous poursuivrons avec… Read More .

Dans la partie 3, nous aborderons le problème de la façon de retarder jQuery jusqu'au chargement de la page, puis je tenterai d'expliquer ce que sont les fonctions anonymes et pourquoi vous devez en savoir plus..

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, un comportement étrange ou des choses qui ne fonctionnent tout simplement pas. L’erreur la plus commune que j’ai connue lors de l’apprentissage de jQuery était celle de ne pas trouver d’éléments DOM. Même si je pouvais les voir clairement dans le source de la page, jQuery ne cessait de me dire qu’il ne pouvait pas les trouver! Pourquoi donc?

Eh bien, tout cela a à voir avec l'ordre dans lequel les choses sont chargées par le navigateur. Au 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 en premier, mais ne fait rien car il ne trouve pas l'élément, puis l'élément DOM se chargera 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 document prêt événement. Cela fait que le code joint attend que le DOM soit complètement chargé (jusqu’à ce que prêt). Son utilisation est simple:

$ (document) .ready (function () // votre code à retarder va ici);

Il existe un moyen encore plus court de le faire, décrit dans la documentation de jQuery, mais je vous suggère fortement de l’utiliser pour la lisibilité du code..

Cet événement documenté est un autre bon exemple de fonction anonyme, alors essayons 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 - ce qui est fondamental pour jQuery et Javascript - pourrait être un peu déconcertant. D'une part, il commet assez souvent des erreurs dues à des accolades mal assorties, c'est pourquoi je vais l'expliquer maintenant. Si vous souhaitez une explication détaillée sur la raison pour laquelle les fonctions anonymes sont meilleures que les fonctions nommées classiques à un niveau plus technique, je vous suggère de lire ce billet de blog assez complexe [N'est plus disponible].

Jusqu'à présent, vous avez probablement seulement rencontré fonctions nommées. Ce sont des fonctions qui ont été déclarées avec un nom et peuvent donc être appelées n'importe où, 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..

function doStuffOnPageLoad () console.log ("faire des choses!");  $ (document) .ready (doStuffOnPageLoad);

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

$ (document) .ready (function () console.log ("faire des choses"););

Vous ne verrez peut-être pas beaucoup d’avantages pour le moment - c’est seulement un peu moins de code dans ce cas-là -, mais au fur et à mesure que vos scripts progressent, vous vous rendrez compte que vous n’aurez pas à vous échapper pour chercher des définitions de fonctions. Malheureusement, cela rend les choses un peu plus difficiles pour les débutants - il suffit de regarder tous ces accolades - alors assurez-vous de vérifier les points suivants si vous recevez des erreurs:

• Nombre correct d'accolades correspondantes - indenter votre code aide.
• Curly vs rondes accolades.
• Déclaration fermant avec un point-virgule - mais non nécessaire après une accolade fermante.

Utilisation d'un éditeur de code tel que Sublime Text 2 Essayez Sublime Text 2 pour vos besoins en édition de code multi-plateformes Essayez Sublime Text 2 pour vos besoins en édition de code multi-plateformes Sublime Text 2 est un éditeur de code multi-plateformes dont j'ai récemment entendu parler, et je dois dire que je suis vraiment impressionné malgré le label bêta. Vous pouvez télécharger l'application complète sans payer un sou… Lire plus peut vraiment aider, car elle met en évidence les accolades correspondantes et met automatiquement le code en retrait pour vous. Un éditeur de code dédié est essentiel, vraiment.

C’est tout pour cette leçon, mais vous devriez prendre l’habitude d’enfermer quelques manipulations de base du DOM dans un événement de préparation de document avant de poursuivre, et commencez à éditer des fichiers dans un éditeur de code, si ce n’est déjà fait. La prochaine fois, nous examinerons les événements et la manière dont ils sont utilisés pour ajouter de l'interactivité à une page, par exemple pour que jQuery fasse quelque chose lorsqu'un bouton est cliqué. Les questions ou commentaires sont toujours les bienvenus ci-dessous.

En savoir plus sur: JavaScript, jQuery, Programmation, Développement Web.