L’un des d\u00e9fis de l’apprentissage d’une biblioth\u00e8que (qu’il s’agisse de la biblioth\u00e8que standard de fonctions fournies avec un langage de programmation ou d’un projet tiers) est double\u00a0:<\/p>\n
Et, vraiment, parfois m\u00eame apprendre \u00e0 utiliser ces fonctions n’est pas si difficile – il s’agit de savoir quand utiliser une fonction donn\u00e9e pour aider \u00e0 minimiser le code tout en atteignant les objectifs du projet.<\/p>\n
Un exemple qui me vient \u00e0 l’esprit est l’utilisation de la fonction clone<\/strong> de jQuery. La d\u00e9finition<\/a> de la fonction est simple :<\/p>\n La m\u00e9thode .clone() effectue une copie compl\u00e8te de l’ensemble des \u00e9l\u00e9ments correspondants, ce qui signifie qu’elle copie les \u00e9l\u00e9ments correspondants ainsi que tous leurs \u00e9l\u00e9ments descendants et n\u0153uds de texte.<\/p>\n<\/blockquote>\n La bonne chose \u00e0 propos de la fonction est qu’elle peut \u00e9galement cr\u00e9er une copie "superficielle" de la fonction. Cela signifie que vous pouvez copier les \u00e9l\u00e9ments sans les gestionnaires d’\u00e9v\u00e9nements, les \u00e9l\u00e9ments enfants, etc.<\/p>\n Selon vos besoins, l’un sera plus pr\u00e9cieux que l’autre. Mais, pour ce post, supposons qu’une copie compl\u00e8te est ce que nous recherchons.<\/p>\n Disons que vous avez un ensemble d’images sur une page et pour chacune de ces images, vous devez ajouter un gestionnaire d’\u00e9v\u00e9nements afin que lorsque l’on clique sur l’image, quelque chose se passe.<\/p>\n Je ne sais pas. Quel que soit votre cas, disons que vous avez une image ou un ensemble d’images et que vous devez afficher une bo\u00eete de dialogue modale lorsque vous cliquez dessus.<\/p>\n Pour ce faire, il y a plusieurs choses que nous devons faire :<\/p>\n Si vous travaillez avec WordPress et cherchez comment ajouter des attributs d’image personnalis\u00e9s, vous pouvez voir un tutoriel sur la fa\u00e7on de le faire dans ce post<\/a>.<\/p>\n Cr\u00e9er un partiel est simple. Le code pourrait \u00eatre aussi simple que l’extrait suivant<\/a>\u00a0:<\/p>\n Et oui, vous pouvez l’habiller avec un peu de CSS et ajouter du code personnalis\u00e9 \u00e0 l’un des \u00e9l\u00e9ments en utilisant PHP, mais cela couvre les bases absolues.<\/p>\n Supposons maintenant que pour chaque image qui existe sur la page (avec un attribut personnalis\u00e9 tel que data-type="acme"<\/strong> ), nous souhaitons ajouter une copie de l’\u00e9l\u00e9ment ci-dessus \u00e0 la page associ\u00e9e \u00e0 chacune des images de la page.<\/p>\n Pour ce faire, nous devons savoir :<\/p>\n Donc, d’abord, nous voulons d\u00e9tecter quand une image donn\u00e9e est cliqu\u00e9e. Pour ce faire, nous pouvons parcourir toutes les images<\/a> de la page afin de pouvoir attacher un gestionnaire d’\u00e9v\u00e9nements personnalis\u00e9\u00a0:<\/p>\n\n
1 Un cas d’utilisation potentiel<\/h3>\n
\n
2 Configuration du code<\/h3>\n
\n
\u00c9tape 1<\/h4>\n
\u00c9tape 2<\/h4>\n
<p class=\"acme-element\">\n <span>Acme<\/span>\n<\/p><!--- .acme-element --><\/code><\/pre>\n\u00c9tape 3<\/h4>\n
\n
\/\/ Loop through each of the image with the custom data-types on the page.\n$('img[data-type=\"acme\"]').each(function() {\n\n \/\/ ...\n\n});<\/code><\/pre>\n