web-dev-qa-db-fra.com

Normes jQuery et meilleures pratiques

Je suis actuellement responsable du déploiement de l'utilisation de jQuery auprès de la communauté des développeurs Web au sein de notre entreprise. Une partie de cela implique la présentation d'un cours, mais une autre partie implique la communication des normes et des meilleures pratiques.

Si vous utilisez les "meilleures pratiques jQuery" de Google, vous trouverez probablement ce qui suit parmi les résultats de recherche. http://www.smashingmagazine.com/2008/09/16/jquery-examples-and-best-practices/http://www.artzstudio.com/2009/04/jquery-performance-rules /

Celles-ci ont été utiles et j'ai donné beaucoup d'informations utiles à leur sujet. Cependant, ce qui m'intéresserait vraiment, ce serait des conseils, des pièges, des opinions, etc. sur les meilleures pratiques de développeurs jQuery expérimentés et de ceux qui se seraient retrouvés dans une position similaire à moi. Tout bon lien serait également apprécié.

MODIFIER:

Ajout d'une section jQuery Coding Standards sur ma propre page:

http://www.jameswiseman.com/blog/?p=48

javascriptjquerycode-standards
61
James Wiseman

Vous pouvez trouver ce sujet tendance ici sur StackOverflow.com

pièges jQuery à éviter

Astuces très intéressantes les unes après les autres.

voici encore plus que j'ai trouvé dans mes favoris:

42
adardesign

Quelque chose que j'ai personnellement commencé à faire est une sorte de Notation Hongroise Apps pour les ensembles jQuery, en préfixant ces variables avec un $

var someInt = 1;
var $someQueryCollection = $( 'selector' );

Je constate qu'au fur et à mesure que mes extraits de jQuery se développent, cela devient inestimable, non seulement dans la promotion du stockage des ensembles de jQuery en tant que variables, mais pour m'aider à garder une trace des variables qui sont réellement jQuery définit.

27
Peter Bailey

JavaScript discret (séparation du balisage et du comportement)

À l'époque, il était courant de placer votre gestionnaire de clics dans le balisage. Il est maintenant recommandé de ne pas écrire votre code JS dans votre balisage mais de l'inclure via les événements DOM.

Amélioration progressive

L'utilisateur obtient une meilleure expérience s'il utilise un navigateur conforme aux normes et/ou si JavaScript est activé. Le site Web/l'application Web est toujours accessible même s'ils ont un navigateur plus ancien ou si JS est désactivé.

Détection de fonctionnalité et non détection de navigateur

En gardant les points ci-dessus de côté, je me concentrerais vraiment sur la transmission du message (brisant la notion préconçue) que JavaScript est un langage de jouet. J'ai vu trop de développeurs qui pensent de cette façon et tout se déroule à partir de là. Vous devez leur expliquer comment JavaScript est un langage très puissant et pourquoi ils ont besoin d'une bibliothèque JS (en raison des incohérences du navigateur) même si JS lui-même est très puissant.

Bonne chance.

12
SolutionYogi

Le fonctionnement de jQuery n'est PAS le même que celui de JavaScript, même s'ils sont identiques. jQuery fonctionne sur les sélecteurs CSS, comme le (s) nom (s) de classe et l'id des éléments. Pour sélectionner un élément dans jQuery, vous devez:

$("#yourID") or $(".yourClass") or $("div") or $("#yourID p") etc

Et vous obtiendrez une collection de tous les éléments de la page qui correspondent à vos critères. Vous pouvez ensuite effectuer vos actions sur TOUS ces éléments sans aucun bouclage d'aucune sorte. Il est important de se rappeler:

$(".yourClass").click(function(){
    //do stuff
});

affectera tous les éléments auxquels .yourClass est attaché. Un conseil: si vous allez accéder à la $(this), vous devez l'enregistrer en tant que variable locale:

$(".yourClass").click(function(){
    var $this = $(this);
});

car cela accélérera votre fonction.

2
Jason