14 aspects qui affectent l'utilisation de jQuery_jquery

Heureusement, les gens ont généralement le choix entre une variété de plugins différents. Mais même si vous n’en utilisez qu’un, déterminez si cela vaut la peine de l’utiliser. N'introduisez jamais de mauvais code dans votre base de code.

Avez-vous besoin d'un plug-in ?

La première chose est de déterminer si vous avez besoin d'un plug-in. Si vous n'en avez pas besoin, vous économiserez à la fois la taille du fichier et votre temps.

　1. Vaut-il mieux l'écrire soi-même ?

Si la fonction est très simple, écrivez-la vous-même. Les plugins pour jQuery regroupent souvent diverses fonctionnalités, ce qui peut être excessif. Dans ce cas, il est souvent plus judicieux d’écrire à la main les fonctions simples. Bien sûr, il y a une certaine mesure de la quantité de travail impliquée.

Par exemple, si vous avez besoin de fonctionnalités plus avancées, l'accordéon de jQuery UI est un bon choix. Mais si vous avez juste besoin d'ouvrir et de fermer le panneau. Si vous n'utilisez pas déjà l'interface utilisateur jQuery sur votre site Web, pensez à slideToggle() ou animate() de jQuery.

　2. Utilisez-vous déjà un plug-in similaire ?

Il est très tentant de constater qu’un plug-in ne résout pas tout ce dont vous avez besoin et de chercher un autre plug-in pour compenser. Mais inclure deux plugins similaires dans la même application est définitivement un JavaScript gonflé. Pouvez-vous trouver un plugin qui couvre tous vos besoins ? Sinon, pouvez-vous étendre l’un de ces plugins pour couvrir tout ce dont vous avez besoin ? De même, lorsque vous décidez d’étendre ou non un plugin, pesez les avantages par rapport au temps de développement.

Par exemple, la lightbox de jQuery est un excellent moyen d'afficher des photos contextuelles dans une galerie, et simpleModal est un excellent moyen d'afficher des informations modales à l'utilisateur. Mais pourquoi votre site Web utilise-t-il les deux méthodes ? Vous pouvez facilement en étendre un pour couvrir les deux besoins. Mieux encore, trouvez un plugin qui couvre tout, comme Colorbox.

　3.Besoin de JavaScript ?

Dans certains cas, JavaScript n'est pas nécessaire. Les pseudo-sélecteurs CSS, tels que les fonctions de survol et de transition CSS3, peuvent couvrir une variété d'effets dynamiques, bien plus rapidement que les solutions JavaScript. De plus, de nombreux plug-ins ne fournissent que des styles ; je pense qu’il serait peut-être préférable d’utiliser le balisage et le CSS.

Si vous devez afficher du contenu dynamique et nécessiter des invites conditionnelles, jQuery Tooltip est essentiel. Cependant, si vous n'avez besoin d'indices qu'à quelques endroits, il est préférable d'utiliser du CSS pur (voir cet exemple). Pour les invites statiques, vous pouvez aller plus loin et les animer à l'aide de transitions CSS3, mais n'oubliez pas que l'animation ne fonctionnera que dans certains navigateurs.

Lors de l'examen d'un plugin, une série de signes d'avertissement indiquent que le plugin est de mauvaise qualité. Ici, nous examinerons tous les aspects des plugins, du JavaScript au CSS en passant par le balisage. Nous réfléchirons même à la manière de distribuer les plugins. Tout avertissement présent dans un plugin exclura votre plugin de toute considération. Si vous avez la chance de pouvoir choisir parmi plusieurs plugins, ces mises en garde peuvent vous aider à affiner vos choix. Cependant, même s’il n’y a qu’une seule option, il vaut mieux abandonner si vous voyez trop d’avertissements. Vous pouvez réduire vos maux de tête à l'avance.

　4. Option étrange ou syntaxe de paramètre

Lors de l'utilisation de jQuery, les ingénieurs de développement se soucient de la manière dont la fonction accepte les paramètres. Si un développeur de plugin utilise une syntaxe spéciale, il est raisonnable de croire qu'il n'a pas beaucoup d'expérience en programmation jQuery ou JavaScript.

Certains plugins acceptent un objet jQuery comme paramètre, mais n'autorisent pas le chaînage de l'objet, par exemple $.myPlugin( $('a') ); C'est un grand avertissement.

Code :

$('.my-selector').myPlugin({
opt1 : 75,
opt2 : 'asdf'
});
 
$('.my-selector').myPlugin({
opt1 : 75,
opt2 : 'asdf'
});
 
$.myPlugin({
opt1 : 75,
opt2 : 'asdf'
}, $('.my-selector'));
 
$.myPlugin({
opt1 : 75,
opt2 : 'asdf'
}, $('.my-selector'));

​5. Peu ou pas de documentation

Sans documentation, il est très difficile d'utiliser un plug-in, car c'est le premier endroit auquel on pense lorsque l'on cherche des réponses à des questions. Les fichiers sont disponibles dans différents formats et une documentation appropriée est préférable, mais de bons commentaires sur le code peuvent être tout aussi bons. S'il n'y a pas de documentation ou s'il s'agit simplement d'un exemple simple sur lequel bloguer, vous souhaiterez peut-être envisager d'autres options. Une bonne documentation montre que l'auteur du plugin se soucie des utilisateurs comme vous. Cela montre également qu'ils ont recherché d'autres plugins et connaissent la valeur d'une bonne documentation.

　6. Mauvais dossier de support

Le manque de soutien signifie qu'il sera difficile d'obtenir de l'aide lorsque des problèmes sont découverts. Ce qui est encore plus préoccupant, c’est que cela indique que le plugin n’a pas été mis à jour depuis un certain temps. L’un des avantages des logiciels open source est qu’ils attirent beaucoup d’attention et vous aident à les déboguer et à les améliorer. Si l’auteur ne parle pas de ces personnes, le plugin ne sera pas mis à jour.

À quand remonte la dernière mise à jour du plugin que vous envisagez ? À quand remonte la dernière fois que vous avez répondu à un message ? Bien que tous les plug-ins n'aient pas besoin d'un système de support solide comme le site Web des plug-ins jQuery. Méfiez-vous des plugins qui ne sont jamais mis à jour.

Avoir des enregistrements de support technique historiques et l'auteur répondant aux bugs ou renforçant les exigences est un signe vert. Avoir un forum d'assistance indique en outre que le plugin est bien pris en charge, sinon l'auteur, du moins il existe un forum pour vous aider à résoudre les problèmes.

　7. Pas de version compressée

Bien qu'il s'agisse d'un avertissement assez mineur, si le créateur du plugin ne fournit pas de version minifiée du code source, alors il ne prête probablement pas beaucoup d'attention aux performances. Bien sûr, vous pouvez effectuer la compression vous-même, mais cet avertissement n'est pas une perte de temps : c'est un indice que le plugin peut contenir des problèmes de performances plus graves.

En revanche, proposer en téléchargement des versions compressées, compressées et gzippées est un signe.

　8. Besoin d'un balisage étrange

Si un plug-in nécessite un balisage, celui-ci doit être de haute qualité. Il doit être conforme au sens sémantique et être suffisamment flexible. En plus d’une technologie frontale médiocre, des majorations étranges peuvent également rendre l’intégration plus difficile. Un bon plug-in peut couvrir presque tous les balisages que vous utilisez ; utiliser un mauvais plug-in, c'est comme sauter à travers des obstacles.

Dans certains cas, une majoration stricte est nécessaire, son utilisation doit donc être autorisée dans une certaine fourchette. Fondamentalement, plus la fonctionnalité est spécifique, plus les besoins de balisage sont spécifiques. Le balisage entièrement flexible est le plus simple à intégrer à partir de n’importe quelle option jQuery naturelle.

　9. Surutilisation du CSS

De nombreux plug-ins jQuery incluent CSS, et la qualité du CSS est la même que celle de JavaScript. Trop de CSS est définitivement un mauvais signe. Mais ce qui est « terminé » dépend du but du plugin. Les plugins axés sur l'affichage, tels que les lightbox ou les plugins d'interface utilisateur, nécessitent plus de CSS que les simples plugins basés sur l'animation. De bons styles CSS facilitent la modification du programme en fonction de votre style de thème.

　10. Personne d'autre ne l'utilise

Le nombre d'utilisateurs de jQuery est énorme et le plugin le plus décent aura probablement quelque chose qu'ils ont écrit à ce sujet, même s'il s'agit d'un "50 jQuery [remplissez le vide]". Par exemple, si vous créez un simple plug-in de recherche Google et que vous obtenez peu de résultats de recherche, vous souhaiterez peut-être envisager d'autres options, à moins que le plug-in ne soit tout nouveau, ou que vous trouviez un ingénieur spécialisé dans l'écriture de plug-ins. pour le modifier.

　11. Utilisation et observation

La meilleure façon de tester un plugin est simplement de l'exécuter sur le serveur et de voir les résultats. Premièrement, est-ce que cela enfreint certaines règles ? Assurez-vous de jeter un œil à l’extrait de code JavaScript. Si le plugin inclut une feuille de style, recherchez les erreurs de mise en page et de style sur chaque page.

De plus, quel est l'effet de ce plug-in ? Si le processus est lent ou si la page se charge en retard, envisagez un autre plugin.

　12. Utilisez JSPerf pour l'évaluation des performances

Faites passer la présentation de votre plug-in au niveau supérieur et testez-la avec JSPerf. L'analyse comparative exécute un ensemble d'opérations plusieurs fois et renvoie le temps d'exécution moyen. JSPerf fournit un moyen simple de tester la vitesse d'exécution d'un plugin. C'est un moyen important de choisir deux plugins presque identiques.

　13. Tests multi-navigateurs

Si un plugin contient beaucoup de CSS, assurez-vous de tester les styles dans tous les navigateurs que vous souhaitez prendre en charge. N'oubliez pas que le CSS peut provenir à la fois de feuilles de style externes et de JavaScript interne.

Même si le plugin n'a pas de CSS, vérifiez quand même les erreurs JavaScript sur tous les navigateurs (au moins sur la première version d'IE que vous prenez en charge). Le cœur de jQuery gère déjà la plupart des problèmes multi-navigateurs, mais les plugins ont tendance à utiliser une certaine quantité de JavaScript pur, ce qui tend à enfreindre les règles des navigateurs plus anciens.

　14. Tests unitaires

Enfin, envisagez d’autres tests multi-navigateurs – tests unitaires. Les tests unitaires sont un moyen simple de tester des plugins de composants, prenant en charge n'importe quel navigateur ou plate-forme. Si l'auteur du plugin a inclus des tests unitaires dans le package de téléchargement, vous pouvez être sûr que le plugin fonctionnera sur tous les navigateurs et plates-formes. Malheureusement, très peu de plug-ins incluent des données de tests unitaires, mais cela ne signifie pas que vous ne pouvez pas utiliser le plug-in QUnit pour effectuer vos propres tests unitaires.

Avec des paramètres minimaux, testez si les méthodes du plugin renvoient les résultats attendus. Tant qu'un test échoue, ne perdez pas votre temps sur ce plugin. Dans la plupart des cas, effectuer des tests unitaires est une perte de temps, mais QUnit peut vous aider à déterminer la qualité de votre plugin.

Conclusion

Lors de l'évaluation de la qualité d'un plug-in jQuery, évaluez d'abord la qualité du code. JavaScript est-il optimisé et sans erreur ? Le CSS a-t-il été ajusté et valide ? La dénomination du balisage est-elle suffisamment sémantique et flexible ? Ces questions se résument toutes à la question la plus importante : ce plugin est-il facile à utiliser ?

Le noyau de jQuery est optimisé et vérifié contre les erreurs, pris en charge non seulement par les membres de l'équipe principale, mais également par l'ensemble de la communauté jQuery. Bien qu'il soit injuste de soumettre les plugins jQuery aux mêmes normes, il devrait au moins y avoir certaines des mêmes normes d'évaluation.