Comment intégrer les plugins jQuery dans une application Ember

Points clés

• L'intégration du plug-in jQuery dans les applications Ember peut améliorer sa fonctionnalité et son expérience utilisateur en combinant le plug-in Simplicity and Volvylity of JQuery avec la robustesse et l'évolutivité de l'ember.
• Pour intégrer le plug-in jQuery dans une application Ember, installez d'abord jQuery à l'aide du gestionnaire de package NPM, puis importez le plug-in dans les composants Ember pertinents.
• L'initialisation du plug-in jQuery dans le composant Ember doit être effectuée dans une fonction spéciale nommée didInsertElement, en utilisant this.$ au lieu de $ pour s'assurer que le plug-in est initialisé uniquement pour ce composant et n'interfère pas avec d'autres composants.
• Pour éviter les gestionnaires d'événements redondants, tous les événements définis à l'aide du plugin doivent être supprimés lorsque le composant est sur le point d'être supprimé du DOM, à l'aide d'un autre crochet de bilan nommé willDestroyElement.

Cet article a été examiné par Craig Bilner. Merci à tous les pair de sitepoint pour avoir obtenu le contenu de sitepoint à son meilleur!

Compte tenu de la popularité de JQuery, il joue toujours un rôle crucial dans le domaine du développement Web, en particulier lors de l'utilisation de cadres tels que Ember, il n'est pas surprenant qu'il soit souvent utilisé. Les composants de ce cadre sont similaires aux plugins jQuery, car ils sont tous conçus pour assumer une seule responsabilité dans un projet. Dans cet article, nous développerons un simple composant en braise. Ce tutoriel montre comment intégrer le plug-in jQuery dans votre application Ember. Ce composant agit comme un emballage pour le plugin, affichant une liste des vignettes de l'image. Chaque fois que nous cliquons sur la vignette, sa version plus grande sera affichée dans l'aperçu de l'image. Cela se fait en extraction de l'attribut src de la vignette cliquée. Nous définissons ensuite la propriété src de l'aperçu dans la propriété src de la vignette

. Le code complet de cet article peut être trouvé sur GitHub. Dans cet esprit, commençons ce projet.

Paramètres du projet

Tout d'abord, créons un nouveau projet Ember. Tout d'abord, exécutez la commande suivante sur la CLI:

npm install -g ember-cli

Une fois terminé, vous pouvez créer le projet en exécutant la commande suivante:

ember new emberjquery

emberjquery Cela créera un nouveau projet dans un dossier appelé cd emberjquery et installera les dépendances requises. Maintenant, allez au répertoire en écrivant bower.json. Ce projet contient différents fichiers que nous modifierons dans ce tutoriel. Le premier fichier que vous devez modifier est le fichier bower.json. Ouvrez-le et modifiez la version Ember actuelle en 2.1.0. Le plugin jQuery que j'ai créé pour ce projet est disponible en tant que package Bower. Vous pouvez inclure cette ligne dans votre projet en l'ajoutant à votre fichier

:

"jquerypic": "https://github.com/LaminSanneh/sitepoint-jquerypic.git#faulty"

Maintenant, pour installer le plug-in et une nouvelle version de Ember, exécutez la commande suivante:

npm install -g ember-cli

Étant donné que ce plugin n'est pas un composant Ember, nous devons inclure manuellement les fichiers requis. Dans le fichier ember-cli-build.js, ajoutez les deux lignes suivantes avant l'instruction return:

ember new emberjquery

Ces lignes importent deux fichiers et les incluent dans la construction. L'un est le fichier de plugin lui-même, et l'autre est le fichier CSS du plugin. La feuille de style est facultative et vous pouvez l'exclure si vous prévoyez de coiffer le plugin vous-même.

Créer un nouveau composant plug-in

Après avoir inclus le plugin dans l'application, commençons à créer un nouveau composant en exécutant la commande suivante:

"jquerypic": "https://github.com/LaminSanneh/sitepoint-jquerypic.git#faulty"

Cette commande crée un fichier de classe et un fichier de modèle. Dans le fichier de modèle, collez le contenu du fichier bower_components/jquerypic/index.html. Placez le contenu dans la balise , à l'exclusion des scripts. À l'heure actuelle, le fichier de modèle doit ressembler à ceci:

bower install

Dans le fichier de classe, ajoutez une fonction nommée didInsertElement:

// 要添加的行
app.import("bower_components/jquerypic/js/jquerypic.js");
app.import("bower_components/jquerypic/styles/app.css");

return app.toTree();
};

Nous sommes maintenant à un moment critique. Avec jQuery, l'initialisation du plugin se produit généralement dans la fonction document.ready, comme indiqué ci-dessous:

ember generate component jquery-pic

Cependant, pour les composants Ember, cette initialisation se produit dans une fonction spéciale nommée

. Cette fonction est appelée lorsque le composant est prêt et a été inséré avec succès dans le DOM. En emballage notre code dans cette fonction, nous pouvons garantir deux choses: didInsertElement

Le plugin est initialisé uniquement pour ce composant
Les plugins n'interfèrent pas avec les autres composants

Avant d'initialiser le plugin, utilisons les composants dans son état actuel. Pour ce faire, créez un modèle d'index en utilisant la commande suivante:

{{yield}}
<div class="jquerypic">
  <div class="fullversion-container">
    <img class="full-version lazy"  src="/static/imghwm/default1.png"  data-src="https://img.php.cn/?x-oss-process=image/resize,p_40"  alt="">
  </div>
  <div class="thumbnails">
    <img class="thumbnail lazy"  src="/static/imghwm/default1.png"  data-src="https://img.php.cn/?x-oss-process=image/resize,p_40"  alt="">
    <img class="thumbnail lazy"  src="/static/imghwm/default1.png"  data-src="https://img.php.cn/?x-oss-process=image/resize,p_40"  alt="">
    <img class="thumbnail lazy"  src="/static/imghwm/default1.png"  data-src="https://img.php.cn/?x-oss-process=image/resize,p_40"  alt="">
    <img class="thumbnail lazy"  src="/static/imghwm/default1.png"  data-src="https://img.php.cn/?x-oss-process=image/resize,p_40"  alt="">
    <img class="thumbnail lazy"  src="/static/imghwm/default1.png"  data-src="https://img.php.cn/?x-oss-process=image/resize,p_40"  alt="">
  </div>
</div>

puis ajoutez le code suivant au modèle pour utiliser le composant:

import Ember from 'ember';

export default Ember.Component.extend({
  didInsertElement: function () {

  }
});

Après avoir terminé, chargez le serveur Ember avec la commande suivante:

$(document).ready(function(){
  // 在这里初始化插件
});

Utilisez cette commande pour démarrer le serveur. Ouvrez le navigateur de votre choix et accédez à l'URL spécifiée dans l'interface de ligne de commande. Vous devriez voir une liste des miniatures sous l'aperçu de l'image. Notez que lorsque vous cliquez sur la vignette, rien ne se passe. C'est parce que nous n'avons pas encore de gestionnaire d'événements de plugin. Faisons-le! Mais avant de décrire comment effectuer la bonne initialisation, je vais vous montrer une erreur que de nombreux développeurs feront. Cette solution semble fonctionner à première vue, mais je prouverai que ce n'est pas la meilleure solution en montrant l'erreur qu'il introduit.

(Le contenu suivant est similaire au texte d'origine, mais les phrases ont été ajustées et polies et ont maintenu la signification d'origine)

Initialisation des composants enceinte

Pour afficher le problème, ajoutons d'abord le code suivant à la fonction

: didInsertElement

npm install -g ember-cli

Sans utiliser Ember, c'est ainsi que vous initialisez généralement les plugins. Maintenant, vérifiez la fenêtre de votre navigateur et cliquez sur la vignette. Vous devriez les voir se charger dans le grand aperçu de l'image comme prévu. Tout semble fonctionner correctement, non? Ok, consultez ce qui se passe lorsque nous ajoutons une instance de deuxième composante. Faites cela en ajoutant une autre ligne de code contenant le même code que j'ai montré plus tôt dans le modèle d'index. Par conséquent, votre modèle devrait maintenant ressembler à ceci:

ember new emberjquery

Si vous passez à la fenêtre du navigateur, vous devriez voir deux instances de composants apparaître. Lorsque vous cliquez sur la vignette de l'un des instances, vous pouvez remarquer l'erreur. L'aperçu des deux instances changera, pas seulement l'instance qui clique. Pour résoudre ce problème, nous devons changer un peu l'initialiseur. La déclaration correcte à utiliser est la suivante:

"jquerypic": "https://github.com/LaminSanneh/sitepoint-jquerypic.git#faulty"

La différence est que nous utilisons this.$ au lieu de $ maintenant. Les deux instances de composants devraient désormais fonctionner correctement. Cliquer sur une vignette pour une instance ne doit pas affecter un autre composant. Lorsque nous utilisons this.$ dans un composant, nous nous référons au gestionnaire jQuery qui est uniquement pour ce composant. Par conséquent, toutes les opérations DOM que nous effectuons sur elle affecteront uniquement l'instance de composant. De plus, tout gestionnaire d'événements sera défini uniquement sur ce composant. Lorsque nous utilisons la propriété Global JQuery $, nous nous référons à l'ensemble du document. C'est pourquoi notre initialisation affecte un autre composant. Je dois modifier mon plugin pour démontrer cette erreur, ce qui pourrait faire l'objet d'un futur article. Cependant, la meilleure pratique pour l'exploitation du DOM des composants est d'utiliser this.$.

Détruisez le plugin

ok, jusqu'à présent, nous avons appris à configurer des gestionnaires d'événements. Il est maintenant temps de montrer comment supprimer tous les événements que nous avons configurés avec le plugin. Nous devons le faire lorsque nos composants sont sur le point d'être retirés du DOM. Nous devrions le faire parce que nous ne voulons pas que des gestionnaires d'événements redondants y soient accrochés. Heureusement, le composant Ember fournit un autre crochet appelé willDestroyElement. Ce crochet est appelé chaque fois que Ember est sur le point d'être détruit et l'instance de composant est supprimée du DOM. Mon plugin a une méthode stopEvents qui peut être appelée sur l'instance de plugin. Cette méthode doit être appelée dans un crochet spécial fourni par Ember. Ajoutez donc la fonction suivante au composant:

bower install

Modifiez la fonction didInsertElement pour ressembler à ceci:

npm install -g ember-cli

Dans la fonction didInsertElement, nous stockons simplement l'instance de plugin dans une propriété du composant. Nous le faisons afin que nous puissions y accéder dans d'autres fonctions. Dans la fonction willDestroyElement, nous appelons la méthode stopEvents sur l'instance du plugin. Bien qu'il s'agisse d'une meilleure pratique, notre application ne peut pas déclencher ce crochet. Par conséquent, nous allons configurer un gestionnaire de clics de démonstration. Dans ce gestionnaire, nous appellerons la méthode stopEvents sur l'instance du plugin. Cela me permet de montrer que tous les gestionnaires d'événements ont été supprimés comme prévu. Maintenant, ajoutons un gestionnaire de fonctions de clic au composant:

ember new emberjquery

Ensuite, ajoutez une balise <code><p></p> au modèle de composant, comme indiqué ci-dessous:

"jquerypic": "https://github.com/LaminSanneh/sitepoint-jquerypic.git#faulty"

En cliquant sur cet onglet, il appelle le fonctionnement stopEvents de détruire le plugin. Après avoir cliqué sur un paragraphe, le plugin ne doit plus répondre à l'événement de clic. Pour activer à nouveau les événements, vous devez initialiser le plugin comme nous l'avons fait dans le crochet didInsert. Grâce à la dernière section, nous terminons le composant de braise simple. Félicitations!

(Les pièces de conclusion et de FAQ sont similaires au texte d'origine, sauf que les phrases sont ajustées et polies et maintenaient la signification d'origine)

Conclusion

Dans ce tutoriel, vous avez vu que le plugin jQuery joue toujours un rôle crucial dans notre carrière. Avec sa puissante API et son cadre JavaScript disponible, il est très utile de comprendre comment combiner ces deux mondes et les faire fonctionner en harmonie. Dans notre exemple, le composant agit comme un emballage pour le plugin, affichant une liste des miniatures d'image. Chaque fois que nous cliquons sur la vignette, sa version plus grande sera affichée dans l'aperçu de l'image. Ce n'est qu'un exemple, mais vous pouvez intégrer tout plugin jQuery requis. Encore une fois, le code est disponible sur GitHub. Utilisez-vous le plugin jQuery dans votre application Ember? Si vous voulez en discuter, n'hésitez pas à commenter dans la section ci-dessous.

FAQ sur l'intégration du plug-in jQuery dans des applications en berce

Quel est le but d'intégrer le plug-in jQuery dans une application Ember?

L'intégration du plug-in jQuery dans les applications Ember peut améliorer considérablement la fonctionnalité et l'expérience utilisateur de votre application. Le plugin jQuery fournit diverses fonctionnalités telles que des animations, la validation des formulaires et les éléments interactifs qui peuvent être facilement intégrés dans des applications enceintes. Cette intégration permet aux développeurs de profiter de la puissance de JQuery et Ember pour combiner la simplicité et la polyvalence des plug-ins jQuery avec la robustesse et l'évolutivité de Ember.

Comment installer jQuery dans mon application Ember?

Pour installer jQuery dans l'application Ember, vous pouvez utiliser le gestionnaire de packages NPM. Exécutez la commande npm install --save @ember/jquery dans votre terminal. Cela ajoute JQuery aux dépendances du projet et la rend réalisable dans l'application.

Comment utiliser le plugin jQuery dans mon application Ember?

Après avoir installé jQuery, vous pouvez utiliser le plug-in jQuery dans votre application Ember en l'important dans le composant Ember pertinent. Vous pouvez ensuite utiliser les fonctions du plugin en fonction de la documentation du plugin. N'oubliez pas de vous assurer que le plugin est compatible avec la version de jQuery que vous utilisez.

y a-t-il un problème de compatibilité entre jQuery et Ember?

Souvent, JQuery et Ember travaillent bien ensemble. Cependant, selon la version de JQuery et Ember que vous utilisez, il peut y avoir des problèmes de compatibilité. Vérifiez toujours la documentation pour jQuery et Ember pour compatibilité.

Puis-je utiliser le plugin jQuery en Ember sans installer jQuery?

Non, vous ne pouvez pas utiliser le plugin jQuery en Ember sans installer jQuery. Le plugin jQuery est construit sur le dessus de la bibliothèque JQuery et l'exige. Par conséquent, vous devez d'abord installer jQuery avant de pouvoir utiliser n'importe quel plugin jQuery.

Comment mettre à jour jQuery dans mon application Ember?

Pour mettre à jour jQuery dans l'application Ember, vous pouvez utiliser le gestionnaire de packages NPM. Exécutez la commande npm update @ember/jquery dans votre terminal. Cela mettra à jour jQuery vers la dernière version.

Puis-je utiliser plusieurs plugins jQuery dans mon application Ember?

Oui, vous pouvez utiliser plusieurs plugins jQuery dans votre application Ember. Cependant, sachez que l'utilisation de trop de plugins peut affecter les performances de votre application. Testez toujours en profondeur votre application après avoir ajouté un nouveau plugin pour vous assurer qu'il fonctionne toujours comme prévu.

Comment résoudre les problèmes de plug-in jQuery dans les applications Ember?

Si vous rencontrez des problèmes de plugin jQuery dans votre application Ember, vérifiez d'abord la documentation du plugin pour tout problème connu ou des conseils de dépannage. Si vous rencontrez toujours des problèmes, essayez de contacter le développeur du plugin ou la communauté Ember pour obtenir de l'aide.

Puis-je utiliser le plugin jQuery dans mon application Ember sans aucune expérience de programmation?

Bien que vous puissiez utiliser le plugin jQuery dans votre application Ember sans aucune expérience de programmation, il est recommandé de comprendre les bases de JavaScript et Ember. Cela vous permettra de comprendre plus facilement comment intégrer et utiliser efficacement les plugins.

Existe-t-il une alternative à l'utilisation du plugin jQuery dans mon application Ember?

Oui, il existe des alternatives à l'utilisation du plugin jQuery dans les applications Ember. Ember lui-même a un riche écosystème de modules complémentaires qui peuvent fournir des fonctionnalités similaires aux plugins jQuery. De plus, vous pouvez utiliser le JavaScript natif ou d'autres bibliothèques JavaScript pour obtenir les mêmes résultats. Cependant, les plugins JQuery fournissent généralement des solutions plus simples et plus pratiques.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!